GitHub Pagesで静的サイトを公開し、独自ドメインを設定してみた話
Webアプリを開発したりリリースした経験はありましたが、独自ドメインを取得してカスタムドメインを設定するのは初めてだったので、経験として挑戦しました。
ここでは、その手順や気づきを今後忘れないように記録として残しておきます。
1. 前提条件
-
GitHub Pagesで静的サイトを公開 - サイトの中身は
Next.jsとTailwind CSSを使用 - ドメインは
お名前.comで取得
2. GitHub Pages とは
GitHub Pages は、GitHub 上のリポジトリから静的サイトを無料で公開できるサービスです。
ただし、デフォルトのURLにはアカウント名やリポジトリ名が含まれるため、見た目はあまりかっこよくありません。そのため、企業や正式なサービスでの運用にはあまり向かないことがあります。
また、リポジトリを非公開にしてサイトを公開する場合は有料になります。
今回は特に公開制限や重要な情報もないため、このサービスを利用しました。
3. ドメインの取得
今回は お名前.com でドメインを購入しました。
長いドメイン名ではありませんが、.com が一年間無料で取得できるとのことだったので、費用は実質0円でした。
レンタルサーバーの契約を勧められる場合もありますが、GitHub Pagesを使う場合は不要です。
4. DNSレコードの追加
独自ドメインをGitHub Pagesのサイトと紐付けるために、DNSレコードを設定します。
- Apexドメイン（例:
example.com）用に Aレコードを4つ追加 - サブドメイン（例:
www.example.com）用に CNAMEレコードを1つ追加
これでGitHub Pagesとドメインを紐付ける準備が整います。
5. GitHub Pages の設定
- リポジトリの Settings → Pages にアクセス
- Custom Domain に購入したドメインを入力して保存
- DNSが反映され、GitHub側でSSL証明書が発行されたら Enforce HTTPS にチェックを入れる
設定完了後、反映には数分〜数十時間かかることがあります。
6. 注意点
- 無料で公開する場合はリポジトリが Public 限定 になること
- 静的サイトのみ公開可能であること
- フロントエンドフレームワーク（Next.jsなど）を使う場合は、パス設定に注意
- （これにかなり詰まりました笑笑）
- DNSの反映には時間がかかることがある
7. まとめ
今まで特に必要性を感じていなかったため試したことがありませんでしたが、無料で独自ドメインを取得し、そのまま無料で静的サイトを公開できる手軽さに驚きました。
正直自分だけのオリジナルサイトをこんなに簡単に公開できるとは思っていませんでした。
ただし、サイト公開の目的のために進めていたので一部理解が不十分な部分があります。今後はDNSやHTTPSの仕組みなども理解しながら勉強していきたいと思います。