【Git #2】git pushしたらブログが公開される仕組み — Cloudflare Pages × GitHub

💡 この記事について AIアシスタント（OpenClaw/スピカ）との会話を元にした学習記録です。 内容は変更される可能性があるため、実際の開発では公式ドキュメントを確認の上、ご自身の判断でお願いします。

この記事で分かること：

• git push の先で何が起きているか（GitHub → Cloudflare → CDN）
• Webhook、ビルド、CDN の意味
• Cloudflare Pages が無料で使える理由

はじめに — push したら終わり……じゃなかった

前回の記事（Git #1）で、git commit & push を覚えました。

ターミナルで git push を打つと、こんな表示が出て――

To https://github.com/perorian/7sapiens-blog.git
   13ff4a5..ef45d7b  main -> main

「はい、完了！」と思ってたんですが、ある日ふと気づいたんです。

セブ

スピカ、git push してブログが更新されるのはわかった。でも……いつの間に公開されてるの？ 自分では何もしてないのに。

スピカ AI

いい疑問ですね！git push の先で、実は Cloudflare Pages というサービスが自動で動いているんです。その仕組みを見ていきましょう。

登場人物と役割 — 誰が何をしている？

スピカ AI

まず全体像を掴みましょう。ブログが公開されるまでに、3つのプレイヤーが連携しています。

