Claude Code と Astro で作ったブログを運営していく

⚠️ 現在製作中のため、内容は不正確なことがあります。

AST（Claude Code と Astro でブログを作って Cloudflare Pages で公開する）で作ったブログを、自分のブログとして使えるところまで育てる。サイト情報・記事の書き方・SEO・編集ワークフローを順に扱う。

1. はじめに

AST で mk-astro-blog リポジトリを作って Cloudflare Pages に公開済みの状態から始める。本記事ではそのテンプレートを「自分のブログ」に育てるためのトピックを扱う。

扱うこと：

• サイト情報（サイト名・About・フッター・ナビバー）のカスタマイズ
• 記事の書き方（フロントマター、下書き、画像）
• SEO 系（OGP、sitemap、RSS）
• 規模感の目安（記事数が増えたときの考えどころ）

ハンズオンは AST と同じく Claudeデスクトップアプリ（→ CDG）の Claude Code で進める前提。Cloudflare Pages のデプロイは push したら自動で走るので、コードを書いて push、を繰り返すだけ。

2. 全体像（ファイル構造の再確認）

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）

ポイント：

• src/consts.ts: サイト名・説明の定数。複数のページから参照される
• src/content/blog/: 記事置き場。各 .md の中身がそのまま個別ページになる
• src/pages/: URL ルーティング。pages/index.astro がトップ、pages/blog/[...slug].astro が個別記事
• src/layouts/: ページのレイアウト（共通の見出し・本文枠など）
• astro.config.mjs: Astro 自体の設定。sitemap integration、site（公開URL）など

3. サイト情報をきちんと書き換える

ブログの「顔」となる部分（サイト名・サイト説明・About・フッター・ナビバー）を自分のものに整える。デフォルトのままだと「テンプレを使っただけのサイト」に見えてしまうので、ここだけ差し替えるだけで一気に「自分のブログ」感が出る。

主に触るのは src/consts.ts（サイト全体の定数）、src/pages/about.astro、src/components/Header.astro / Footer.astro の4ファイル。

AST 4 章で雑に書き換えたサイト情報を、より整った形に直していく。

3-1. サイト名・説明

src/consts.ts に定数として置かれている。

Claudeへの指示

src/consts.ts の SITE_TITLE と SITE_DESCRIPTION を確認して、
以下に揃えて。

- SITE_TITLE: 「日々のメモ」
- SITE_DESCRIPTION: 「日々の生活について気が向いたら書きます」

他のファイル（Header.astro, Footer.astro, 各 pages/）にハードコード
された "Astro Blog" や "Astro" が残っていないか確認して、見つけたら
書き換えて。

3-2. About ページ

src/pages/about.astro がデフォルトでサンプル文章になっている。自己紹介に書き換える。

Claudeへの指示

src/pages/about.astro の本文を、以下の内容で書き換えて。

- 著者: 匿名ペンギン
- 自己紹介: 日々の生活と読んだ本について書いています
- 連絡先: GitHub (@yourname)、X (@yourname)

既存のレイアウト構造（<Layout>、<main>、見出しなど）はそのまま残して、
中の文章だけ書き換えてくれればよい。

3-3. フッター

src/components/Footer.astro に著作権表記や SNS リンクのテンプレが入っている。

Claudeへの指示

src/components/Footer.astro を以下に書き換えて。

- コピーライト: © 匿名ペンギン
- SNS リンク: 自分の GitHub と X のアカウントに変更
- デフォルトで入っている不要な SNS（Mastodon, Twitter のサンプル等）は削除

3-4. ナビバー

src/components/Header.astro がデフォルトで Home / Blog / About になっている。必要に応じて項目を増減する。

Claudeへの指示

src/components/Header.astro のナビゲーション項目を確認して、
不要なリンクは削除、必要なリンク（例: Tags ページ）があれば
追加して。

4. 記事の書き方

記事は src/content/blog/ に .md（または .mdx）として置く。Astro はこのフォルダを「ブログ記事のコンテンツコレクション」として認識し、各ファイルから個別ページ（/blog/<ファイル名>/）を1つずつビルドする。

ファイル先頭にフロントマター（YAML 形式のメタデータ）を書いて、その後ろに本文（Markdown）を続ける形が基本。

4-1. フロントマターの基本項目

サンプル記事のフロントマター（先頭の --- で囲まれた部分）の例：

---
title: 'My First Blog Post'
description: 'これはテンプレのサンプル記事'
pubDate: 'Jul 08 2022'
heroImage: '../../assets/blog-placeholder-3.jpg'
---

主な項目：

