GitHub Pages に Google Domains で購入した独自ドメインを設定する

GitHub GitHub Pages ドメイン

GitHub Pages のドキュメントを読みながら独自ドメインの設定をするだけの話なのですが、この記事では初心者向けにもう少し詳しく解説します。

GitHub Pages サイトのカスタムドメインを設定する - GitHub Docs

用語

記事の中で頻繁に出てくる用語を先に説明しておきます。知っている方は読み飛ばしてください。

Apex ドメイン (ルートドメイン)

例えば Google Domains で "moyashi.com" を購入したとします。この場合、"moyashi.com" が Apex ドメインになります。

サブドメイン

Apex ドメインをさらに分割したものです。

"moyashi.com" が Apex ドメインの場合、 "www.moyashi.com" や "books.moyashi.com" などがサブドメインになります。

"○○.moyashi.com" の "○○" の部分はユーザーが任意の名前を付けることができます。

Aレコード

ドメイン と IPv4アドレス の関連付けを定義するレコードです。

CNAME

Aレコードで定義されているドメイン名と別名を指定するためのレコードです。

DNSの名前解決では、CNAMEリソースレコードが見つかった場合、ドメイン名を正式名に置き換えて名前解決を継続します。

独自ドメインを設定する

Google Domains でドメインを購入した前提で話を進めます。

Apexドメイン を登録する場合と サブドメイン を登録する場合で手順が異なるので、自分が登録したいドメインの手順を参考にしてください。

Apex ドメインを設定する

1.　Google Domains の管理画面で「マイドメイン」から購入したドメインを選択します。

2.「DNS」を選択し、画面を下にスクロールして"カスタム リソース レコード"の設定をします。

  • タイプを 「A」に切り替えます。
  • 名前を「@」にします。
  • 以下の IPアドレスを登録します。ネームサーバーの IPアドレス は変更される可能性があるのでドキュメントを参照してください。
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

f:id:dev-moyashi:20210110221138p:plain

3.　DNS レコードが正しく設定されたことを確認する。

dig コマンドを使って DNS レコードが正しく設定されたことを確認しましょう。大体10分ぐらいで反映されます。

$ dig <your domain> +noall +answer

4.　GitHubで、サイトのリポジトリにアクセスします。

5.「Settings」を選択し、"Custom domain"の下で、Apex ドメインを入力して「Save」を押します。

f:id:dev-moyashi:20210110221743p:plain

サブドメインを設定する

1.　Google Domains の管理画面で「マイドメイン」から購入したドメインを選択します。

2.「DNS」を選択し、画面を下にスクロールして"カスタム リソース レコード"の設定をします。

  • タイプを「CNAME」に切り替えます。
  • 名前にサブドメインを入力します。（今回だと「www」）
  • データに公開中の GitHub Pages のドメインを入力します。（例：kuroppe1819.github.io）

f:id:dev-moyashi:20210110214602p:plain

以上の設定が完了したら追加ボタンを押します。

3.　GitHubで、サイトのリポジトリにアクセスします。

4.「Settings」を選択し、"Custom domain"の下で、サブドメインを入力して「Save」を押します。

f:id:dev-moyashi:20210110215854p:plain

HTTPS 化

HTTPS 暗号化をしたい場合は、「Enforce HTTPS」を有効にしてください。

f:id:dev-moyashi:20210110220146p:plain

CNAME の管理

Custom Domain の設定をすると自動的にCNAMEファイルが生成されます。ローカル環境でコードを修正してgit pushするとCNAMEファイルが削除されてページが 404 を返すようになるのでコミット差分に含めておきましょう。

参考