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

GitHubにサインアップ

アカウントを登録する。（無料です）
https://github.co.jp/

GitHubリポジトリの設定

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

リポジトリの作成

GitHubのメニューから Repositories を選択。
緑色のNewボタンをクリック。

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

index.htmlの配置

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

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

<main>
    <h1>hello world</h1>
</main>

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

作成したファイルはmaster branchにコミットすること。
ブラウザでファイルを作る場合は、Commit directly to the master branch.を選択した状態で、Commit new fileボタンをクリックする。

GitHub Pagesの設定

リポジトリ画面のメニューからSettingsを選択する。

遷移した画面を下にスクロール（だいぶ下の方）にGitHub Pagesの設定項目を発見する。

Noneのプルダウンメニューで、master branchを選択。

すると画面に以下のようなURLが表示される。
最低限の設定は以上。

ブラウザでURL https://<GitHubアカウント名>.github.io/<リポジトリ名> にアクセスする。
以下のように表示されれば成功である。

独自ドメインの設定

独自ドメインのリンクもとても簡単。
今回は、ムームードメイン でkanazw.workというドメインを取得。
他のサイトでも設定は同じ要領で出来そう。

ドメイン取得サイトでの操作

ログイン後のメニューから、コントールパネル -> ムームーDNS を選択。

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

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

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

GitHubでの操作

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

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

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

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