Astro で Cloudflare Pages に移行した
Markdown で書けて、Git で管理できて、push すれば自動デプロイ。表示は速く、SEO に強く、初期設定も手早い。個人サイトを独自ドメイン、SSL、帯域幅無制限で運用できる。しかも全部無料。気になるなら続きをどうぞ。
なぜ Astro か?
Astro は今、私がまず選ぶフレームワークになっています。理由はいくつかあります。
高速表示と SEO
- デフォルトでは JavaScript を送らないので、ページの表示がとにかく速い
- Lighthouse スコア 99/100 が最初から出る
- メタタグと構造化データを自動生成できる
コンテンツ中心
- Markdown/MDX を標準的に扱えるので、コンテンツを好きな形で再レンダリングしやすい
- 数式向けの LaTeX サポートが組み込み
- 100 以上の言語に対応した充実したシンタックスハイライト
柔軟な開発体験
- フレームワーク非依存: 必要なところだけ React、Vue、Svelte、HTMX を使える
- 静的出力なのでどこでもホストでき、ベンダーロックインもない
Cloudflare Pages のよさ
帯域幅無制限
移行した大きな理由のひとつは、Cloudflare Pages の気前のいい無料枠で帯域幅が無制限だったことです。これなら、万一私が有名になっても請求額に不意打ちされません。
自動化された CI/CD
開発フローもすんなりしています。たとえば:
- Git からの自動デプロイ
- pull request ごとのプレビューデプロイ
- 簡単なロールバック
独自ドメイン、その他もろもろ
- エッジキャッシュ付きのグローバル CDN
- アセットの自動最適化
- 設定が簡単な独自ドメイン(ここは当然自腹です)
- SSL 証明書が組み込み
- アナリティクスが組み込み
- ドキュメントがよくできている
移行手順
実際にやったことはこうです。
-
astro-erudite テンプレートを clone
-
カスタマイズして GitHub に push
-
Cloudflare Pages を設定してデプロイ:
- Cloudflare dashboard > Compute (Workers) に移動
- GitHub リポジトリを接続
- デプロイ対象に main ブランチを選択
- フレームワークとして Astro を選択
-
独自ドメインを接続し、あとは Cloudflare に任せた
全体の手順は、これ以上ないくらい簡単でした。バージョン管理は無料で使えますし、main に push するたびにサイトが自動で再デプロイされます。
まとめ
Astro のパフォーマンス優先の設計と、Cloudflare の堅牢なインフラを組み合わせると、インターネット上に手早く居場所を作りたい開発者にとってかなりいい土台になります。いちばんいいところ? これが全部無料で使えることです。個人プロジェクトやブログには、かなり理想的な選択肢だと思います。