AstroブログをCloudflare Pagesにデプロイする

前回の記事「AstroでこのブログサイトをゼロからBuildしてみた」では、ローカル環境でAstroブログを動かすところまでを解説しました。

この記事では、そのブログをインターネットに公開するためのデプロイ手順を解説します。

Cloudflare Pagesとは

Cloudflare Pagesは、静的サイトをホスティングできるサービスです。

特徴内容
無料枠ビルド回数500回/月、帯域・リクエスト無制限
サイト数無制限（プロジェクト数はソフトリミット100個）
カスタムドメイン100個/プロジェクトまで無料
CDN世界300+拠点のエッジサーバーから配信
Git連携GitHub・GitLabにプッシュするだけで自動デプロイ
プレビュー環境PRごとに自動生成
HTTPS独自ドメインも含め自動で対応
エコシステムWorkers・KV・D1・R2・AIと同一プラットフォームで統合

無料枠での主な制限は以下の通りです。

制限項目無料枠
ビルド回数500回/月
同時ビルド数1個
ビルドタイムアウト20分
最大ファイル数20,000ファイル
単一ファイルサイズ25 MiB

Vercelも同様のサービスですが、Cloudflare Pagesは帯域・エグレスが完全無料である点と、Workers・R2・D1などCloudflareサービスとの親和性が強みです。エッジロケーションも300+拠点とVercelの100+拠点を大きく上回ります。このブログのような静的サイトであれば、無料枠で十分運用できます。

事前準備

GitHubリポジトリへのプッシュ

Cloudflare PagesはGitHubリポジトリと連携してデプロイを行うため、コードをGitHubにプッシュしておく必要があります。

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/your-username/your-blog.git
git push -u origin main

Cloudflareアカウントの作成

Cloudflare にアクセスし、無料アカウントを作成します。メールアドレスとパスワードだけで登録できます。

Cloudflare Pagesにデプロイする

1. Pagesプロジェクトを作成する

  1. Cloudflareダッシュボードにログイン
  2. 左サイドバーから コンピュート → Workers & Pages を選択
  3. アプリケーションを作成する をクリック
  4. Pages を導入しようとお考えですか? 始める を選択
    pages
  5. 既存の Git リポジトリをインポートする をクリック

2. GitHubリポジトリを接続する

  1. GitHubに接続 をクリックしてGitHubと連携
  2. しばらく待ちます（10分くらい待ちました）
  3. デプロイしたいリポジトリを選択

3. ビルド設定を行う

Astroプロジェクトであることを指定します。

設定項目値
Framework presetAstro
Build commandnpm run build
Build output directorydist
Root directory/（変更不要）

Framework presetで Astro を選ぶとビルドコマンドと出力ディレクトリは自動入力されます。

4. デプロイを実行する

Save and Deploy をクリックするとビルドが始まります。数分後にデプロイが完了し、your-project.pages.dev というURLでアクセスできるようになります。

以降は main ブランチにプッシュするたびに自動でビルド・デプロイが実行されます。

まとめ

Cloudflare Pagesは設定がシンプルで、Astroとの相性も良いです。
次回はGitHub Actionsによるスケジュールデプロイを組み合わせることで、記事を書いておけば指定日に自動で公開される仕組みを作ります。

参考