GitHub Pagesでカスタムドメインを使用する

~ドメイン取得から証明書取得まで~

Posted by Yu Kiyokawa on Sat, Jan 7, 2023

GitHub Pages でカスタムドメインを設定

GitHub Pages サイトのデフォルトドメインは, johnykiyo.github.io だが, カスタムドメインにすることで, www.example.com のように好きなドメインにすることができる.
GitHub Pagesのカスタムドメイン設定まで

  1. ドメインの取得. (example.com)
  2. サブドメインの設定. (www.example.com)
  3. SSL証明書の発行.
  4. GitHub Actionsのworkflowの変更とGitHub Pagesの設定. を実施.

1. ドメインの取得.

ドメインの取得は, お名前.comか, AWS route 53などのサイトを利用する. 私の場合は, お名前.comのアカウントを持っていなかった&新たに作るのが(アカウント管理の面で)面倒だったのでAWSのroute53を利用した.
ドメイン取得は, 取得したいドメイン名を入力してカートに入れて続行. ドメインのお問合せ情報を入力する必要があるので入力して購入すれば良い.

画像1
ドメイン取得画面

2. サブドメインの設定.

サブドメインとは, メインサイトとは別のコンテンツを作るときに, 本体ドメインを元に任意で設定できるドメイン名のことだ. 例えば, example.com(独自ドメイン)を本体ドメインとしたとき, hoge.example.comやblog.example.comのように本体ドメインの先頭に文字列を挿入しているドメインをサブドメインと呼ぶ.

AWS Route53のダッシュボードのホストゾーンをクリックして, レコードを作成する.

画像2
ホストゾーンの画面
画像3
レコード作成画面
画像4
レコード作成の設定

3. SSL証明書の発行

証明書は, GitHub Pagesで公開したサイトにで, 他の人がサイトへのトラフィックを詮索したり改ざんしたりするのを防ぐ暗号化のレイヤーを提供するhttpsを有効にするために必要.

証明書発行には, AWS Certificate Managerを使用する. 証明書リクエスト > パブリック証明書をリクエスト > 完全修飾ドメイン名に取得したドメインを入力すれば良い.
しばらく時間経てば発行済みになる.

4. GitHub Actionsのworkflowの変更とGitHub Pagesの設定.

GitHub Pagesの設定はとても簡単で, Settings > Pages > Custom domainにサブドメインをwww.johnkiyo.com入力してSaveすれば良い.

GitHub Actionsの設定は, サイト構築のGitHub Actionsのyaml設定にcnameを追加する.

画像5
cname追加の差分

まとめ

以上, 自身のオリジナルドメインを取得, サブドメインの設定, SSL証明書の取得, GitHub Pages サイトのカスタムドメイン設定までの一連の流れをまとめました.

追伸

AWSの料金は, ドメイン取得の 13USD/年 + 消費税, Route 53は, 0.50USD ホストゾーンごと / 月 くらい.