GitHub Pagesで静的ウェブサイト公開　～初級Webエンジニアにおすすめ

GitHub pagesでウェブサイト公開が異様に簡単だったので、まとめておく。

#GitHubにサインアップ
アカウントを登録する。（無料です）
[https://github.co.jp/](https://github.co.jp/)

#GitHubリポジトリの設定
リポジトリを作成し、トップディレクトリにindex.htmlを配置する。

###リポジトリの作成
GitHubのメニューから **Repositories** を選択。
緑色の**New**ボタンをクリック。
![image0013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/4577eae0-8996-61d0-3070-cda1856f2ebb.png)

**Repository name** に任意の文字列を入れ、（ここでは*blog*と入力）
緑色の**Create repository**ボタンをクリック。

![image0012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/eb5416ca-d671-1711-abc9-b6b3bd8b53ab.png)

###index.htmlの配置
作成したリポジトリのトップディレクトリに、index.htmlファイルを配置する。
Gitの知識がなくても、ブラウザでファイルの作成も可能。
作成したリポジトリの画面から**Create new file**ボタンをクリックすると、ファイルのエディタ画面がブラウザで利用可能。取り急ぎ試してみたいのであればこちらで十分。

![image0014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/86caef0b-2fae-b230-a0ee-3098acc8f2e7.png)


今回はこんな感じで配置。
用意するのはこの1ファイルとGitHubアカウントのみ。

```index.html
<main>
    <h1>hello world</h1>
</main>
```

※トップディレクトリではなく、/docs ディレクトリを切ってその中にwebコンテンツを配置するほうが本運用では利点がある。

作成したファイルはmaster branchにコミットすること。
ブラウザでファイルを作る場合は、**Commit directly to the master branch.**を選択した状態で、**Commit new file**ボタンをクリックする。
![image0015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/2fc839de-d372-30d8-d6e0-f0ee5a4bded4.png)


###GitHub Pagesの設定
リポジトリ画面のメニューから**Settings**を選択する。
![image0006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/0084b3d4-9eb4-a272-c5e5-e7526a8a55ce.png)

遷移した画面を下にスクロール（だいぶ下の方）に**GitHub Pages**の設定項目を発見する。
![image0007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/5bf14344-77bf-74fd-614f-51135a6ae28c.png)

**None**のプルダウンメニューで、**master branch**を選択。
![image0008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/7a19a6da-4db4-31ce-f1ec-7f31f15506a6.png)

すると画面に以下のようなURLが表示される。
最低限の設定は以上。
![image0009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/46bca456-e862-d074-bf16-4c9d86bbf7ac.png)

ブラウザでURL [https://<*GitHubアカウント名*>.github.io/*<リポジトリ名>*](https://kanazwk.github.io/blog/) にアクセスする。
以下のように表示されれば成功である。
![image00100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/a57c404f-b991-0f94-ffcc-971b0e451941.png)


#独自ドメインの設定

独自ドメインのリンクもとても簡単。
今回は、[ムームードメイン](https://muumuu-domain.com/) で**kanazw.work**というドメインを取得。
他のサイトでも設定は同じ要領で出来そう。

##ドメイン取得サイトでの操作
ログイン後のメニューから、**コントールパネル** -> **ムームーDNS** を選択。

![image0005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/344a3613-04a8-3d9f-0675-6518d531c6e0.png)

画面右ペインの **設定2** でサブドメインを割り当てる。
今回はサブドメインを **www** に、種別は、**CNAME**レコードを使用する。
Aレコードを使用できそうでもあるが、xxx.github.ioのURLに対するIPアドレスを調べるところからなので、特に理由がなければCNAMEを選択でよいかと思う。

**内容**の枠に`[*githubアカウント名*].github.io`を入力し、**セットアップ情報変更**ボタンを押して反映。


![image0001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/a0028498-e60f-86ab-dc1a-7cf45c2657e0.png)

未承認ドメインと表示されるので、登録したメールアドレス宛に届いている承認URLをクリックしておく。
※反映が24時間かかるとあるが、待たなくても利用可能のようだ。

![image0004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/57f3ce9c-f4f4-9ad4-9c90-a5ad7578c1ac.png)

##GitHubでの操作
GitHub側では、ドメイン取得サイトで設定したサブドメインを割り当てる。

リポジトリの設定で**Custom domain**の項目にドメイン取得サイトで設定したサブドメインを入力し、**Save**をクリック。

![image0002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/5b26d356-c82a-f7f3-5fc1-db50b708bb3b.png)

URL [https://www.kanazw.work](https://www.kanazw.work) でアクセスすることが出来る。

適当にポートフォリオサイトのテンプレートを突っ込んでみると、5分ほどで以下のような素敵サイトを構築することが出来る。とりあえずweb作ってみるかというWeb系初心者さんに、とっかかりとしておすすめしたい。

![image0011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529867/4671e8e6-9a38-f67f-4701-fb582cb1f51d.png)