Astro + Cloudflare Pages で個人サイトを構築した

個人サイトを Astro + Cloudflare Pages で作った。この構成が個人サイトに合っていると感じたので、選定理由を書いておく。

なぜ Astro か

静的サイト生成に特化していて、ビルドが速い。出力もシンプル。Content Collections で Markdown のブログ記事を型安全に管理できるのが気に入っている。

React や Vue を使わなくてもいい。必要な箇所だけ Islands として差し込める。JavaScript をほぼ出力しないのでビルドサイズが小さく、個人ブログには十分すぎる。

なぜ Cloudflare Pages か

無料枠が手厚い。リクエスト数は無制限で、ビルドも月 500 回まで。push するだけで自動デプロイされ、PR ごとにプレビュー URL が発行される。

DNS、Web Analytics、Transform Rules と同じ Cloudflare 内で完結するのも楽。管理画面を行き来しなくて済む。

Content Collections (v6)

Astro v6 では Content Layer API に変わった。glob loader を使って Markdown を読み込む。

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

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.coerce.date(),
    draft: z.boolean().default(false),
  }),
});

デプロイ

Cloudflare Pages の GitHub 連携を設定し、ビルドコマンドを cd site && npm install && npm run build にする。あとは main ブランチに push すれば自動でデプロイされる。

コスト

ドメイン維持費以外は全部無料。Cloudflare Pages、Terraform Cloud (Free)、GitHub Actions、いずれも無料枠で収まっている。