本文へスキップ
Fumiet

ブログ一覧へ

Astro 7 サイトを GitHub Actions と Cloudflare Pages で公開する

English で読む

Fumiet スタジオサイトを例に、静的 Astro 7 を pnpm でビルドし、GitHub Actions 経由で Cloudflare Pages にデプロイする手順をまとめます。

個人スタジオサイト Fumiet は、Astro 7（静的出力） を GitHub に置き、Cloudflare Pages へ自動デプロイしています。この記事では、いま実際に動いている構成をそのまま書きます。

採用した構成

項目 選択
フレームワーク Astro 7 / output: 'static'
パッケージマネージャ pnpm
Node 22
ホスティング Cloudflare Pages
CI GitHub Actions + wrangler pages deploy
公開 URL https://fumiet.com（DNS 切替後）

ネイティブの「Cloudflare が GitHub を直接インストールする」連携は、こちらではエラー 8000011 で失敗したため使っていません。Actions から Wrangler で dist/ を上げる方が安定しました。

Pages が付与する *.pages.dev ホストはステージング用です。検索や外部共有の正面口にはせず、本番はカスタムドメイン（ここでは fumiet.com）にします。

リポジトリ側で用意するもの

最低限これだけあれば足ります。

  1. Astro プロジェクト（pnpm build で dist/ が出る）
  2. astro.config.mjs の site（正規 URL・sitemap・RSS 用。公開ドメインを書く）
  3. GitHub リポジトリ（private でも可）
  4. Cloudflare アカウントと Pages プロジェクト

Fumiet では JA/EN の locale 付きルーティングと Content Collections（アプリ YAML・ブログ Markdown）を同じ静的ビルドに載せています。ブログもサーバーは不要です。

Cloudflare Pages プロジェクト

ダッシュボードで Pages プロジェクトを作成します。

ビルドは Cloudflare 側に任せず、GitHub Actions が成果物を渡す前提にします。必要なシークレットは次のふたつです（GitHub → Settings → Secrets and variables → Actions）。

  • CLOUDFLARE_API_TOKEN — Pages デプロイ権限のある API トークン
  • CLOUDFLARE_ACCOUNT_ID — アカウント ID

トークンの実体をリポジトリに書かないでください。

GitHub Actions ワークフロー

main への push（と PR）で、だいたい次の流れです。

  1. checkout
  2. pnpm / Node 22 のセットアップ
  3. pnpm install --frozen-lockfile
  4. pnpm build
  5. npx wrangler@4 pages deploy dist --project-name=<your-project> …

ポイントは次のとおりです。

  • ビルドは CI 上で行い、アップロードするのは dist/ だけ
  • Wrangler は npx wrangler@4 でピン留め（ローカルのグローバル版に依存しない）
  • --branch にブランチ名を渡し、プレビューと本番ブランチを Pages 側で扱えるようにする

ローカルで同じ成果物を確認するときは次だけで十分です。

pnpm install
pnpm build
pnpm preview

デプロイ後に確認すること

  • ステージング（Pages プレビュー）で /ja と /en が意図どおり出ること
  • アプリページやブログなど、静的ルートが 404 にならないこと
  • 公開用リンクや site・OG・canonical が 本番ドメイン を向いていること（プレビューホストを本文や SNS に載せない）

apex ドメインは、DNS を Pages に向けるまで旧ホストのまま、という運用もよくあります。内容を固めてから切替えると安心です。メール（MX）や別サブドメイン用のワイルドカード A レコードは触らないようにします。

ブログ記事の載せ方（このサイトの場合）

記事は src/content/blog/ja/ と src/content/blog/en/ に Markdown を置きます。draft: false のものが一覧・RSS・ヘッダーの「ブログ」に出ます。translationKey で日英を相互リンクできます。

main に push すれば、上記 Actions がビルドして Pages を更新します。CMS はまだ入れていません。

まとめ

  • Astro 7 の静的サイトは Cloudflare Pages と相性が良い
  • Git 連携がうまくいかないときは GitHub Actions + Wrangler が現実的
  • シークレットは GitHub に置き、ビルド成果物だけをデプロイする
  • 正面の公開 URL はカスタムドメインにそろえ、*.pages.dev はステージング扱い

同じ型で、小さなスタジオサイトやプロダクトカタログを安全に公開できます。質問は お問い合わせ からどうぞ。