Cloudflare Pagesとは？
Cloudflare Pagesは、Cloudflareが提供する静的サイトホスティングサービスです。GitHubやGitLabリポジトリと連携して、プッシュするだけで自動デプロイできます。
無料プランでも以下の機能が使えます。
- 無制限のサイト数: 複数のプロジェクトを無料で運用可能
- 無制限の帯域幅: アクセス数に制限なし（無料プランは月500ビルドまで）
- CDN配信: Cloudflareの世界中のエッジサーバーから配信
- カスタムドメイン: 独自ドメインも無料で設定可能
- HTTPS自動設定: SSL証明書も自動で管理
デプロイまでの手順
1. GitHubリポジトリを作成する
まずはAstroプロジェクトをGitHubにプッシュします。
# Gitリポジトリを初期化
git init
git add .
git commit -m "Initial commit"
# GitHubにリポジトリを作成後
git remote add origin https://github.com/your-username/myblog.git
git branch -M main
git push -u origin main
2. Cloudflareアカウントを作成する
Cloudflare にアクセスし、無料アカウントを作成します。メールアドレスとパスワードだけで登録できます。
3. Cloudflare PagesでプロジェクトをConnect
- Cloudflareダッシュボードにログイン
- 左メニューから「Pages」を選択
- 「プロジェクトを作成」をクリック
- 「Gitに接続」を選択
- GitHubアカウントを認証し、リポジトリを選択
4. ビルド設定を構成する
| 設定項目 | 値 |
|---|---|
| フレームワークプリセット | Astro |
| ビルドコマンド | npm run build |
| ビルド出力ディレクトリ | dist |
| ルートディレクトリ | （空白のまま） |
「保存してデプロイ」をクリックすると、最初のデプロイが始まります。
5. デプロイ完了を確認する
数分でデプロイが完了し、*.pages.dev のURLでサイトを確認できます。
自動デプロイの仕組み
GitHubのmainブランチにプッシュするたびに、Cloudflare Pagesが自動的にビルド・デプロイを実行します。
プルリクエストを作成すると、プレビューURLも自動生成されます。本番デプロイ前に変更内容を確認できる便利な機能です。
カスタムドメインの設定
独自ドメインを持っている場合は、以下の手順で設定できます。
- Cloudflare Pagesのプロジェクト設定を開く
- 「カスタムドメイン」タブを選択
- ドメイン名を入力して「続行」
- DNSレコードを設定（Cloudflareでドメインを管理している場合は自動設定）
ドメインをCloudflareのネームサーバーに移管することで、DNSの設定が簡単になります。
環境変数の設定
APIキーや設定値は環境変数として設定できます。
- プロジェクトの設定画面を開く
- 「環境変数」セクションを選択
- 変数名と値を入力して保存
本番環境とプレビュー環境で異なる値を設定することも可能です。
まとめ
Cloudflare Pagesは、無料で高性能な静的サイトホスティングを提供しています。GitHubとの連携による自動デプロイ、グローバルCDN配信、カスタムドメイン対応と、個人ブログから小規模ビジネスサイトまで十分な機能が揃っています。
Astroで作ったサイトをCloudflare Pagesでデプロイすることで、完全無料かつ高速なWebサイトを運用できます。ぜひ試してみてください。