はじめに

Cloudflare Pages は静的サイトのホスティングに最適なプラットフォームです。Astro と組み合わせることで、ビルド時に HTML を生成し、Cloudflare の CDN で世界中に高速配信できます。

なぜ Astro + Cloudflare Pages なのか

パフォーマンス

Astro はデフォルトで JavaScript をゼロにする「Islands Architecture」を採用しています。ブログのような読み物中心のサイトでは、クライアントサイド JavaScript がほぼ不要なため、最高のパフォーマンスを実現できます。

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

export default defineConfig({
  site: 'https://your-blog.pages.dev',
  integrations: [sitemap()],
  output: 'static',
});

コスト

Cloudflare Pages の無料プランで十分に運用可能です：

項目無料枠
ビルド回数500回/月
帯域幅無制限
カスタムドメイン対応

セットアップ手順

  1. Astro プロジェクトを作成する
  2. Cloudflare Pages にリポジトリを接続する
  3. ビルドコマンドを npm run build、出力ディレクトリを dist/ に設定する

ポイント: Cloudflare Pages は Git push のたびに自動でビルド・デプロイしてくれるため、CI/CD の設定が不要です。

まとめ

Astro + Cloudflare Pages は、技術ブログの構築に最適な組み合わせです。ゼロ JavaScript のパフォーマンスと、無料で無制限帯域のホスティングを活用しましょう。