• title: 記事のタイトル
• description: 一覧ページと検索エンジン向けの説明
• pubDate: 公開日（記事一覧の並び順に影響する）
• heroImage: 記事の TOP に表示される画像（任意）
• updatedDate: 更新日（任意）

必須項目とそうでないものの定義は src/content/config.ts に書かれている。z.string() は必須、z.string().optional() は任意、というスキーマ定義。

4-2. 下書き機能（draft: true）

書きかけの記事を「ローカルでは見えるけど本番ビルドからは除外」したい。フロントマターに draft: true を入れる運用にする。

ただし Astro のブログテンプレートはデフォルトで draft を扱わないので、スキーマと一覧ページのフィルタを少し編集する必要がある。Claude Code に依頼：

Claudeへの指示

記事のフロントマターに 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 で挙動の違いを確認するとよい。

4-3. 画像の使い方

Astro では画像の置き場が2種類ある：

• src/assets/: ビルド時に最適化される。記事の heroImage や本文中の画像はこちらが推奨
• public/: そのままコピーされる（最適化なし）。favicon、OGP 用の固定画像など、URL を変えたくないものはこちら

src/content/blog/foo.md から src/assets/photo.jpg を使う場合：

---
heroImage: '../../assets/photo.jpg'
---

本文中の画像も同じ書き方：

![説明](../../assets/photo.jpg)

public/ に置いた画像は最適化されない代わりに、URL が一意（/photo.jpg）で安定する。外部から参照される可能性のあるもの（SNSシェア時の OGP 画像など）は public/ がよい。

5. SEO 系

書いた記事を読んでもらうための「外向きの整え方」をまとめる。検索エンジンに見つけてもらう仕組み（sitemap）、SNS でシェアされたときに見栄えよく表示される仕組み（OGP / Twitter Cards）、RSS リーダーで購読してもらう仕組み（RSS フィード）。

どれも Astro のブログテンプレートには下地が組み込まれているので、設定を 1〜2 行加えるだけで動く。「いずれもサイトの公開 URL を起点にする」のが共通の前提なので、まず astro.config.mjs の site を揃えるところから始める。

5-1. astro.config.mjs の site 設定

SEO 系の機能（OGP、sitemap、RSS）はすべて「サイトの URL」が起点になる。astro.config.mjs の site を自分の公開 URL に揃えておく：

export default defineConfig({
  site: 'https://mk-astro-blog.pages.dev',
  integrations: [sitemap()],
});

Claude Code に：

Claudeへの指示

astro.config.mjs の site プロパティを 'https://mk-astro-blog.pages.dev' に
書き換えて（自分の Cloudflare Pages の公開 URL に合わせる）。

5-2. OGP / Twitter Cards

src/components/BaseHead.astro に OGP（og:title og:description og:image など）と Twitter Cards のメタタグが入っている。記事ページでは title description heroImage を反映する形でテンプレ済み。

トップページのデフォルト OGP 画像が必要なら、public/ に置いて参照する：

Claudeへの指示

public/og-default.jpg を OGP のデフォルト画像として使う設定を入れて。
記事に heroImage がない場合は、これがフォールバックされるようにして。

5-3. sitemap.xml

@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 にアクセスする。

5-4. RSS フィード

src/pages/rss.xml.js がテンプレに同梱されている。https://mk-astro-blog.pages.dev/rss.xml で配信される。RSS リーダー（Feedly など）に登録すると、push のたびに新着が届く。

5-1 で site を設定すれば、RSS の各記事 URL も自動で更新される。

6. 規模感の目安

書き続けて記事数が増えてきたとき、Astro × Cloudflare Pages の構成がどこまで耐えるかをざっくりつかんでおくと心強い。

• 〜100記事: ビルドは数十秒。何も気にせず書ける
• 〜1000記事: ビルドは1〜2分。一覧ページに全部並べると重いので、ページネーション（記事一覧を10件ずつなどに分ける）を入れる
• 〜10000記事: ビルドは数分〜10分超。画像最適化が重くなるので、src/assets/ で最適化対象を絞る、public/ に置く運用も併用する。Cloudflare Pages の無料プランは1ビルド20分・1プロジェクト20000ファイルが上限
• 10000記事超: ビルド分割や、サブドメイン単位で別プロジェクトに分ける構成を検討

数千記事までは「気にせず書く」で十分。大きく育ってきて気になったら、ページネーションを入れる、画像の置き場を整理する、という順で対処していけばよい。

6-1. ページネーションを入れる

Astro はページネーションをファイルベースで実装できる。一覧ページのファイル名を [...page].astro のようにすると、ビルド時に /blog/, /blog/2/, /blog/3/ のような URL が自動生成される。

