このブログの書き方と仕組み
Astro + Decap CMS + Cloudflare Pages で構築したブログの運用フロー。書く → プレビュー → 公開の手順をまとめました。
ブログの構成
このサイトは WordPress から Astro + Cloudflare Pages に移行して運用しています。ブログ記事の管理には Decap CMS を使っていて、ブラウザ上で記事の作成・編集ができます。
技術的な構成はこんな感じです。
- Astro — 静的サイトジェネレーター
- Decap CMS — Git ベースのヘッドレス CMS
- Cloudflare Pages — ホスティング（GitHub 連携で自動デプロイ）
- Markdown — 記事のフォーマット
記事を書く
管理画面（/admin/）にアクセスして、GitHub アカウントでログインします。
左メニューから「Blog」を選んで「＋ Blog記事」をクリック。タイトル・公開日・本文などを入力して Publish するだけ。裏側では GitHub に Markdown ファイルが自動でコミットされ、Cloudflare Pages がビルド・デプロイしてくれます。
記事を書くのに、ターミナルやコードエディタを開く必要はありません。
下書きプレビュー
「公開前にデザインを確認したい」というときは、ローカルの開発サーバーを使います。
git pull # CMSで書いた記事を取得
npm run dev # 開発サーバーを起動
localhost:4321/blog/ を開くと、下書き状態の記事も含めて表示されます。本番サイトでは下書きは非表示なので、安心してテストできます。
この仕組みは Astro の import.meta.env.DEV という機能を使っています。開発サーバーでは true、本番ビルドでは false になるので、コードを切り替える必要はありません。
公開する
デザインや内容に問題がなければ、CMS 管理画面で記事を開いて「下書き」を OFF にして Publish。2〜3分で本番サイトに反映されます。
この仕組みを作った経緯
もともと WordPress で運用していたサイトを、Claude Code と一緒に Astro + Cloudflare Pages に移行しました。CMS の設定、OAuth 認証、下書きプレビューの仕組みまで、すべて Claude Code との対話の中で構築しています。
開発の経験がなくても、対話しながら「こういうことがしたい」と伝えれば形にできる。このブログ自体が、その実験の記録です。
