Logo Ernie.SG
Astro で Cloudflare Pages へ移行する

Astro で Cloudflare Pages へ移行する

2025年2月10日
約2分で読めます
Table of Contents

Astro で Cloudflare Pages へ移行する

Markdown で記事を書き、バージョン管理と自動デプロイを享受し、爆速の SEO とセットアップを手に入れ、個人サイトで SSL と無制限帯域幅付きの独自ドメインを使いたいですか?しかも全部無料で。なら、続きをどうぞ!

なぜ Astro なのか?

Astro は、いくつかのかなり強い理由から私の第一候補のフレームワークになりました。

超高速な SEO

  • デフォルトで JavaScript ゼロなので、ページ読み込みがとにかく速い
  • 初期状態で 99/100 の Lighthouse スコア
  • メタタグと構造化データを自動生成

コンテンツ主導

  • Markdown/MDX が第一級でサポートされるので、コンテンツを好きな形で再レンダリングしやすい
  • 数式向けのネイティブ LaTeX サポート
  • 100以上の言語に対応した豊富なシンタックスハイライト

柔軟な開発者体験

  • フレームワーク非依存:必要な場所で React、Vue、Svelte、HTMX を使える
  • 静的出力なのでどこにでもホスティングでき、ベンダーロックインがない

Cloudflare Pages の利点

無制限帯域幅

切り替えた主な理由の一つは、Cloudflare Pages の手厚い無料枠が無制限帯域幅を提供していることでした。つまり、万が一私が有名になっても、予想外の請求は来ないということです!

自動 CI/CD

開発ワークフローもかなりスムーズです。

  • Git からの自動デプロイ
  • プルリクエスト向けのプレビューデプロイ
  • 簡単なロールバック

独自ドメインなど

  • エッジキャッシュ付きのグローバル CDN
  • 自動アセット最適化
  • 簡単に設定できる独自ドメイン(もちろん、これは自分で支払う必要があります)
  • 組み込み SSL 証明書
  • 組み込みアナリティクス
  • ドキュメントが良い

移行プロセス

そのために、私は次のことをしました。

  1. astro-erudite テンプレートをクローン

  2. カスタマイズして GitHub へプッシュ

  3. Cloudflare Pages を設定してデプロイ:

    • Cloudflare ダッシュボード > Compute (Workers) へ移動
    • GitHub リポジトリを接続
    • デプロイ対象として main ブランチを選択
    • フレームワークとして Astro を選択
  4. 独自ドメインを接続し、あとは Cloudflare に任せました

全体のプロセスはこれ以上ないほど簡単でした。無料のバージョン管理が手に入り、main へプッシュするたびにサイトが自動で再デプロイされます。

まとめ

Astro のパフォーマンス優先の設計と Cloudflare の堅牢なインフラを組み合わせると、インターネット上にさっと居場所を作りたい開発者にとってかなり良い土台になります。いちばん良いところは?全部無料で使えることです。個人プロジェクトやブログには理想的な選択肢です。