GitHub Pagesを使ってブログや成果物を公開していると、途中で「自分が所有するドメインで、リポジトリごとにページを並べたい」という欲望が湧いてきました。
「.github.io」は便利だけど、いかにもGitHubだという感じが強いので、せっかくドメインを持っているなら活かしたくなってきたということです。
この記事では、ghpg.kihamda.net/リポジトリ名 という構成でGitHub Pagesを公開しようとして沼にハマった話と、そこから正解構成に辿り着くまでを整理します。
GitHub Pages の種類を理解する
GitHub Pagesのドメインに係る設定は分かりにくく、”hoge.github.io”のリポジトリにしたPagesの設定と普通のリポジトリにしたPagesの設定では、扱われ方が微妙に異なります。
- ”hoge.github.io”のリポジトリにしたPagesの設定は、そのUser/OrganizationのPagesの設定として扱われます。
- 普通のリポジトリに対して行った設定は、あくまでそのリポジトリのPages限定の設定となります。
- 設定されなければ、普通のリポジトリはUser/OrganizationのPagesの設定に従います。
- ”hoge.github.io”リポジトリがない場合、”hoge.github.io/fuga”となる設定に従います。
GitHub特有の「特定の名前のリポジトリは特別扱い」です。”hoge.github.io”のリポジトリは所有するUser/Organization全体のPages設定に影響します
手順1：特別なリポジトリを用意する
まず、次の名前のリポジトリが存在するか確認します。
[username].github.io
これは任意ではなく、ユーザー名.github.io という名前でなければなりません。存在しない場合は新しく作成してください。このリポジトリが ghpg.kihamda.net のルートになります。
このリポジトリの中のファイルは普通に公開されます。AIに作らせた簡単なSPAアプリなどをここに放り込んどくといい感じになります。
中身は最低限でよく、index.html が一つあれば良いです。最悪なくても良いです。
手順2：特別なリポジトリにカスタムドメインを設定する
[username].github.ioリポジトリの Settings を開き、Pages を選択して、Custom Domainの設定を操作します。
Custom domainの欄に、「hoge.example.com」のようにドメイン名を入力しましょう。当然ですがhttps://や末尾の/は不要です。
Sourceはmain ブランチの/(root) など、お好みに合わせて適切なものを選んでおきましょう。
ドメインを管理するDNSプロパイダで、次の CNAME レコードを追加します。
名前: お好きなサブドメイン
種類: CNAME
値: [username].github.io
これでhoge.example.comへのアクセスはGitHub Pagesに届くようになります。apex ドメイン（kihamda.net 本体）には触る必要はないです。
手順3：各リポジトリを公開する
次に、個別に公開したいリポジトリ（例:kihamda/hoge）を開きます。設定からPages を有効化し、Sourceの設定等を済ませます。ここではCustom domainを設定しないことが重要です。
この状態（= Custom domainの設定が存在しない）時、GitHub Pagesは特別なリポジトリの設定を継承して、”hoge.example.com”配下に自動的にページを配置するようになります。
つまり、次の URL で公開されます。
hoge.example.com/hoge/
目的達成ですね。
まとめ
ghpg.kihamda.net/リポジトリ名 という構成は、GitHub Pagesの設定が分かりにくい点を除けばかなり自由度の高い静的ホスティングです。これにCloudflareでalways cacheの設定を組み合わしてあげれば、ケチケチしたWebサイトを構築するのに非常に便利なのではないでしょうか。
この記事において重要なことは、ドメインはUser Pagesにだけ設定、Project Pagesには設定しないということだけです。この一点を守るだけで、挙動が一気に素直になります。
コメント