【実践】ブログサイトを作ってCloudflareで公開する ── Astro + AIで本格Webサイト

この記事で作るもの

Markdownで記事を書けるブログサイトを作り、独自ドメインで公開する。

完成する機能：

• トップページ（記事一覧）
• 記事詳細ページ（Markdownレンダリング）
• カテゴリ別一覧
• レスポンシブ対応
• SEO対応（title, description, OGP）

所要時間: 約2〜3時間

---

なぜAstroなのか

フレームワーク	特徴	ブログ向き度
Astro	静的サイト生成、高速、Markdown対応	最適
Next.js	React製、高機能	やや重厚
WordPress	CMS、プラグイン豊富	定番だが遅い
HTML手書き	シンプル	記事が増えると辛い

Astroは**「ブログを作るために生まれた」**と言っても過言ではないフレームワーク。Markdownで記事を書くだけで、自動的にページが生成される。

---

全体の流れ

---

Step 1: Astroプロジェクト作成

mkdir my-blog
cd my-blog
claude

Claude Codeに指示：

Astro + Tailwind CSSでブログサイトを作ってください。

構成：
- トップページ（記事カード一覧、3列グリッド）
- 記事詳細ページ（Markdown本文）
- カテゴリ別一覧ページ

Content Collectionsを使って、src/content/posts/ に
Markdownファイルを置くだけで記事が追加される仕組みにしてください。

frontmatter:
  title, description, category, date, image

デザイン：
- 白基調、アクセントカラーは紫（#6d28d9）
- Noto Sans JPフォント
- 最大幅1200px、中央寄せ
- レスポンシブ対応

---

Step 2: 記事を書く

src/content/posts/ にMarkdownファイルを作る：

---
title: "初めてのブログ記事"
description: "このブログの最初の記事です"
category: "日記"
date: 2026-04-01
image: "https://images.unsplash.com/photo-xxx"
---

## はじめに

ここに本文を書きます。
**太字**や*イタリック*も使えます。

- リスト1
- リスト2

> 引用もこのように書けます

AIに頼んでもいい：

サンプル記事を3本作ってください。
カテゴリは「技術」「日常」「レビュー」で。

---

Step 3: デプロイ

GitHub

GitHubにmy-blogリポジトリを作ってpushして

Cloudflare Pages

1. Cloudflare Dashboard → Workers & Pages → Create
2. Pages → Connect to Git → リポジトリ選択
3. Framework preset: Astro
4. Save and Deploy

---

記事を追加するワークフロー

デプロイ後の運用はシンプル：

1. src/content/posts/ にMarkdownファイルを作る
2. git add → git commit → git push
3. Cloudflareが自動でビルド＆公開

これだけ。WordPressのような管理画面は不要。テキストエディタでMarkdownを書いてpushするだけ。

---

もっと機能を追加したいなら

やりたいこと	AIへの指示例
サイトマップ	「@astrojs/sitemapを追加して」
RSS配信	「RSSフィードを追加して」
検索機能	「Pagefindで全文検索を追加して」
コメント	「giscusでコメント機能を追加して」
画像最適化	「Astroの<Image>コンポーネントで画像を最適化して」
アナリティクス	「Cloudflare Web Analyticsを追加して」

---

まとめ

ブログサイトの構築は、バイブコーディングの集大成と言えるプロジェクト。ここまでできれば、同じ仕組みで：

• ポートフォリオサイト
• 企業のランディングページ
• ドキュメントサイト
• 情報メディア

など、あらゆるWebサイトが作れるようになる。プログラミングを一行も書かずに。