Core Media Lab記事一覧
開発・インフラ

GitHub × Cloudflare Pagesで実現する「完全無料・自動デプロイ環境」の作り方

GitHub × Cloudflare Pagesで実現する「完全無料・自動デプロイ環境」の作り方

個人でWebメディアや技術ブログを運営する際、「記事やデザインを少し直すたびに、ローカルPCでビルドしてサーバーへ手動アップロードする」という作業は、想像以上に時間を奪うボトルネックになります。

この手作業をゼロにし、更新スピードを劇的に引き上げるのが、ソースコード管理の「GitHub」と、世界最速級のエッジネットワークを持つ「Cloudflare Pages」を組み合わせた完全無料の自動デプロイ（CI/CD）環境です。

本記事では、他の有名なホスティングサービス（Vercel・Netlify）と比較してなぜCloudflare Pagesが個人メディアの収益化・運用に最強なのかという理由から、具体的な連携ステップ、さらには「PCに開発環境すら開かずブラウザだけで1分でサイトを修正・本番反映させる実践テクニック」まで詳しく解説します。

1. なぜ個人メディアに「Cloudflare Pages」一択なのか？（主要3社比較）

モダンな静的サイト（AstroやNext.jsなど）を公開するホスティングサービスとして、よく比較されるのが「Cloudflare Pages」「Vercel」「Netlify」の3社です。それぞれの無料枠（Freeプラン）の仕様を比較すると、個人メディア運営における決定的な違いが見えてきます。

比較項目 Cloudflare Pages Vercel (Hobby) Netlify (Starter)
月間の通信帯域幅（転送量） 無制限（完全無料） 100GB / 月まで 100GB / 月まで
商用利用（アフィリエイト等） 無料枠でも可能 原則不可（Proプラン必須） 可能
月間ビルド回数上限 500回 / 月 6,000分 / 月 300分 / 月
エッジ拠点の広さ・速度 世界300都市以上（最速級） 高速 高速

決定的な理由は「商用利用OK」と「帯域幅（通信量）無制限」

個人ブログやアフィリエイトメディアを運営する上で最も注意すべきなのが「利用規約（商用制限）」と「アクセス集中時の従量課金」です。

  • Vercelの注意点：無料プラン（Hobby）は「非商用・個人利用のみ」と規約で定められており、アフィリエイトリンクや広告を貼って収益化するサイトでは原則として月額20ドルのProプランへの移行が必要になります。
  • 帯域幅100GBの壁：他社サービスでは月100GBの通信制限があるため、SNSで記事がバズったり画像が多いページに大量アクセスが集まったりすると、サイトが一時停止するか高額な追加課金が発生するリスクがあります。

その点、Cloudflare Pagesは無料プランであっても商用利用が認められており、なおかつ通信帯域幅が「無制限」です。どれだけアクセスが集まってもサーバー代は0円のまま、世界最高峰のスピードでサイトを配信し続けることができます。

2. GitHub × Cloudflare Pages 自動デプロイの仕組みと構築手順

構築する自動デプロイ（CI/CD：継続的インテグレーション／継続的デリバリー）の流れは非常にシンプルです。一度設定してしまえば、以後は意識する必要すらありません。

ステップ1：GitHubリポジトリとCloudflareを接続する

  1. Cloudflareダッシュボードにログインし、左メニューの「コンピュート (Workers) > Workers & Pages」を開きます。
  2. 「作成」ボタンを押し、「Pages」タブ > 「Git に接続」を選択します。
  3. GitHubアカウントを認証し、サイトのコードが入ったリポジトリ（Privateリポジトリでも可）を選択します。

ステップ2：フレームワークのビルド設定を指定する

連携するリポジトリを選んだら、ビルド設定を入力します。Astroなどの主要フレームワークは「フレームワークのプリセット」から選ぶだけで、以下の項目が自動でセットされます。

  • プロダクションブランチ：main
  • ビルドコマンド：npm run build
  • ビルド出力ディレクトリ：dist

ステップ3：シークレット情報（環境変数）の分離管理

microCMSなどのヘッドレスCMSと連携する場合、APIキーをソースコード内に直接書き込む（ハードコーディングする）のはセキュリティ上厳禁です。

