Astro + Cloudflare Pages で爆速個人ブログを完全無料で構築した方法【2026年版】

個人ブログを開設する際、「WordPressで月額サーバー代を払うか」「静的サイト生成(SSG)で無料構築するか」で迷う方は多いはずです。

私は約2年間WordPressを使い続けた末に、Astro + Cloudflare Pagesに移行しました。その理由と全手順を詳しく解説します。

なぜ Astro なのか？

Astroを選んだ理由は以下の3点です：

1. Zero JS by default

Astroは、デフォルトでブラウザに送るJavaScriptをゼロにします。Reactなどで書いたコンポーネントでも、静的なHTMLとして出力されます（インタラクティブが必要な部分だけclient:loadなどで選択的にJS化できる）。

これにより、Lighthouse スコアが 95〜100 点になるのが普通です。SEO評価にも大きく有利です。

2. Markdownファイルで記事管理

記事はすべて.mdまたは.mdxファイルで管理します。GitHubと連携することで、記事の変更履歴が完全に追跡でき、バックアップも自動化されます。

3. Content Collections（Astro v5）

Frontmatter（記事のメタデータ）をTypeScriptの型で定義できます。タイポや型ミスを事前に検知できるため、記事が増えても管理が破綻しません。

構築手順

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

npm create astro@latest my-blog
cd my-blog
npm install

セットアップウィザードで以下を選択：

Template: Empty（空のテンプレート）
TypeScript: Strict recommended
Install dependencies: Yes

Step 2: Tailwind CSS のセットアップ

npx astro add tailwind

このコマンドだけで、tailwind.config.mjsの作成とastro.config.mjsへの統合が自動で行われます。

Step 3: Content Collectionの設定

src/content.config.ts を作成して、記事のスキーマを定義します：

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: 'src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    category: z.enum(['desk-setup', 'dev-tools', 'web-dev', 'books-learning']),
    tags: z.array(z.string()).default([]),
    heroImage: z.string().optional(),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Zodスキーマを使うことで、記事のFrontmatterに型安全性が保証されます。

Step 4: 記事一覧ページの作成

src/pages/index.astro：

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

// draft: true の記事を除外（本番環境のみ）
const posts = await getCollection('blog', ({ data }) => {
  return import.meta.env.PROD ? !data.draft : true;
});

// 日付順（新しい順）でソート
const sortedPosts = posts.sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

<html lang="ja">
  <head>
    <title>DevNest | エンジニアの情報発信ブログ</title>
  </head>
  <body>
    <main>
      {sortedPosts.map(post => (
        <article>
          <a href={`/blog/${post.id}`}>
            <h2>{post.data.title}</h2>
            <p>{post.data.description}</p>
          </a>
        </article>
      ))}
    </main>
  </body>
</html>

Step 5: 記事詳細ページの作成

src/pages/blog/[...slug].astro：

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

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  return posts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<html lang="ja">
  <head>
    <title>{post.data.title}</title>
    <meta name="description" content={post.data.description} />
    <!-- OGP -->
    <meta property="og:title" content={post.data.title} />
    <meta property="og:description" content={post.data.description} />
    <meta property="og:type" content="article" />
  </head>
  <body>
    <article>
      <h1>{post.data.title}</h1>
      <time>{post.data.pubDate.toLocaleDateString('ja-JP')}</time>
      <Content />
    </article>
  </body>
</html>

Step 6: RSSフィードの作成

Astroには公式の@astrojs/rssパッケージがあります：

npm install @astrojs/rss

src/pages/rss.xml.ts：

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import type { APIContext } from 'astro';

export async function GET(context: APIContext) {
  const posts = await getCollection('blog', ({ data }) => !data.draft);

  return rss({
    title: 'DevNest',
    description: 'エンジニアの情報発信ブログ',
    site: context.site!,
    items: posts.map(post => ({
      title: post.data.title,
      description: post.data.description,
      pubDate: post.data.pubDate,
      link: `/blog/${post.id}/`,
    })),
  });
}

Cloudflare Pages へのデプロイ

準備: GitHubにリポジトリを作成

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/your-name/my-blog.git
git push -u origin main

Cloudflare Pagesでプロジェクトを作成

Cloudflare Dashboard にログイン
Workers & Pages → Create → Pages → Connect to Git
GitHubリポジトリを選択
ビルド設定を以下のように設定：

設定項目	値
Framework preset	Astro
Build command	`npm run build`
Build output directory	`dist`
Node.js version	20.x

Save and Deploy をクリック

astro.config.mjs のsite設定

デプロイ後、Cloudflare PagesのURLをsiteに設定します：

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  site: 'https://your-project.pages.dev', // または独自ドメイン
  integrations: [tailwind()],
});

WordPressと比較したメリット・デメリット

比較項目	WordPress	Astro + Cloudflare Pages
月額コスト	1,000〜3,000円	0円
表示速度	普通〜遅い	爆速（LCP < 1秒）
セキュリティ	要注意（プラグイン脆弱性）	静的ファイルのみで安全
記事の書き方	GUIエディタ	Markdownファイル
バックアップ	要設定	Gitで自動管理
独自ドメイン	有料の場合あり	無料（Cloudflare管理）
学習コスト	低い	やや高い（Markdown・Git必要）

エンジニアやMarkdownに慣れている方なら、圧倒的にAstro + Cloudflare Pagesが有利です。

まとめ

Astro + Cloudflare Pagesで個人ブログを構築した結果：

✅ 維持費 0円（独自ドメインは年額数百円）
✅ Lighthouseスコア 98/100
✅ 記事の書き方がシンプル（Markdown + Git管理）
✅ デプロイが全自動（GitにPushするだけ）

WordPressのサーバー代に毎月払い続けている方は、ぜひ一度移行を検討してみてください。表示速度が爆速になることで、SEO上の評価も得やすくなります。

本記事で紹介したコードはすべてGitHubで公開しています。興味のある方はぜひ参考にしてください！