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

この記事で作るもの

Markdownで記事を書けるブログサイトを作り、独自ドメインで公開する。バイブコーディングの集大成として、実際に世界中からアクセスできるWebサイトを完成させよう。

完成する機能：

• トップページ（記事カード一覧、グリッドレイアウト）
• 記事詳細ページ（Markdownレンダリング）
• カテゴリ別一覧ページ
• タグ機能
• レスポンシブ対応（スマホ・タブレット・PC）
• SEO対応（title, description, OGP, sitemap, robots.txt）
• RSS配信

所要時間: 約2〜3時間（初回。慣れれば30分で作れる）

---

なぜAstroでブログを作るのか

ブログサイトを作る方法はたくさんあるが、2026年の今、Astroが最適解と言える理由がある。

フレームワーク比較

フレームワーク	初期構築の手軽さ	表示速度	Markdown対応	学習コスト	ホスティング費用	ブログ向き度
Astro	とても簡単	最速クラス	ネイティブ対応	低い	無料（静的）	最適
Next.js	普通	速い	追加設定要	やや高い	無料〜有料	やや重厚
Hugo	簡単	最速	ネイティブ対応	中程度（Go テンプレート）	無料（静的）	良い
Gatsby	やや複雑	速い	プラグイン要	高い（GraphQL）	無料（静的）	可能だが面倒
WordPress	GUIで簡単	遅め	非対応（WYSIWYG）	低い	月500円〜	定番だが遅い
HTML手書き	最もシンプル	速い	非対応	低い	無料（静的）	記事増で破綻

Astroがブログに最適な5つの理由

1. ゼロJavaScriptがデフォルト

Astroはビルド時にHTMLを生成する「静的サイトジェネレーター（SSG）」。ブラウザに送るJavaScriptがゼロなので、ページ表示が圧倒的に速い。ブログは読み物コンテンツなので、インタラクティブなJSがほぼ不要。Astroの設計思想と完全に合う。

2. Content Collectionsが神機能

Markdownファイルを src/content/posts/ に置くだけで、型安全な記事データとして扱える。frontmatter（記事のメタ情報）の型チェックまでやってくれる。

3. Islands Architecture

一部だけインタラクティブにしたい場合（検索窓、コメント欄など）、その部分だけReactやVueのコンポーネントを「島（Island）」として埋め込める。全体は静的HTML、必要な部分だけ動的という理想的な構成。

4. エコシステムが充実

@astrojs/sitemap、@astrojs/rss、@astrojs/image など、ブログに必要な機能が公式インテグレーションとして揃っている。

5. デプロイが無料

静的HTMLなので、Cloudflare Pages、Netlify、Vercelなどに無料でデプロイできる。月間アクセスが数万PVになっても無料のまま。

---

全体の流れ

---

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

ターミナルを開いて、以下の手順で始める。

mkdir my-blog
cd my-blog
claude

Claude Codeに以下のプロンプトを投げよう：

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

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

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

frontmatter:
  title, description, category, tags, date, image, draft

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

生成されるディレクトリ構造

my-blog/
├── astro.config.mjs        # Astro設定ファイル
├── package.json             # 依存パッケージ
├── tailwind.config.mjs      # Tailwind CSS設定
├── tsconfig.json            # TypeScript設定
├── public/                  # 静的ファイル（画像、favicon等）
│   ├── favicon.svg
│   └── robots.txt
├── src/
│   ├── content/
│   │   ├── config.ts        # Content Collections定義
│   │   └── posts/           # 記事Markdownファイル
│   │       ├── first-post.md
│   │       └── second-post.md
│   ├── components/          # 再利用コンポーネント
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   ├── PostCard.astro
│   │   └── TagList.astro
│   ├── layouts/             # ページレイアウト
│   │   ├── BaseLayout.astro
│   │   └── PostLayout.astro
│   └── pages/               # ページ（URLに対応）
│       ├── index.astro      # トップページ → /
│       ├── about.astro      # Aboutページ → /about
│       ├── posts/
│       │   └── [...slug].astro  # 記事詳細 → /posts/xxxxx
│       ├── category/
│       │   └── [category].astro # カテゴリ一覧 → /category/技術
│       └── tag/
│           └── [tag].astro      # タグ一覧 → /tag/astro

