shinpoyo

トップ › 記事 › 独自ドメインで公開する

個人開発のゲームを独自ドメインで公開する — GitHub Pages と Cloudflare

公開日：　／　書いた人：shinpoyo

このサイトのゲームは、どれも GitHub Pages で公開しています。最初は ユーザー名.github.io/リポジトリ名/ という URL でしたが、独自ドメイン shinpoyo.com を取って、すべての作品を shinpoyo.com/リポジトリ名/ にまとめました。その手順と、つまずいた点を残しておきます。

まとめて移すしくみ

GitHub Pages には、アカウントに1つだけ作れる「ユーザーサイト」があります。ユーザー名.github.io という名前のリポジトリを作ると、それがユーザーサイトになります。

このユーザーサイトに独自ドメインを設定すると、同じアカウントのほかのリポジトリのページ（プロジェクトサイト）も、自動でそのドメインの下に移ります。たとえばリポジトリ mashimashida のページは shinpoyo.com/mashimashida/ になり、古い shinpoyo.github.io/mashimashida/ からは自動で転送されます。作品ごとに設定しなくてよいのが便利なところです。

ドメインを取る

ドメインは Cloudflare Registrar で取りました。上乗せのない価格で更新できるのと、DNS の設定画面がわかりやすいのが理由です。取ったらすぐに、アカウントの2要素認証を設定しておきましょう（ドメインを乗っ取られると、サイトもまるごと奪われてしまいます）。

設定の手順

  1. ドメインの所有確認：GitHub のアカウント設定の Pages で、ドメインを追加します。表示される TXT レコードを DNS に登録して確認すると、ほかの人がそのドメインを自分の GitHub Pages に設定できなくなります。
  2. ユーザーサイトのリポジトリを作る：ユーザー名.github.io を作り、トップページの HTML を置きます。
  3. DNS を設定する：ドメインそのもの（@）に、GitHub Pages の A レコード4つと AAAA レコード4つを登録します。www は CNAME で ユーザー名.github.io に向けます。Cloudflare の場合は、プロキシをオフ（DNS only）にします。
  4. カスタムドメインを設定する：ユーザーサイトのリポジトリの Pages 設定で、Custom domain にドメインを入れます。
  5. HTTPS を強制する：証明書が発行されたら「Enforce HTTPS」をオンにします。

A・AAAA レコードの値は変わることがあるので、GitHub の公式ドキュメント（Managing a custom domain for your GitHub Pages site）で最新のものを確認してください。

つまずいた点

カスタムドメインの設定は DNS のあとに

DNS の設定より先にカスタムドメインを入れると、github.io の URL がまだつながらない独自ドメインへ転送されてしまい、すべての作品がしばらく見られなくなります。必ず DNS を設定してから、カスタムドメインを入れましょう。

共有カードの URL が http になった

GitHub Actions でビルドしている作品では、公開 URL をビルドに渡して、SNS の共有カード（OGP）の URL を作っていました。ところが、ドメインを切り替えた直後に再ビルドすると、取得した URL が http:// になっていました。HTTPS の強制が反映される前だったためです。ビルドの設定で、必ず https:// に置き換えるようにして解決しました。

相対パスで作っておくと楽

ページの中の画像やスクリプトを相対パスで読み込むようにしておけば、URL が変わってもそのまま動きます。今回、作品側のコードはほとんど直さずに済みました。

やっておきたいセキュリティ設定

ドメインを持つと、Web サイト以外にも気をつけたいことがあります。DNS の設定だけでできるものばかりです。

この手順で公開している作品は、作品一覧から遊べます。

作品一覧へ

ほかの記事