公開する｜Cloudflare Pages と GitHub をつなぎ、独自ドメイン・HTTPS・www の転送を設定する

GitHub のリポジトリとつなぐ

レッスン3で GitHub に置いたリポジトリを、Cloudflare Pages とつなぎます。Cloudflare のダッシュボードの「Workers & Pages」から、アプリケーションを作る画面に進み、Workers ではなく Pages の側の「Import an existing Git repository」（「Connect to Git」と書かれていることもあります）を選びます。

最初のビルドが終わると、プロジェクト名.pages.dev でサイトが見られます。ここから先は、push するたびに自動で作り直されます。

本番とプレビュー

設定の画面で選んだ本番のブランチ（main など）に push すると、本番が新しくなります。ほかのブランチに push すると、本番はそのままで、そのブランチ用のプレビューの URL ができます。

ネームサーバーを Cloudflare に移す

example.com を Pages につなぐには、ドメインを Cloudflare に足して、ネームサーバーを Cloudflare のものに変えます（レッスン4でくわしく）。いちばん大事なのは、移す前に、いまの DNS のレコードを控えておくことです。

ネームサーバーの名前は、1文字でもちがうと動きません。Cloudflare の画面に出たものを、そのままコピーして入れます。反映には時間がかかるので、Active になるのを待ちます。

独自ドメイン・HTTPS・www の転送

ドメインが Active になったら、Pages のプロジェクトの「Custom domains」から「Set up a domain」で example.com を足します。DNS の行は Pages が作ってくれるので、先に自分で CNAME を足さないようにします。www.example.com は Custom domains には足さず、下の手順で example.com に転送します。

Bulk Redirects では、転送のリスト（元：www.example.com、先：https://example.com、301）と、そのリストを使うルールを作ります。公式の手順どおり、Preserve query string・Subpath matching・Preserve path suffix・Include subdomains の4つをオンにします。Subpath matching が無いと、www.example.com/articles/ のような下のページが転送されません。そのうえで、DNS に www の行（種類 A・名前 www・IPv4 アドレス 192.0.2.1・Proxied）を足します。Cloudflare の公式には、Redirect Rules の「Redirect from WWW to root」というテンプレートで www から example.com へ 301 で転送する例もあり、こちらでも作れます。作ったら、上の「やってみよう」の依頼文か curl で確かめます。

準備中は検索に出さない

独自ドメインでサイトが開けるようになっても、中身がそろうまでは検索に出したくありません。そこで、準備中は noindex（検索に出さない目印）を付けておきます。目印は、ページの中の meta タグと、HTTP のヘッダ（ページといっしょに届く、目に見えない情報。X-Robots-Tag）のどちらでも効きます。

この作りは、上の「準備中は noindex にしてもらう依頼文」で Claude Code に作ってもらえます。環境変数の PUBLIC_NOINDEX は、Pages のプロジェクトの Settings の Environment variables で、本番に入れておきます。_headers は Cloudflare Pages が読むファイルで、どの住所にどのヘッダを付けるかを書きます。

自動で noindex が付くのは、プレビューの URL です。本番の プロジェクト名.pages.dev は、独自ドメインと同じ中身なので、_headers でいつも noindex を付けておきます（Cloudflare の公式のドキュメントにも、pages.dev の住所を検索に出さないための書き方の例があります）。

やってみよう

1. Cloudflare のダッシュボードの「Workers & Pages」から、Pages の「Import an existing Git repository」（「Connect to Git」と書かれていることもあります）で GitHub のリポジトリを選びます
2. ビルドの設定は、Astro のプリセット（npm run build・dist）にして「Save and Deploy」を押します
3. プロジェクト名.pages.dev で見られることを確かめます
4. Pages の Settings の Environment variables で本番に PUBLIC_NOINDEX=1 を入れてから、下の「準備中は noindex にしてもらう依頼文」で noindex の作りを入れて push します
5. ドメインを Cloudflare に足し、いまの DNS のレコードを見くらべてから、レジストラでネームサーバーを Cloudflare のものに変えます
6. ドメインが Active になったら、Pages の「Custom domains」で example.com を足します
7. Always Use HTTPS をオンにし、DNS に www の行（A・192.0.2.1・Proxied）を足して、Bulk Redirects で www から example.com への 301 転送を作ります

確認問題