Astro + GitHub + Cloudflare Pages 自動化

ファイル: Astro-GitHub-CloudflarePages自動化.md / 更新日: 2026/6/8

このファイルは、Astro、GitHub、Cloudflare Pages を組み合わせてサイト公開を自動化する流れを理解するためのメモです。

昔のホームページ公開との対応

以前のシンプルなホームページ公開は、次のような流れだった。

index.html を作る
↓
サーバーにアップロードする
↓
ブラウザが index.html を読んで表示する

Cloudflare Pages を使う場合も、最終的にブラウザが HTML / CSS / JavaScript を読んで表示する点は同じ。

違いは、index.html を直接手でアップロードするのではなく、Astro と GitHub と Cloudflare Pages が公開用ファイルを作って配置する流れを自動化してくれること。

このプロジェクトでの流れ

このプロジェクトでは、次の流れを想定している。

Astro のファイルを書く
↓
GitHub に push する
↓
Cloudflare Pages が GitHub の変更を検知する
↓
Cloudflare Pages が npm run build を実行する
↓
Astro が dist/ に HTML / CSS / JavaScript を生成する
↓
Cloudflare Pages が dist/ の中身をサイトとして公開する

それぞれの役割

Astro

サイトを作るための仕組み。

このプロジェクトでは、次のようなファイルを元にページを作る。

src/pages/index.astro
src/pages/notes/index.astro
src/content/notes/*.md
src/styles/global.css

Astro はこれらをビルドして、公開用の HTML / CSS / JavaScript に変換する。

GitHub

ソースコードを保存する場所。

このプロジェクトでは、GitHub Desktop の Push origin で GitHub に変更を送る。

GitHub に送られた変更を、Cloudflare Pages が読み取る。

Cloudflare Pages

GitHub にあるソースコードを元に、サイトをビルドして公開する場所。

Cloudflare Pages 側では、おおむね次のような設定を行う想定。

Build command: npm run build
Build output directory: dist

つまり、Cloudflare Pages はこのプロジェクトで npm run build を実行し、生成された dist/ を公開する。

ローカルでの確認との関係

ローカルでは、次のコマンドで開発中のサイトを確認できる。

npm run dev

ビルドできるか確認する場合は、次を実行する。

npm run build

この npm run build で生成される dist/ が、Cloudflare Pages で公開されるファイル群に相当する。

手動アップロードとの違い

手動アップロード

HTML を作る
↓
FTP などでサーバーへアップロードする
↓
公開される

Cloudflare Pages

Astro の元ファイルを変更する
↓
GitHub に push する
↓
Cloudflare Pages が自動でビルドする
↓
公開される

Cloudflare Pages を使うと、FTP で毎回アップロードする作業を減らせる。

メリット

GitHub に push すると公開までつなげられる
dist/ を手動でアップロードしなくてよい
変更履歴が GitHub に残る
Astro の Markdown 管理と相性がよい
静的サイトなので表示が速い
サーバー側の管理が少ない

注意点

Cloudflare Pages の設定が必要。
独自ドメインを使う場合は DNS 設定が必要。
既存メールを使っているドメインの場合、MX レコードなどメール関連設定を壊さないよう注意する。
GitHub に push した内容が公開対象になるため、公開してはいけない情報を入れない。
.env などの秘密情報は Git 管理しない。

このプロジェクトでの理解

昔の index.html をサーバーに置く方式と比べると、Cloudflare Pages は次の部分を自動化してくれる。

Astro の元ファイル
↓
公開用 HTML / CSS / JavaScript への変換
↓
公開場所への配置

そのため、このプロジェクトでは以下のように理解しておく。

Astro = サイトを作る道具
GitHub = ソースコードを置く場所
Cloudflare Pages = ビルドして公開する場所
GitHub Desktop = GitHub に変更を送る道具