---

Step 2: Content Collectionsの仕組み

Content Collectionsは、Astroの最も強力な機能の一つ。Markdownファイルを「型付きデータ」として扱える仕組みだ。

config.tsでスキーマを定義

src/content/config.ts で記事データの型を定義する：

import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),                          // 記事タイトル（必須）
    description: z.string(),                     // 説明文（必須）
    category: z.string(),                        // カテゴリ（必須）
    tags: z.array(z.string()).default([]),        // タグ（任意、デフォルト空配列）
    date: z.date(),                              // 公開日（必須）
    image: z.string().optional(),                // アイキャッチ画像URL（任意）
    draft: z.boolean().default(false),           // 下書きフラグ（デフォルトfalse）
    updatedDate: z.date().optional(),            // 更新日（任意）
  }),
});

export const collections = { posts };

Content Collectionsを使って記事を取得するコード

ページ側では、以下のように記事データを取得する：

---
import { getCollection } from 'astro:content';

// 下書き以外の記事を取得し、日付の新しい順にソート
const posts = (await getCollection('posts', ({ data }) => {
  return data.draft !== true;
})).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---

{posts.map((post) => (
  <article>
    <a href={`/posts/${post.slug}`}>
      <h2>{post.data.title}</h2>
      <p>{post.data.description}</p>
      <time>{post.data.date.toLocaleDateString('ja-JP')}</time>
    </a>
  </article>
))}

Content Collectionsの便利ポイント

機能	説明
型安全	frontmatterの型が保証される。post.data.title は必ずstring
フィルタリング	draft: true の記事を本番では非表示にできる
ソート	日付順、カテゴリ順など自由にソート可能
スラッグ自動生成	ファイル名がそのままURLのスラッグになる
MDX対応	.mdx ファイルを使えばコンポーネントも埋め込める

---

Step 3: frontmatterの書き方ガイド

各記事のMarkdownファイルの先頭に書く --- で囲まれた部分がfrontmatter。記事のメタデータを定義する。

各フィールドの詳細

---
title: "AIでブログを自動化する方法"        # 記事タイトル。ブラウザタブやSNSシェア時に表示
description: "Claude CodeとAstroを使って..." # 検索結果やOGPカードに表示される説明文（80〜120字推奨）
category: "技術"                            # 1記事1カテゴリ。大分類として使う
tags: ["Astro", "AI", "自動化"]             # 複数OK。記事の横断的な検索用
date: 2026-04-01                            # 公開日。YYYY-MM-DD形式
image: "https://images.unsplash.com/..."    # アイキャッチ画像。OGPにも使われる
draft: false                                # true にすると本番ビルドで非表示
updatedDate: 2026-04-03                     # 更新日。表示用（任意）
---

---

Step 4: Markdownの書き方チートシート

ブログ記事はMarkdownで書く。よく使う構文をまとめておく。

基本構文

## 見出し2（h2）
### 見出し3（h3）

**太字テキスト**
*イタリックテキスト*
~~取り消し線~~

- 箇条書きリスト
- 項目2
  - ネストも可能

1. 番号付きリスト
2. 項目2

