GitHub Pagesで静的なサイトを公開し、独自ドメインを設定する

Posted at 2016-01-02

初めに

今回自身のGitHub Pagesのサイトにお名前.comで取得した独自ドメインを設定したので、設定方法を書いていこうと思います。

GitHub Pagesは静的なサイトを簡単に公開できるGitHubのサービスです。

まずはGitHub Pagesを利用するためにGitHubのアカウントを取得します。

こちらから新規登録をしてアカウントを作成します。

GitHub Pagesはアカウントに対して作成するのと、リポジトリに対して作成ができますが、今回はリポジトリに対して作成したいと思います。

アカウントを作成したら次に、「＋New Repository」で新しいリポジトリを作成します。

Repository nameに適当に名前を入力し「Create repository」でリポジトリを作成します。

作成したら表示されたコマンドをMacならターミナルに、Windowsならコマンドプロンプトに入力してリポジトリの作成は完成です。

次に作成したリポジトリにGitHub Pagesを設定します。
設定の方法はgh-pagesというブランチを作成するだけです。

gh-pagesというリポジトリを作成することで静的なサイトを公開できます。
サイトの公開に必要なhtmlファイルやCNAMEファイル（後述）は全てこのgh-pagesブランチにプッシュします。

アドレスは
{GitHubのアカウント名}.github.io/{作成したリポジトリ名}
になります。今回自分が作成したサンプルの場合は
tiwuofficial.github.io/GitHubPagesSample
になります。
次にこのサイトに独自ドメインを設定したいと思います。

まずはお名前.comというサイトで好きな独自ドメインを取得します。

今回自分はtheimaginationwasunbroken.comというドメインを取得しました。

取得したらお名前.comのドメイン設定タブを開いて下記のアイコンのDNS関連機能の設定を開きます。

自分の取得したドメインにチェックを入れ「次へ進む」を開きます。
DNSレコード設定を利用するの右に「設定」のボタンがあるので、開きます。

「ホスト名 / TYPE / TTL / VALUE / 優先 / 状態」と入力する箇所があります。
TYPEにAが選択されていることを確認して、VALUEに192.30.252.153と192.30.252.154の合計2つを追加します。

上記のIPアドレスは下記GitHubのhelpページを参考にしました。

IPを2つ追加したら画面下部にある確認画面に進むを開き、設定するをクリックし、設定を完了させます。

DNSレコードの設定が終わったらCNAMEという名前のファイルにお名前.comで取得したドメインのみを記述しプッシュします。

これでお名前.comで取得した独自ドメインにGitHub Pagesのサイトを結びつけることができます。

GitHub Pagesで以前からサイトは公開していたのですが、今回独自ドメインを利用したので
設定方法をまとめました。

サイトの公開や独自ドメインの設定も簡単だったのでこの機会に是非、独自ドメインを設定してみてはどうでしょうか。

125