ASBAstroCloudflarePages
⚠️ 現在製作中のため、内容は不正確なことがあります。
AST（Claude Code と Astro でブログを作って Cloudflare Pages で公開する）で作ったブログを、自分のブログとして使えるところまで育てる。サイト情報・記事の書き方・SEO・編集ワークフローを順に扱う。
AST で mk-astro-blog リポジトリを作って Cloudflare Pages に公開済みの状態から始める。本記事ではそのテンプレートを「自分のブログ」に育てるためのトピックを扱う。
扱うこと：
ハンズオンは AST と同じく Claudeデスクトップアプリ（→ CDG）の Claude Code で進める前提。Cloudflare Pages のデプロイは push したら自動で走るので、コードを書いて push、を繰り返すだけ。
Astro のブログテンプレートが生成する主なフォルダ・ファイル：
mk-astro-blog/
├── astro.config.mjs ← サイト設定（sitemap、サイトURL など）
├── public/ ← 配信時にそのままコピーされる静的アセット
│ └── favicon.svg
├── src/
│ ├── consts.ts ← SITE_TITLE / SITE_DESCRIPTION の定数
│ ├── pages/ ← ルーティング（index.astro, about.astro, blog/...）
│ ├── layouts/ ← ページレイアウト（BlogPost.astro など）
│ ├── components/ ← Header, Footer, BaseHead など
│ ├── content/
│ │ ├── config.ts ← Content Collection のスキーマ定義
│ │ └── blog/ ← .md / .mdx 記事
│ └── styles/ ← CSS（global.css）
ポイント：
.md の中身がそのまま個別ページになるpages/index.astro がトップ、pages/blog/[...slug].astro が個別記事site（公開URL）などAST 4 章で雑に書き換えたサイト情報を、より整った形に直していく。
src/consts.ts に定数として置かれている。
src/consts.ts の SITE_TITLE と SITE_DESCRIPTION を確認して、
以下に揃えて。
- SITE_TITLE: 「日々のメモ」
- SITE_DESCRIPTION: 「日々の生活について気が向いたら書きます」
他のファイル（Header.astro, Footer.astro, 各 pages/）にハードコード
された "Astro Blog" や "Astro" が残っていないか確認して、見つけたら
書き換えて。
src/pages/about.astro がデフォルトでサンプル文章になっている。自己紹介に書き換える。
src/pages/about.astro の本文を、以下の内容で書き換えて。
- 著者: 匿名ペンギン
- 自己紹介: 日々の生活と読んだ本について書いています
- 連絡先: GitHub (@yourname)、X (@yourname)
既存のレイアウト構造（<Layout>、<main>、見出しなど）はそのまま残して、
中の文章だけ書き換えてくれればよい。
src/components/Footer.astro に著作権表記や SNS リンクのテンプレが入っている。
src/components/Footer.astro を以下に書き換えて。
- コピーライト: © 匿名ペンギン
- SNS リンク: 自分の GitHub と X のアカウントに変更
- デフォルトで入っている不要な SNS（Mastodon, Twitter のサンプル等）は削除
src/components/Header.astro がデフォルトで Home / Blog / About になっている。必要に応じて項目を増減する。
src/components/Header.astro のナビゲーション項目を確認して、
不要なリンクは削除、必要なリンク（例: Tags ページ）があれば
追加して。
サンプル記事のフロントマター（先頭の --- で囲まれた部分）の例：
---
title: 'My First Blog Post'
description: 'これはテンプレのサンプル記事'
pubDate: 'Jul 08 2022'
heroImage: '../../assets/blog-placeholder-3.jpg'
---
主な項目：
必須項目とそうでないものの定義は
src/content/config.tsに書かれている。z.string()は必須、z.string().optional()は任意、というスキーマ定義。
書きかけの記事を「ローカルでは見えるけど本番ビルドからは除外」したい。フロントマターに draft: true を入れる運用にする。
ただし Astro のブログテンプレートはデフォルトで draft を扱わないので、スキーマと一覧ページのフィルタを少し編集する必要がある。Claude Code に依頼：
記事のフロントマターに draft: true と書いたとき、ローカル（npm run dev）では
表示するが、本番ビルド（npm run build）からは除外される仕組みを作って。
- src/content/config.ts の schema に draft: z.boolean().optional() を追加
- 記事一覧ページ・個別記事ページで、本番（!import.meta.env.DEV）の場合は
draft: true の記事を弾くフィルタを追加
- 修正対象のファイルは現状を見て判断して
実装後、適当な記事に draft: true を入れて、npm run dev と npm run build && npm run preview で挙動の違いを確認するとよい。
Astro では画像の置き場が2種類ある：
heroImage や本文中の画像はこちらが推奨src/content/blog/foo.md から src/assets/photo.jpg を使う場合：
---
heroImage: '../../assets/photo.jpg'
---
本文中の画像も同じ書き方：
public/ に置いた画像は最適化されない代わりに、URL が一意（
/photo.jpg）で安定する。外部から参照される可能性のあるもの（SNSシェア時の OGP 画像など）は public/ がよい。
SEO 系の機能（OGP、sitemap、RSS）はすべて「サイトの URL」が起点になる。astro.config.mjs の site を自分の公開 URL に揃えておく：
export default defineConfig({
site: 'https://mk-astro-blog.pages.dev',
integrations: [sitemap()],
});
Claude Code に：
astro.config.mjs の site プロパティを 'https://mk-astro-blog.pages.dev' に
書き換えて（自分の Cloudflare Pages の公開 URL に合わせる）。
src/components/BaseHead.astro に OGP（og:title og:description og:image など）と Twitter Cards のメタタグが入っている。記事ページでは title description heroImage を反映する形でテンプレ済み。
トップページのデフォルト OGP 画像が必要なら、public/ に置いて参照する：
public/og-default.jpg を OGP のデフォルト画像として使う設定を入れて。
記事に heroImage がない場合は、これがフォールバックされるようにして。
@astrojs/sitemap integration が組み込み済み。5-1 で site を設定していれば、npm run build 時に dist/sitemap-index.xml と dist/sitemap-0.xml が自動生成される。
確認：ローカルでビルドして dist/ の中身を見るか、公開後に https://mk-astro-blog.pages.dev/sitemap-index.xml にアクセスする。
src/pages/rss.xml.js がテンプレに同梱されている。https://mk-astro-blog.pages.dev/rss.xml で配信される。RSS リーダー（Feedly など）に登録すると、push のたびに新着が届く。
5-1 で site を設定すれば、RSS の各記事 URL も自動で更新される。
ブログ運営では「思いついたときに書く」が大事。複数の編集経路を覚えておくと便利。
メインのワークフロー。~/Desktop/claude/mk-astro-blog で Claude Code を起動して、npm run dev で開発サーバーを上げたままにする。.md を保存するたびに HMR でブラウザが自動リロードされる。
仕上がりを Claude Code に投げる流れ：
今日の散歩について短い記事を書いて。
タイトルは「夕方の近所を歩く」、本文は3〜5段落くらいで。
src/content/blog/ に walk-evening.md として保存して。
heroImage は src/assets/ の既存サンプル画像を使ってよい。
GitHub のリポジトリページで .md を開き、右上の 編集（鉛筆アイコン） をクリック。ブラウザ上で編集して、コミットメッセージを書いて Commit changes。
GitHub のリポジトリページで . キーを押すと、ブラウザ内に VS Code が立ち上がる（→ GBA 6-4）。複数ファイルをまとめて編集できる。コミット・push もブラウザ内で完結。
npm run dev は走らない。プレビューは Markdown プレビュー機能止まりどの経路で編集しても、main ブランチに push すれば Cloudflare Pages が自動でビルド・デプロイする。「公開ボタン」が常に git push、というのが Astro × Pages の気持ちよさ。
書き続けて記事数が増えてきたとき、Astro × Cloudflare Pages の構成がどこまで耐えるかをざっくりつかんでおくと心強い。
src/assets/ で最適化対象を絞る、public/ に置く運用も併用する。Cloudflare Pages の無料プランは1ビルド20分・1プロジェクト20000ファイルが上限数千記事までは「気にせず書く」で十分。大きく育ってきて気になったら、ページネーションを入れる、画像の置き場を整理する、という順で対処していけばよい。
Astro はページネーションをファイルベースで実装できる。一覧ページのファイル名を [...page].astro のようにすると、ビルド時に /blog/, /blog/2/, /blog/3/ のような URL が自動生成される。
src/pages/blog/[...page].astro を作って、ブログ一覧を10件ずつページ分けして。
1ページ目は /blog/、2ページ目以降は /blog/2/, /blog/3/ という URL に。
ページ下部に前後ページのリンクも置いて。
ページネーションは標準では未設定なので、記事が増えてきたタイミングで入れればよい。
ここまでで、自分のブログとして使える形にカスタマイズできた。
src/styles/global.css を編集、フォントを変える、カラースキームを揃える書き続けるほどブログが育つ。git push がそのまま「公開ボタン」になる感覚を楽しみつつ、自分の場所を育てていく。
2026-05-24 タツヲ (yto)