[リンクテキスト](https://example.com)
![画像の代替テキスト](https://example.com/image.jpg)

> 引用文。人の言葉や重要なポイントを強調するときに使う。

---（水平線）

`インラインコード`

コードブロック

言語名を指定すると、シンタックスハイライトが効く：

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

```python
def hello():
    print("Hello, World!")
```

```bash
npm install astro
```

テーブル

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| データA | データB | データC |
| データD | データE | データF |

MDXで使える追加機能

.mdx 拡張子のファイルでは、Astroコンポーネントをインポートして使える：

import Callout from '../components/Callout.astro';

通常のMarkdownテキスト。

<Callout type="tip" title="ポイント">
コンポーネントを埋め込める！
</Callout>

---

Step 5: カテゴリ・タグ機能の実装

ブログにカテゴリとタグ機能を追加すると、読者が記事を探しやすくなる。

カテゴリ一覧ページ

AIに以下のように指示する：

カテゴリ別の記事一覧ページを作ってください。
URL: /category/[カテゴリ名]
全カテゴリの一覧は /category/ で表示。
各カテゴリの記事数も表示してください。

実装の仕組み（src/pages/category/[category].astro）：

---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  // 全記事からユニークなカテゴリを抽出
  const categories = [...new Set(posts.map(post => post.data.category))];

  return categories.map(category => ({
    params: { category },
    props: {
      posts: posts.filter(post => post.data.category === category),
    },
  }));
}

const { category } = Astro.params;
const { posts } = Astro.props;
---

タグ一覧ページ

タグも同様の仕組み。カテゴリが「大分類」ならタグは「横断的なラベル」として使い分ける：

分類方法	役割	1記事あたりの数	例
カテゴリ	大分類。記事の主カテゴリ	1つだけ	「技術」「日常」「レビュー」
タグ	横断的なラベル	複数OK	「Astro」「AI」「初心者向け」

タグ別の記事一覧ページも作ってください。
URL: /tag/[タグ名]
サイドバーにタグクラウド（タグ一覧）を表示して、
記事数が多いタグほど文字を大きくしてください。

---

Step 6: デザインカスタマイズの具体例

AIに指示してデザインを調整する、よくあるカスタマイズパターンを紹介する。

配色の変更

アクセントカラーを紫（#6d28d9）からティール（#0d9488）に変更してください。
ヘッダーの背景を白から紺色（#1e293b）に変えて、テキストを白にしてください。

フォントの変更

本文のフォントをNoto Sans JPに、見出しをNoto Serif JPにしてください。
Google Fontsから読み込む設定も追加して。

記事カードのデザイン

記事カードにホバー時のアニメーションを追加してください。
- カードが少し浮き上がる（translateY -4px）
- 影が濃くなる
- トランジション 0.2秒

ダークモード対応

ダークモード対応を追加してください。
- OSの設定に連動（prefers-color-scheme）
- ヘッダーにトグルボタンも設置
- ダークモード時の配色：背景 #0f172a、テキスト #e2e8f0

---

Step 7: SEO対策を万全にする

ブログを公開するなら、検索エンジンに見つけてもらえるようSEO対策を行う。

7-1. サイトマップ（sitemap.xml）

サイトマップは、サイト内のすべてのURLを検索エンジンに伝えるXMLファイル。

@astrojs/sitemap をインストールして設定してください。
astro.config.mjs の site に "https://my-blog.example.com" を設定して。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://my-blog.example.com',
  integrations: [sitemap()],
});

7-2. robots.txt

検索エンジンのクローラーに対する指示ファイル。public/robots.txt に配置：

User-agent: *
Allow: /
Sitemap: https://my-blog.example.com/sitemap-index.xml

7-3. OGP（Open Graph Protocol）

SNSでシェアされたときにタイトル・説明・画像を表示させる設定。

全ページの<head>に以下のOGPメタタグを追加してください：
- og:title → ページタイトル
- og:description → ページの説明文
- og:image → アイキャッチ画像（デフォルト画像も設定）
- og:url → ページのURL
- og:type → "article"（記事ページ）/ "website"（トップ）
- Twitter Card（summary_large_image）

実装例（BaseLayout.astro 内）：

<head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image || '/default-og.jpg'} />
  <meta property="og:url" content={Astro.url} />
  <meta property="og:type" content={isArticle ? 'article' : 'website'} />
  <meta name="twitter:card" content="summary_large_image" />
