Astroコンテンツサイト開発ロードマップ：ゼロからの構築からDecap CMS運用まで完全網羅

本ロードマップは、高速なWebフレームワーク「Astro」とヘッドレスCMS「Decap CMS」を組み合わせ、Cloudflare Pages 上で完全な静的コンテンツ配信基盤を構築するための技術手順書です。

プロジェクトの初期化から、Cloudflare Functions による GitHub OAuth 認証の解決、そして動的ルーティングによる記事描画まで、迷わず実装を進められるよう体系的にまとめました。

概要：3段階の開発フロー

サーバーレス環境における最大の難所である OAuth 認証プロキシの設置をクリアし、Astro で安定して記事を生成・配信するために、開発工程を以下の3フェーズに分割します：

1. 基盤初期化：プロジェクト構成、コンテンツコレクションのスキーマ定義、CMS静的ファイルの配置。
2. CMS連携と GitHub OAuth 認証：Cloudflare Pages Functions によるプロキシ構築と環境変数の設定。
3. コンテンツレンダリングと本番公開：Astro 側の動的ルーティング実装と公開パイプラインの確立。

フェーズ 1：プロジェクト構成とスキーマ定義

Astro と Decap CMS が動作するための土台を整備します。

1.1 ディレクトリ構成のセットアップ

• Astro プロジェクト作成：Codespaces またはローカル環境で npm create astro@latest を実行。
• CMS 管理画面ディレクトリ：/public/admin/ を作成し、CMSのUIアセットを配置。
• Functions ディレクトリ：/functions/ を作成し、エッジ認証ハンドラーの置き場所を用意。

1.2 コンテンツコレクションのスキーマ定義

• 目的：記事データの型安全性を担保。
• 作業：/src/content/config.ts で defineCollection を用い、タイトル、日付、カテゴリ、公開状態などのスキーマを定義。Decap CMS 側の config.yml とフィールド定義を完全に一致させます。

フェーズ 2：Decap CMS 連携と OAuth 認証（最大の要所）

Netlify 依存を排除し、Cloudflare Pages 単体で GitHub 連携ログインを成立させます。

2.1 CMS 設定ファイルの配置

• /public/admin/ 内に index.html と config.yml を配置。
• index.html から Netlify 独自の netlify-identity-widget.js の記述を完全に削除します。

2.2 GitHub OAuth Apps の登録

• GitHub の Developer Settings → OAuth Apps から新規アプリを登録。
• Authorization callback URL に、Cloudflare Pages の Functions エンドポイントを正確に指定：

  https://<プロジェクト名>.pages.dev/.netlify/functions/auth

2.3 Cloudflare Pages の環境変数設定

• Cloudflare ダッシュボードのプロジェクト設定で、GitHub から発行された GITHUB_CLIENT_ID と GITHUB_CLIENT_SECRET を暗号化保存します。

2.4 Functions 認証ハンドラーの実装

• /functions/ 配下に OAuth のリダイレクトおよびトークン交換処理を記述したスクリプトを配置します。

2.5 config.yml のバックエンド指定

CMS管理画面が Functions 経由で認証を行えるよう設定を紐付けます：

backend:
  name: github
  repo: Mountos/web
  branch: main
  base_url: https://mountos.pages.dev
  auth_endpoint: /.netlify/functions/auth

2.6 コミット＆プッシュ

git add .、git commit、git push を実行し、エッジ認証関数をデプロイ・有効化します。

フェーズ 3：記事の描画とサイト公開

CMSから入稿された Markdown を Astro が読み取り、Webページとしてレンダリングします。

3.1 管理画面での初回テスト投稿

• https://<プロジェクト名>.pages.dev/admin/ にアクセスして GitHub アカウントでログイン。
• 記事をテスト作成して公開保存し、GitHub の src/content/blog/ ディレクトリにコミットが届くことを確認。

3.2 記事一覧ページの作成

• パス：/src/pages/blog/index.astro
• 処理：astro:content の getCollection('blog') を呼び出し、公開中の記事一覧を表示。

3.3 単一記事ページ（動的ルーティング）の作成

• パス：/src/pages/blog/[...slug].astro
• 処理：getStaticPaths で記事ごとの slug を取得し、entry.render() により Markdown 本文を HTML へ変換。

3.4 動作検証

サイトを再ビルドし、記事一覧および各詳細ページが正常に表示されることを確認。「CMS入稿 → GitHub保存 → Cloudflareビルド → Astro配信」という自動化フローの完成です。