flowchart TD
  A["🤖 Antigravity
コード生成 → commit & push"] -->|push| B["🐙 GitHub
コードを保管 → Webhookで通知"]
  B -->|自動通知| C["⚡ Cloudflare Pages
clone → build → CDN配信"]
  C -->|"30秒で公開 🚀"| D["🌍 読者"]

セブ

なるほど、3つがリレーみたいにバトンを渡してるんだな。自分がやるのは Antigravity と一緒に push するところだけ？

スピカ AI

その通りです！ では、それぞれの仕事をもう少し詳しく見ていきましょう。

デプロイログを読んでみよう

セブ

Cloudflareのダッシュボードにログが出てたんだけど、英語だらけで怖い……。

スピカ AI

大丈夫です！一行ずつ読めば、やっていることはシンプルですよ。

実際のビルドログがこちら。

11:48:06  Cloning repository...
11:48:14  HEAD is now at df55651 fix: パイプライン図のラベル非表示で文字被り解消
11:48:14  Using v2 root directory strategy
11:48:14  Success: Finished cloning repository files
11:48:17  Detected the following tools from environment: npm@10.9.2, nodejs@22.16.0
11:48:17  Installing project dependencies: npm clean-install
11:48:24  added 462 packages in 7s
11:48:24  Executing user command: npm run build
11:48:36  [build] 28 page(s) built in 12.06s
11:48:36  [build] Complete!

ログの読み方

スピカ AI

やってることは「コードをもらう → 組み立てる → 完成」の3ステップだけ。全部で 30秒 くらいで終わってます。

セブ

30秒！？ しかも全自動……。すごいな。

Cloudflare Pages って何？

セブ

そもそも Cloudflare Pages ってどういうサービスなの？

スピカ AI

ひと言で言うと、「ブログの置き場所を無料で貸してくれるサービス」 です。3つの機能があります。

セブ

CDN ってよく聞くけど、何なの？

スピカ AI

Content Delivery Network（コンテンツ配信ネットワーク）の略です。東京のサーバーだけにファイルを置くと、アメリカからアクセスすると遅い。CDNは世界中にサーバーを持っていて、読者に一番近いサーバーからファイルを返す仕組みです。

💡 CDN がわかると、最近のニュースも読める

セブ

CDN ってそんなに大事なものなの？

スピカ AI

実は最近、CDN がらみの事件が2つ話題になりました。仕組みを知っていると「何が起きたか」がわかります。

スピカ AI

CDNは便利な反面、設定を間違えると大きな影響が出るインフラです。でも個人ブログの場合、Cloudflareがデフォルト設定で安全に管理してくれるので心配不要ですよ。

セブ

仕組みを知ってるとニュースの意味がわかるのは嬉しいな。

なぜ無料なの？

セブ

一番気になるのがここ。こんなに便利なのに、なぜ無料？

スピカ AI

Cloudflareの 本業は企業向けのセキュリティサービス（DDoS対策、WAFなど）なんです。個人サイトのホスティングが無料なのには理由があります。

スピカ AI

つまり、個人ブログ程度のトラフィックはCloudflareにとって誤差ということです。Googleが検索とGmailを無料で提供しているのと似た構造ですね。

無料プランでも以下が含まれます。

• ✅ 無制限のサイト数
• ✅ 無制限のリクエスト数・帯域幅
• ✅ DDoS攻撃対策
• ✅ 無料SSL証明書（https://）
• ✅ 世界中のCDN

セブ

個人ブログには十分すぎる……。ありがたい時代だ。

GitHub → Cloudflare の連携の仕組み

セブ

git push してから公開されるまで、裏では何が起きてるの？

スピカ AI

全体フローを図にしました。キーワードは Webhook です。

全体フロー

sequenceDiagram
  participant ME as 自分
  participant GH as GitHub
  participant CF as Cloudflare
  participant CDN as CDN
  participant USER as 読者

  ME->>GH: git push
  GH->>CF: Webhook通知
  CF->>GH: コードをclone
  CF->>CF: build（HTML生成）
  CF->>CDN: 世界中に配信
  USER->>CDN: ブログにアクセス
  CDN->>USER: 最寄りサーバーから配信

Webhook って何？

セブ

Webhook ってよく聞くけど、何なの？

スピカ AI

GitHubに 「何かあったら教えてね」 と登録しておく仕組みです。

仕組みはシンプル。

1. git push すると、GitHubがCloudflareに 「新しいコードが来ました」 と自動通知
2. Cloudflareが 「了解、ビルドします」 と自動で動く

スピカ AI

自分がやるのは git push だけ。あとは全部自動です。LINEの「既読通知」に近いかもしれません。「メッセージが来たら自動で相手に知らせる」。Webhookは「pushされたら自動でCloudflareに知らせる」。

セブ

なるほど……！ 「pushしたら自動で通知 → 自動でビルド → 自動で公開」。全部つながってるんだな。

初回の設定方法

スピカ AI

最初にCloudflareのダッシュボードでGitHubと接続するだけ。一度やれば、それ以降はずっと自動です。

1. Cloudflare Pages で「プロジェクトを作成」
2. 「Gitに接続」→ GitHubアカウントと連携
3. リポジトリを選択（7sapiens-blog）
4. ビルド設定を入力

スピカ AI

Cloudflareが Astro を自動検出して、プリセットで入力してくれるので、ほぼ確認するだけです。

実際の設定（コード側）

セブ

ブログ側で設定しているファイルってどれ？

スピカ AI

実はたった 2ファイル です。

astro.config.mjs

// @ts-check
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';

export default defineConfig({
    site: 'https://blog.7sapiens.com',  // ← ブログのURL
    integrations: [mdx(), sitemap()],    // ← 使うプラグイン
});

スピカ AI

設定していることは2つだけです。

• site — ブログのURLを指定。SEOやサイトマップ生成に使います
• integrations — MDX（記事のフォーマット）とサイトマップを有効化

package.json

{
    "name": "7sapiens-blog",
    "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
    },
    "dependencies": {
        "@astrojs/mdx": "^4.3.13",
        "@astrojs/sitemap": "^3.7.0",
        "astro": "^5.17.1",
        "mermaid": "^11.12.2",
        "sharp": "^0.34.3"
    }
}

スピカ AI

Cloudflareがビルド時に実行する npm run build は、scripts.build で定義されている astro build です。これがMarkdownの記事をHTMLに変換します。

セブ

wrangler.toml とか Cloudflare 専用のファイルは要らないの？

スピカ AI

静的サイトの場合は不要です。ダッシュボードの設定だけでOK。Astro側は「普通に作るだけ」で、Cloudflareが勝手に拾ってくれます。

全ファイルがアップされてるの？

セブ

ちょっと待って。GitHub には設定ファイルとかコンポーネントとか色々なファイルがあるよね。それ全部がそのまま公開されてるわけじゃないよね……？

スピカ AI

いい質問です！ 答えは 「全部 clone するけど、公開されるのは一部だけ」 です。その前に……そもそも「ビルド」が何かわかりますか？

セブ

ビルドって何？ おいしいの？ ……冗談じゃなく、本当にわからん。ログにも npm run build って出てたけど。

スピカ AI

おいしくはないですが、ブログを届けるには欠かせない工程です 😄 ビルドとは、人間が書いたコード（材料）を、ブラウザが読める形（完成品）に変換することです。

セブ

あー、なるほど。.mdx はあくまでレシピで、読者に届くのは「調理済みのHTML」ってことか。

スピカ AI

そうです！ ではその「調理」の全体像を図で見てみましょう。

flowchart LR
  REPO["📦 GitHubリポジトリ
全ファイル（材料）"]
  BUILD["🔨 astro build
HTML・CSS・画像に変換"]
  DIST["📁 dist/
完成品だけ"]
  CDN["⚡ CDN配信
読者に届く"]

  REPO -->|"npm run build"| BUILD
  BUILD -->|"必要なものだけ出力"| DIST
  DIST -->|"これだけ公開 🚀"| CDN

スピカ AI

流れはこうです。

1. Cloudflare が GitHub から全ファイルを clone（コピー）する
2. npm run build（= astro build）を実行する
3. Astro が src/ フォルダの中身を読んで、ブラウザが読める形（HTML・CSS・画像）だけを dist/ フォルダに出力する
4. Cloudflare は dist/ の中身だけを CDN に配信する

セブ

つまり package.json とか .gitignore は clone されるけど、公開はされないってこと？

スピカ AI

その通り！ ビルドの 「材料」と「完成品」 は別物です。読者のブラウザに届くのは完成品（dist/）だけ。ソースコードや設定ファイルは届きません。

セブ

なるほど！ 料理に例えると、レシピと食材（src/）は厨房にあるけど、お客さんに届くのは完成した料理（dist/）だけってことか。……ところで src とか dist って何の略？

スピカ AI

いい質問です！ どちらもプログラミングの世界では定番の名前です。

セブ

source = 原料、distribution = 配布物か。名前の意味がわかるとフォルダ構成が怖くなくなるな。

スピカ AI

そうですね！ そして Cloudflare のダッシュボードで設定した「出力ディレクトリ: dist」が、まさに 「完成品はここにあります」 と教えている部分なんです。

全体フロー図

スピカ AI

ここまでの流れを、もう一度整理しますね。

flowchart LR
  A["git push"] --> B["GitHub"]
  B -->|Webhook| C["Cloudflare"]
  C --> D["clone & build"]
  D --> E["CDN配信"]
  E --> F["🌍 読者"]

セブ

自分がやるのは最初の git push だけ。あとは全部自動で動いてるんだな。

スピカ AI

その通り！ 仕組みを知ると「push って何が起きてるかわからなくて怖い」が、「push すれば30秒後に公開される、設計通りの自動化」に変わりますよね。

まとめ

スピカ AI

次回は ブランチとプルリクエスト を学ぶ予定です。「下書きを別の場所で試してから、本番に反映する」という仕組み。楽しみにしていてください！