</head>

7-4. 構造化データ（JSON-LD）

Googleの検索結果にリッチスニペット（著者名、公開日、画像など）を表示させるための仕組み。

記事ページに Article 型の JSON-LD 構造化データを追加してください。
@type: "Article"
headline, datePublished, dateModified, author, image を含めて。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "AIでブログを自動化する方法",
  "datePublished": "2026-04-01",
  "dateModified": "2026-04-03",
  "author": {
    "@type": "Person",
    "name": "あなたの名前"
  },
  "image": "https://example.com/image.jpg"
}
</script>

SEO対策チェックリスト

項目	内容	重要度
title タグ	各ページに固有のタイトル（30〜60字）	最重要
meta description	各ページに80〜120字の説明文	最重要
sitemap.xml	自動生成、Google Search Consoleに送信	重要
robots.txt	クローラーへの指示	重要
OGP タグ	SNSシェア時の見た目を最適化	重要
構造化データ	リッチスニペット表示	推奨
canonical URL	重複コンテンツ防止	推奨
画像の alt 属性	画像検索対策・アクセシビリティ	推奨
パンくずリスト	ユーザー・検索エンジン双方に有効	推奨

---

Step 8: Cloudflare Pagesデプロイの詳細手順

サイトが完成したら、世界に公開しよう。Cloudflare Pagesは無料で高速なホスティングサービスだ。

8-1. GitHubリポジトリの準備

GitHubにmy-blogリポジトリを作ってpushしてください。
publicリポジトリで、READMEも追加して。

手動で行う場合：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/my-blog.git
git push -u origin main

8-2. Cloudflare Pagesの設定

8-3. ビルド設定の詳細

設定項目	値	説明
Framework preset	Astro	自動で適切なビルドコマンドが設定される
Build command	npm run build	Astroのビルドコマンド
Build output directory	dist	Astroのデフォルト出力先
Root directory	/	モノレポでない限りルート
Node.js version	18以上	Environment variablesで NODE_VERSION = 20 を設定推奨

8-4. 独自ドメインの設定

Cloudflare Pagesはデフォルトで project-name.pages.dev のURLが割り当てられるが、独自ドメインも設定できる。

手順：
1. Cloudflareのダッシュボードでドメインを追加
2. ネームサーバーをCloudflareのものに変更（ドメインレジストラ側で設定）
3. Pages → Custom domains → 「Set up a custom domain」
4. ドメイン名を入力 → DNSレコードが自動追加される
5. SSL/TLS → Full（strict）を選択

設定完了まで最大48時間かかるが、通常は数分〜数時間で反映される。HTTPS対応も自動で行われ、証明書の更新も不要。

---

記事追加・更新のワークフロー

デプロイ後の運用はとてもシンプル。日常的な作業フローを紹介する。

新しい記事を追加する

# 1. 記事ファイルを作成
# src/content/posts/my-new-article.md を作成

# 2. ローカルでプレビュー確認
npm run dev
# → http://localhost:4321 で確認

# 3. 問題なければpush
git add src/content/posts/my-new-article.md
git commit -m "Add: 新しい記事を追加"
git push

# 4. Cloudflareが自動でビルド＆公開（2〜3分）

記事を更新する

既存の記事を修正したら同じくpushするだけ。updatedDate をfrontmatterに追加しておくと、読者に「更新済み」であることを伝えられる。

AIを使った効率的な記事執筆

「Astroの便利なプラグイン5選」という記事を書いてください。
ファイル名: src/content/posts/astro-plugins.md
カテゴリ: 技術
タグ: ["Astro", "プラグイン"]
2,000字程度で、コード例も含めてください。

---

機能拡張パターン

基本的なブログが完成したら、必要に応じて機能を追加していこう。すべてAIへの一言指示で実装できる。

RSS配信

ブログにRSSフィードを追加すると、読者がRSSリーダーで購読できるようになる。