Cloudflare Pagesの「設定 > 環境変数（Environment variables）」に、ローカルの .env ファイルと同じ変数名（MICROCMS_API_KEY など）を登録します。この際、「暗号化（Encrypt）」ボタンを押しておくことで、管理画面上でもキーがマスクされ、安全にビルド時のみ参照されるようになります。

3. 【実践テクニック】現場で使える3つの自動化・効率化ハック

当メディア（Core Media Lab）を実際に構築・運用する中で導入し、圧倒的に作業効率が上がった3つの実践ノウハウを紹介します。

① Webエディタ（github.dev）を使った「環境構築ゼロ」の秒速修正術

「サイトのヘッダー名を少し変えたい」「タイポ（誤字）を1箇所直したい」という時、わざわざPCのターミナルやVS Codeを立ち上げるのは面倒です。

そんな時は、ブラウザでGitHubのリポジトリ画面を開き、キーボードの .（ドット）キー を押してみてください（またはURLの github.com を github.dev に書き換えます）。

すると、ブラウザ上に本格的なVS Code（Web版エディタ）が一瞬で立ち上がります。ここでテキストを一括置換（Ctrl + Shift + F）し、左メニューから「Commit & Push」を押すだけで、手元のPC環境を一切使わずにCloudflare Pagesの自動デプロイを発動させることができます。外出先や別PCからでも1分でサイト修正が完了する最強の運用ハックです。

② 失敗を本番に出さない「プレビューデプロイ（Preview Deployments）」

デザインの大幅な変更を行う際、いきなり本番サイト（main ブランチ）を書き換えるのは危険です。

Cloudflare Pagesでは、main 以外の作業用ブランチ（例：feature/new-design）を作ってGitHubにプッシュすると、本番環境とは完全に切り離された「専用のテストURL（プレビュー環境）」を自動で生成してくれます。スマホやPCで表示崩れがないか実際のURLで確認し、問題なければGitHub上でマージ（統合）するだけで本番に反映されます。

③ Deploy Hooks（Webhook）によるCMSからの遠隔ビルド

コードの変更時はGitHubがトリガーになりますが、記事の入稿時は「microCMS」側がトリガーになります。

[コード修正] ➔ GitHubへPush ────────┐
                                     ├─➔ Cloudflare Pagesが自動ビルド＆世界配信
[記事の公開] ➔ microCMSのWebhook ───┘

Cloudflare Pagesの「Settings > Builds & deployments > Deploy hooks」で専用のURLを発行し、それをmicroCMSのWebhook設定に登録しておくことで、「コードも記事も、保存ボタンを押した瞬間に全自動で本番サイトが最新化される」という、一切の手間がないメディア基盤が完成します。

4. 運用時に知っておくべき注意点と対策

非常に便利な自動デプロイ環境ですが、1点だけ無料枠ならではの仕様を理解しておく必要があります。

【注意点：月間500回のビルド上限】
Cloudflare Pagesの無料プランでは、1ヶ月に実行できるビルド回数が「500回まで」となっています。1日あたり約16回ビルドできる計算になるため通常の運営ではまず超えませんが、記事の微修正で1分おきに「公開・更新」を連打したり、1文字直すたびにGitへPushしたりすると、ビルド回数を無駄に消費してしまいます。

【対策】

  • 記事の途中保存は、Webhookが飛ばない「下書き保存」を活用する。
  • 大きなコード改修時は、ローカル環境（npm run dev）でまとめて見た目を確認してから1回のPushにまとめる。

5. まとめ：インフラの自動化こそが個人メディア最大の武器になる

個人でメディアを運営していると、サーバーの保守やアップロード作業といった「直接収益を生まない雑務」に時間を取られがちです。

しかし、GitHub × Cloudflare Pages による自動デプロイ環境を最初に組んでしまえば、維持費0円で大企業並みの高速インフラと自動更新パイプラインが手に入ります。浮いた時間とコストをすべて「読者の悩みを解決する質の高い記事作成」や「データ分析」に投資し、最短距離でメディアを成長させていきましょう。

← トップページへ戻る