Cloudflare Pages × GitHubで「pushしたら公開」を作る手順

Webサイトの公開作業、まだFTPでファイルを上げていますか。

私も昔はそうでした。ローカルで直して、FTPソフトを開いて、変更したファイルを選んで上書きして、キャッシュを消して確認して……。この運用は、手間なだけでなく事故のもとでもあります。上げ忘れ、上書きミス、本番にしかない謎のファイル。心当たりのある方は多いと思います。

今の私は、GitHubにpushしたら自動でビルドされて本番に反映されるという運用にしています。使っているのは Cloudflare Pages。無料で使えます。今日はその手順を、実際に自分のサイト（このブログもそうです）で使っている構成のまま書きます。

なお、そもそもなぜWordPressをやめて静的サイトにしたのかは以前の記事に書いたので、今回はデプロイ部分に絞ります。

仕組みの全体像

ローカルで編集
   │  git push
   ▼
GitHub（コードの置き場）
   │  pushを検知
   ▼
Cloudflare Pages（自動でビルド → 世界中に配信）

やることは「GitHubにコードを置く」「Cloudflare Pagesにリポジトリをつなぐ」の2つだけです。一度つないでしまえば、以後の公開作業は git push だけになります。

手順1：GitHubにリポジトリを用意する

プロジェクトをGitHubのリポジトリにpushしておきます。すでにGitで管理しているなら、リモートに上げるだけです。リポジトリはprivateで問題ありません（Cloudflare Pagesはprivateリポジトリも読めます）。

手順2：Cloudflare PagesとGitHubをつなぐ

1. Cloudflareのダッシュボードで Workers & Pages → Create → Pages を選ぶ
2. Connect to Git でGitHubアカウントを連携し、対象リポジトリを選ぶ
3. ビルド設定を入れる。Astroの場合はこうです：

項目	値
Framework preset	Astro
Build command	npm run build
Build output directory	dist

4. Save and Deploy を押す

これで初回のビルドが走り、xxxx.pages.dev というURLでサイトが公開されます。以後、mainブランチにpushするたびに自動でビルド・反映されます。

手順3：独自ドメインをつなぐ

プロジェクトの Custom domains から独自ドメインを追加します。ドメインのDNSをCloudflareで管理していれば、レコードもほぼ自動で設定されて、SSL（https化）も勝手に済みます。ここが一番あっけないところです。

地味に便利な機能

プレビューデプロイ。main以外のブランチにpushすると、本番とは別のプレビューURLが自動で発行されます。「この修正、公開前に見てもらえますか」をURL一つで渡せるので、クライアントとの確認作業がすごく楽になります。私がGitHub連携を続けている理由の半分はこれです。

ロールバック。デプロイ履歴が全部残っていて、過去のデプロイをワンクリックで本番に戻せます。「更新したら壊れた」ときの保険として優秀です。

ハマりどころ

実際に運用していて、つまずきやすいのはこのあたりです。

• Node.jsのバージョン違いでビルドが落ちる：ローカルでは通るのにCloudflare上で落ちる場合、まずこれを疑います。環境変数 NODE_VERSION に 20 などローカルと同じ系列を指定すると解決することが多いです。
• 環境変数の入れ忘れ：APIキーなどを使っている場合、ローカルの .env はアップロードされません。ダッシュボードの Settings → Environment variables に本番用の値を登録します。フォームの秘密鍵（お問い合わせフォームの記事で書いた TURNSTILE_SECRET_KEY など）もここです。
• ビルドは走ったのに反映されていないように見える：だいたいブラウザキャッシュです。慌てる前にシークレットウィンドウで確認します。
• push即公開が怖い問題：mainにpushした瞬間に本番へ出ます。裏を返すと、mainには「公開していいもの」しか置けません。作業はブランチを切ってプレビューで確認 → 問題なければmainへ、という流れにしておくと安全です。

クライアントワークで何が変わるか

この仕組みにしてから、公開作業という概念がほぼ消えました。修正して、pushして、数分後に本番に出ている。FTP時代の「どのファイルを上げたか」の管理も、上げ忘れの事故もありません。

そして履歴が全部Gitに残るので、「いつ・誰が・何を変えたか」が後から追えます。以前の記事で「やり取りを全部文字に残す」という話を書きましたが、コードの変更履歴も同じで、記録が残る仕組みは、それ自体が信頼になると思っています。

まとめ

• Cloudflare Pages × GitHubで、公開作業は git push だけになる
• 設定はリポジトリをつないでビルドコマンドを入れるだけ。無料で、独自ドメインもSSLも簡単
• プレビューデプロイはクライアント確認に効く。ロールバックは事故の保険になる
• ハマったらまず Node バージョンと環境変数を疑う

FTP運用から乗り換えると、戻れなくなるタイプの仕組みです。静的サイトを運用しているなら、導入して損はありません。

---

納品して終わりではありません。サイト公開後も相談できる制作者をお探しの方は、まずはお話をお聞かせください。