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

  • 73
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

初めに

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

http://theimaginationwasunbroken.com

GitHub Pages

GitHub Pagesとは

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

GitHubアカウントの取得

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

https://github.com/join

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

リポジトリの作成

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

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

スクリーンショット 2016-01-02 16.07.12.png

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

スクリーンショット 2016-01-02 16.14.22.png

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

GitHub Pagesの設定

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

スクリーンショット 2016-01-02 16.28.29.png

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

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

独自ドメインの設定

独自ドメインの取得

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

http://www.onamae.com/

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

DNSレコードの設定の設定

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

スクリーンショット 2016-01-02 21.25.08.png

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

スクリーンショット 2016-01-02 21.37.03.png

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

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

https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider/

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

CNAMEレコードの設定

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

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

終わりに

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

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