このブログはAstroで作り、Cloudflare Pagesにデプロイしています。構築の流れをざっくりまとめておきます。

Astroを選んだ理由

静的サイトジェネレーターはいくつか試したことがあるのですが、Astroを選んだ理由は主に2つです。

1. デフォルトでJavaScriptが少ない — ブログは基本的にテキストコンテンツなので、余計なJSを送らないAstroのアーキテクチャが合っています
2. Markdownのサポートが手厚い — Content Collectionsという仕組みで、型安全にMarkdown記事を管理できます

セットアップの手順

プロジェクト作成

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

Content Collectionの設定

src/content/config.ts にスキーマを定義します。

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

あとは src/content/blog/ にMarkdownファイルを置けば記事として認識されます。

Cloudflare Pagesへのデプロイ

Cloudflare PagesはAstroの静的出力に完全対応しています。

1. GitHubにリポジトリをpush
2. Cloudflare DashboardでPages > Create a projectから連携
3. ビルドコマンド: npm run build、出力ディレクトリ: dist を設定

これだけで自動デプロイが動くようになります。プッシュするたびにビルドが走って、数十秒で公開されます。無料枠でも十分すぎるくらい使えます。

まとめ

Astro + Cloudflare Pagesの組み合わせは、シンプルなブログには非常に良いと思いました。ビルドが速く、ランニングコストもほぼゼロ。Content Collectionsのおかげでコンテンツ管理も楽です。