運用中の GitHub Pages を、デフォルトの [username].github.io から カスタムドメインへ301リダイレクトしつつ移転したくなり色々調べた結果、簡単にできるということがわかったのでメモします。

どうやるか

ユーザーサイトを管理するリポジトリ( [username].github.io )の設定画面からカスタムドメインを設定し、DNSの設定を行うだけです。

実際に https://aruma256.github.io/ へアクセスしてみると、301リダイレクトされて https://aruma256.dev/ へ遷移することが確認できます。

curlで確認すると以下のようになります。(抜粋)

# curl -I https://aruma256.github.io/
HTTP/2 301 
server: GitHub.com
content-type: text/html
location: https://aruma256.dev/

以降は背景や調べたことを書いていきます。

背景・モチベ

  • aruma256.dev というドメインを持ってはいたものの、publicな用途で使えていなかった
  • 今後、ホスティングサービスの乗り換えがあるかもしれないので、いつでも移転できるようにしたい
    • (気軽に他のホスティングサービスを試したりやおうちサーバーでホストして遊べる状態にしたい)
  • aruma256.github.io を使い始めてそれほど経っていない(1年半程度)し、移転するなら今のうちがよさそう

困りごと(思い込み)

  • GitHub Pages のユーザーサイトは1つしか作れない。つまり、デフォルトの [username].github.io とカスタムドメインの両方を運用することはできない
    • ということは、移転の際には GitHub Pages は [username].github.io からのリダイレクト用に残し、新ドメインは別のホスティングサービスで運用する必要があるのでは?
  • GitHub Pages で301リダイレクトできなさそう
    • JavaScriptでリダイレクトすることになるのか?

移転の流れ

予め、お好きなドメインを取得しておきます。
GitHub Pages のユーザーサイトを管理するリポジトリ( [username].github.io )のPages設定を開き、Custom domain に取得したドメインを入力します。

GitHub Pages の設定画面

すると、主ブランチにてリポジトリ直下に CNAME ファイルが作成されます。これは先程入力したドメインを記述したテキストファイルです。
実際のコミットがこちら
この CNAME ファイルにより、記載されているドメインへ301リダイレクトが行われるようになります。この時点で実際に試してみるとよいです。

なお、カスタムドメインとしてはApexドメインとサブドメインの両方が使えますが、GitHub Pages のドキュメントでは www サブドメインの使用が推奨されていました。(ref)

DNSの設定

Apexドメインを使う場合とサブドメインを使う場合で設定が異なります。
今回はApexドメインのみを対象とします。サブドメインの場合については公式ドキュメントを参考にしてください。

Apexドメインを使う場合、当然ながらAレコードの設定が必要です。公式ドキュメントを参考に設定しましょう。
なお、執筆時点では以下の4つに対しAレコードを追加するように案内されていました。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

AAAAレコードも追加しておくとよいでしょう。

私の場合はムームードメインを使っているので、ムームーDNSのカスタム設定画面から以下のように設定しました。

ムームーDNSのカスタム設定画面

なお、公式ドキュメントではApexドメインを使う場合にも www サブドメインの設定を行うことが推奨されています。

設定を済ませ反映されたら、dig などで確認してみましょう。

(一部抜粋)

# dig aruma256.dev

;; QUESTION SECTION:
;aruma256.dev.                  IN      A

;; ANSWER SECTION:
aruma256.dev.           3600    IN      A       185.199.108.153
aruma256.dev.           3600    IN      A       185.199.110.153
aruma256.dev.           3600    IN      A       185.199.111.153
aruma256.dev.           3600    IN      A       185.199.109.153

Aレコード、ヨシ!

GitHubリポジトリのPages設定に戻り、Custom domain の欄に “DNS check successful” と表示されていればOKです。

GitHub Pages の設定画面

Google Search Console などを利用している場合は、そちらの設定も忘れずに行いましょう。

お疲れ様でした。