@astrojs/rss をインストールして、/rss.xml でRSSフィードを
配信してください。全記事のタイトル・概要・URLを含めて。

// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('posts');
  return rss({
    title: 'My Blog',
    description: 'ブログの説明文',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.date,
      description: post.data.description,
      link: `/posts/${post.slug}/`,
    })),
  });
}

全文検索（Pagefind）

Pagefindは、静的サイトに全文検索を追加できるライブラリ。ビルド時にインデックスを生成し、クライアント側で検索が完結する。

Pagefindで全文検索機能を追加してください。
ヘッダーに検索アイコンを置いて、クリックするとモーダルで
検索UIが開くようにしてください。日本語対応もお願いします。

コメント機能（giscus）

giscusはGitHub Discussionsをバックエンドにしたコメントシステム。無料で広告なし。

giscusを使ってコメント機能を追加してください。
記事ページの最下部にコメント欄を表示。
ダークモード対応もお願いします。

アナリティクス

Cloudflare Web Analyticsを追加してください。
全ページの</body>直前にスクリプトを挿入。
ビーコンID: "xxxxxxxxxxxxx"

Cloudflare Web AnalyticsはGDPR準拠で、Cookie不要。Google Analyticsの代替として最適。

画像最適化

Astroの<Image>コンポーネントで画像を最適化してください。
- WebP形式に自動変換
- レスポンシブサイズ（width指定）
- lazy loading
- 記事内の画像にも適用

ニュースレター購読フォーム

トップページと記事下部にメールマガジン登録フォームを追加してください。
Buttondownと連携する形で。
フォームはメールアドレス入力 + 送信ボタンのシンプルなデザイン。

目次（Table of Contents）の自動生成

記事ページの右サイドバーに目次を自動生成してください。
記事内のh2, h3見出しを抽出して、クリックでスムーススクロール。
現在読んでいるセクションをハイライト表示。
PCのみ表示、スマホでは非表示にしてください。

関連記事の表示

記事ページの下部に「関連記事」セクションを追加してください。
同じカテゴリの記事を最大3件表示。カード形式で。

各機能のおすすめ度

機能	実装難易度	優先度	説明
RSS	簡単	高い	公式インテグレーションで一瞬
サイトマップ	簡単	高い	SEO必須。公式インテグレーション
全文検索	普通	中程度	記事が20本以上になったら欲しい
コメント	普通	低い	読者とのコミュニケーションが必要なら
アナリティクス	簡単	高い	アクセス数を把握するために必須
画像最適化	普通	中程度	画像が多いブログなら重要
ニュースレター	普通	低い	ファンを増やしたい段階で
目次自動生成	やや難	中程度	長い記事が多いなら便利
関連記事	普通	中程度	回遊率アップに効果的

---

トラブルシューティング

ブログ構築中によく遭遇する問題と解決方法をまとめた。

ビルドエラー系

エラー	原因	解決方法
Cannot find module	パッケージ未インストール	npm install を実行
frontmatter does not match	frontmatterの型が不正	config.tsのスキーマと照合
getStaticPaths() required	動的ルートのパス未定義	getStaticPaths() 関数を実装
Invalid date	日付形式が不正	YYYY-MM-DD 形式にする

デプロイエラー系

エラー	原因	解決方法
Node.jsバージョン	Cloudflareのデフォルトが古い	環境変数 NODE_VERSION=20
ビルドタイムアウト	画像が大きすぎる	画像を圧縮、外部ホスティング利用
404エラー	output directoryの設定ミス	dist を確認

---

よくある質問（FAQ）

Q1. Astroブログの記事はMarkdownとMDXどちらで書くべき？

基本はMarkdown（.md）で十分。テキスト・画像・コードブロックなど、ブログに必要な要素はMarkdownですべて表現できる。MDX（.mdx）はAstroコンポーネントを記事内に埋め込みたいとき（Callout、タイムライン、インタラクティブなグラフなど）に使う。最初は .md で始めて、コンポーネントが必要になったら .mdx に切り替えるのがおすすめ。

