Astro 6 + Cloudflare Workers でポートフォリオサイトを作った

このポートフォリオサイトを Astro 6 + Cloudflare Workers で構築したので、構成をまとめておく。

技術スタック

• Astro 6 — アイランドアーキテクチャで JS を最小化。このサイトはほぼ JS ゼロ
• Cloudflare Workers — @astrojs/cloudflare アダプタで SSR 対応。ただし基本は全ページプリレンダリング
• Content Collections — ブログ記事と制作物を型安全に管理
• 素の CSS + Custom Properties — 依存ゼロ。ダークテーマのトークンを tokens.css に集約

レンダリング方針

output: "server" にしつつ、各ページで export const prerender = true を宣言してビルド時に静的化している。

export const prerender = true;

これで Cloudflare 上では静的アセットとして配信され、初期表示が速い。動的な処理が必要になったページだけ SSR に切り替えられる。

コンテンツ管理

記事は Markdown で書き、Content Collections のスキーマでフロントマターを検証する。

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

draft: true の記事は本番ビルドから除外されるので、書きかけの記事を安心してコミットできる。

デプロイ

pnpm deploy 一発で astro build && wrangler deploy が走る。プレビューも Wrangler 経由なので、ローカルで本番同等の Workers ランタイムを確認できるのが良い。