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系初心者さんに、とっかかりとしておすすめしたい。