Q2. Cloudflare Pagesの無料プランでどこまでできる？

無料プランで月間リクエスト数無制限、帯域幅無制限。個人ブログなら月間数十万PVでも問題ない。ビルドは月500回まで（1日10回以上pushしても余裕）。同時ビルドは1つまで。商用利用もOK。正直、個人ブログで有料プランが必要になることはほぼない。

Q3. 独自ドメインは必要？いくらかかる？

必須ではないが、強く推奨。独自ドメインなしだと project.pages.dev というURLになるが、これでもブログとして十分機能する。独自ドメインのメリットは：ブランディング、SEO的にやや有利、将来のサーバー移行が容易。費用は .com で年間約1,500円、.dev で年間約1,800円程度。Cloudflare Registrarなら他社より安く取得できる。

Q4. WordPressからAstroに移行できる？

可能。WordPressの記事をMarkdownにエクスポートするツール（wordpress-export-to-markdown）を使えば、既存記事をMarkdownファイルに変換できる。画像の移行やURL構造の維持（リダイレクト設定）に注意が必要だが、AIに「WordPressのエクスポートファイルをAstroのContent Collections形式に変換して」と頼めば対応してくれる。

Q5. 記事が増えてきたらパフォーマンスは落ちる？

落ちない。Astroは静的サイト生成なので、記事が1,000本あっても各ページは事前にビルドされたHTMLファイル。ユーザーがアクセスした時点ではサーバー処理は発生しない。ビルド時間は記事数に応じて増えるが、1,000記事でも数分程度。Cloudflare PagesのCDNで世界中から高速にアクセスできる。

Q6. 複数人で記事を書くことはできる？

できる。GitHubリポジトリにコラボレーターを追加すれば、複数人で記事を管理できる。プルリクエストを使えばレビュー機能も使える。さらに本格的にやるなら、ヘッドレスCMSの導入（Contentful、Sanity、microCMSなど）を検討するとよい。記者はCMSの管理画面から記事を書き、ビルド時にAPIで記事データを取得する仕組みにできる。

Q7. Astroブログにお問い合わせフォームを付けられる？

付けられる。静的サイトなので自前でフォーム処理はできないが、外部サービスを利用すれば簡単。おすすめは：(1) Cloudflare Workers でフォーム処理用APIを作る（無料）、(2) Formspree や Web3Forms などのフォームバックエンド（無料枠あり）、(3) Googleフォーム を埋め込む（最も手軽）。

---

まとめ

ブログサイトの構築は、バイブコーディングの集大成と言えるプロジェクトだ。この記事で学んだ内容を振り返ろう。

ステップ	習得したこと
プロジェクト作成	Astroの基本構造、Tailwind CSSの導入
Content Collections	型安全なコンテンツ管理、Zodバリデーション
Markdownの書き方	記事執筆に必要な構文すべて
カテゴリ・タグ	動的ルーティング、記事のフィルタリング
デザインカスタマイズ	Tailwind CSS、レスポンシブ、ダークモード
SEO対策	sitemap、OGP、構造化データ、robots.txt
Cloudflareデプロイ	Git連携、自動ビルド、独自ドメイン設定
機能拡張	RSS、検索、コメント、アナリティクス

ここまでできれば、同じ仕組みであらゆるWebサイトが作れるようになる：

• ポートフォリオサイト ── 作品をMarkdownで管理
• 企業のランディングページ ── 高速表示でSEOに強い
• ドキュメントサイト ── 技術文書をMarkdownで整理
• 情報メディア ── カテゴリ・タグで記事を分類

プログラミングを一行も書かずに、本格的なWebサイトを世界に公開できる。 それがバイブコーディングの力だ。次は自分のブログを作って、最初の記事を書いてみよう。