Claudeへの指示

src/pages/blog/[...page].astro を作って、ブログ一覧を10件ずつページ分けして。
1ページ目は /blog/、2ページ目以降は /blog/2/, /blog/3/ という URL に。
ページ下部に前後ページのリンクも置いて。

ページネーションは標準では未設定なので、記事が増えてきたタイミングで入れればよい。

7. ブログのデザインを変える

AST では Astro 公式の blog template を使ったが、Astro には他にも公式テンプレが何種類かあり、コミュニティ製テーマも多数公開されている。書きためてきたブログのデザインを丸ごと差し替えたいときに使い分けられる。

Astro のテーマ切り替えは WordPress のような「管理画面で1クリック」ほど気軽ではない。静的サイトジェネレーターはデータとテーマが同じリポジトリ内にあるため、テーマを変えるときは「新しいプロジェクトを作って、書きためたコンテンツを移行する」作業になる。逆に言えば、テーマがコード全部を含むので Git 管理で壊れにくく、必要なら手元で気が済むまで自由に手を入れられる。

7-1. 公式 CLI で選べるテンプレ一覧

npm create astro@latest 実行時の How would you like to start your new project? で選べる公式テンプレ（2026年5月時点）：

選択肢（CLI 表示）	用途	プレビュー
A basic, helpful starter project (recommended)	基本のスターター	astro.new
Use blog template	ブログ（AST で使ったもの）	astro.new
Use docs (Starlight) template	ドキュメントサイト	astro.new / Starlight 公式
Use minimal (empty) template	空のプロジェクト（ゼロから組む）	astro.new

各テンプレの見た目はハブの astro.new からブラウザ上でそのまま触れる（StackBlitz / CodeSandbox 経由）。

新規プロジェクトとして別ディレクトリに作って、その中身で既存ブログを置き換える流れ。

Starlight は Astro 公式のドキュメントフレームワーク。いま読んでいるこの vibecodingnotes.com の上位互換なレイアウトのサイトを、ほぼ設定だけで構築できる。ブログより「ドキュメント・教材・チュートリアル」向け。

7-2. Astro Themes ギャラリーで探す

Astro Themes ギャラリー には公式・コミュニティ製のテーマが多数並んでいる。ブログ向けでも「ミニマル」「マガジン風」「画像中心」「タイポグラフィ重視」など方向性で選べる。

各テーマのページに表示されているコマンドを叩くと、その GitHub リポジトリを雛形にした新規プロジェクトが作成される：

npm create astro@latest -- --template <ユーザー名>/<テーマ名>

または git clone してから手動でセットアップしてもよい。

7-3. 既存ブログから新テーマへ移行する流れ

書きためた .md を新テーマに移すのは、ファイル単位のコピー作業に近い：

1. 別ディレクトリで新テーマのプロジェクトを作成（例: ~/Desktop/claude/mk-astro-blog-v2）
2. 既存の src/content/blog/ の .md を新プロジェクトの同じ場所にコピー
3. 既存の src/assets/ の画像を新プロジェクトにコピー
4. フロントマターの差異を吸収（テーマによって heroImage のパスや必須項目が違う場合あり）
5. 既存の public/ の独自アセット（favicon、OGP 用画像など）を新プロジェクトに移す
6. astro.config.mjs のサイト URL や sitemap 設定を新プロジェクト側にも反映
7. ローカルで npm run dev で動作確認
8. Cloudflare Pages のリポジトリを差し替え（または新リポジトリでデプロイし直す）

着替え作業中は新テーマを 別リポジトリ で進めるのが安全。動作確認できてから本番リポジトリを切り替えれば、失敗しても元のブログは生き続ける。

Claude Code に「mk-astro-blog の記事と画像を mk-astro-blog-v2 にコピーして、フロントマターの差異を吸収して」と依頼すれば、機械的な移行作業はかなり任せられる。

8. 次のステップ

ここまでで、自分のブログとして使える形にカスタマイズできた。

• 動的機能を足す → LAP（いいねカウントAPI） を組み合わせて、コメントやいいねを実現
• アクセス解析 → Cloudflare ダッシュボード → 該当 Pages プロジェクト → Web Analytics タブで無料の解析ツールを有効化
• デザインの作り込み → src/styles/global.css を編集、フォントを変える、カラースキームを揃える
• 複数ブログ → 同じ手順で別リポジトリを作って Pages に追加すれば、いくつでも

書き続けるほどブログが育つ。git push がそのまま「公開ボタン」になる感覚を楽しみつつ、自分の場所を育てていく。