サイトを作るところまでは勢いで進められても、公開の段階で急に手が止まることってありますよね。

  • どこに置けばいいのか分からない
  • サーバー代はなるべくかけたくない
  • 更新のたびに面倒な作業はしたくない

そういうときにかなり相性が良いのが Cloudflare Pages です。

Astro のような静的サイトなら、無料で始めやすく、しかも更新フローがすごく軽いです。GitHub に push するだけで公開内容が更新されるので、「公開のたびに気合いがいる」という状態から抜けやすくなります。

この記事では、Cloudflare Pages の基本から、Astro サイトを公開するまでの流れ、詰まりやすいポイントまでまとめます。

Cloudflare Pagesとは？

Cloudflare Pages は、Cloudflare が提供している静的サイト向けのホスティングサービスです。

一言でいうと、GitHub とつないでおくと、push するだけでサイトを公開してくれる場所です。

この手のサービスはいくつかありますが、Cloudflare Pages の良いところは、

  • 無料で始めやすい
  • CDN 配信が速い
  • HTTPS が最初から整いやすい
  • プレビュー URL が出る

という、個人サイトやブログに必要な要素がかなり揃っていることです。

無料プランでも十分使いやすい

無料プランでも、個人ブログや小規模サイトならかなり実用的です。

  • 複数サイトを運用できる
  • Cloudflare の CDN から配信される
  • 独自ドメインも設定できる
  • HTTPS も自動で整いやすい
  • GitHub 連携で自動デプロイできる

「趣味サイトだからまずは無料で試したい」「でも雑に見える運用はしたくない」という人にちょうど良い立ち位置です。

まず結論。Astroとの相性はかなり良い

Astro はビルドすると dist に静的ファイルが出ます。Cloudflare Pages は、その dist をそのまま配信する形とすごく相性が良いです。

設定もシンプルで、基本は次の通りです。

設定項目値
フレームワークプリセットAstro
ビルドコマンドnpm run build
ビルド出力ディレクトリdist
ルートディレクトリ通常は空欄

「静的にビルドして、その成果物を CDN に載せる」という流れが綺麗にハマります。

デプロイまでの手順

1. GitHub にリポジトリを用意する

まずは手元の Astro プロジェクトを GitHub に置きます。

git init
git add .
git commit -m "Initial commit"

git remote add origin https://github.com/your-username/myblog.git
git branch -M main
git push -u origin main

ここは単なる準備に見えますが、あとが本当に楽になります。Cloudflare Pages は GitHub を起点に回すのが気持ちいいです。

2. Cloudflare アカウントを作る

Cloudflare にアクセスして無料アカウントを作成します。

既に使っているならそのままで大丈夫です。Cloudflare はドメイン管理の印象が強いですが、Pages だけ使うこともできます。

3. Pages で GitHub と接続する

ダッシュボードから Pages を開いて、プロジェクト作成へ進みます。

流れはだいたい次の通りです。

  1. 「Pages」を開く
  2. 「プロジェクトを作成」を選ぶ
  3. 「Git に接続」を選ぶ
  4. GitHub を認証する
  5. 対象リポジトリを選ぶ

ここまで来れば、あとはビルド設定を入れるだけです。

4. ビルド設定を入力する

Astro なら基本設定はかなりシンプルです。

項目設定
フレームワークプリセットAstro
ビルドコマンドnpm run build
出力ディレクトリdist
Node バージョン必要なら 18 以上に合わせる

この設定で「保存してデプロイ」を押すと、初回ビルドが走ります。

初回は少し待ちますが、通ると「あ、もう公開できた」という感覚になります。ここまで来ると公開の心理的ハードルがかなり下がります。

デプロイ後の動きがラク

Cloudflare Pages の一番ありがたい部分は、運用が楽なことです。

一度連携してしまえば、その後は基本的に

git add .
git commit -m "Update article"
git push

これだけで更新が反映されます。

ブログ運営って、書くことだけでも体力を使うので、公開作業まで重いと続きにくいんですよね。Cloudflare Pages はその「公開のめんどくささ」をかなり減らしてくれます。

プレビューURLが意外と便利

プルリクエスト単位でプレビュー URL が出るのも地味に便利です。

これがあると、

  • レイアウト変更の確認
  • モバイル表示の確認
  • 広告や導線の見え方チェック
  • 誤字脱字の最終確認

を本番公開前にやりやすくなります。

個人サイトでも、「いきなり本番」は意外と怖いので、このワンクッションがあるだけでかなり安心できます。

カスタムドメイン設定も難しくない

独自ドメインを持っている場合は、Cloudflare Pages 側で追加していけば使えます。

流れとしては、

  1. Pages プロジェクトの設定を開く
  2. 「カスタムドメイン」を選ぶ
  3. ドメインを入力する
  4. 必要な DNS を設定する

です。

もしドメイン自体を Cloudflare で管理しているなら、設定がかなり楽になります。ここまで整うと、無料運用でも見た目の「自前感」が出てきます。

環境変数も使える

API キーや外部サービス設定がある場合は、環境変数として持たせられます。

これは静的サイトでも意外と必要で、

  • フォーム連携
  • CMS 連携
  • 一部 API の切り替え

などで役立ちます。

本番用とプレビュー用で値を分けられるので、テスト時の事故を減らしやすいのも良いところです。

よくある詰まりポイント

1. 出力ディレクトリを間違える

Astro は通常 dist に出力します。ここを build などにしてしまうと失敗します。

2. Node バージョンがズレる

ローカルでは動くのに Pages では落ちる場合、Node のバージョン差が原因のことがあります。package.json やプロジェクト設定の整合を見直すと解決しやすいです。

3. 画像やパスがローカル前提になっている

絶対パスやローカル専用設定が混ざっていると、公開後に崩れることがあります。特に画像パスやリダイレクト設定は確認しておくと安心です。

4. 「デプロイできた」と「サイトが整っている」は別

公開できても、導線、タイトル、OGP、広告配置、404 ページなどが弱いと、見た目の完成度は上がりません。公開はゴールというよりスタートです。

Cloudflare Pages が向いている人

特に向いているのは、こんな人です。

  • 静的サイトを無料で公開したい
  • ブログ運営を軽く続けたい
  • GitHub ベースで更新したい
  • 表示速度を重視したい
  • 難しいインフラ管理は避けたい

逆に、複雑なサーバー処理や常時動くバックエンドが主役なら、別構成を考えた方が自然な場合もあります。

まとめ

Cloudflare Pages は、「作ったサイトを、できるだけ軽く公開し続けたい人」 にかなり向いています。

Astro と組み合わせると、

  • 速い
  • 安いというか、まず無料
  • 更新が楽
  • 本番前確認もしやすい

という、継続しやすい運用が作れます。

個人ブログや小さなメディアって、派手な機能よりも止まらず更新できることが大事だったりします。Cloudflare Pages は、その継続性をかなり支えてくれる選択肢だと思います。