Cloudflare Pagesで個人ブログを無料公開してみる

はじめに

個人開発を始めると、最初に地味に詰まるのが公開環境です。

アプリ本体を作る前に、LPを置きたい。技術ブログを公開したい。ポートフォリオを用意したい。そう思っても、いざ公開しようとすると、ホスティング、独自ドメイン、SSL、GitHub連携、ビルド設定、環境変数など、細かい判断が一気に出てきます。

VercelやNetlifyを使えばすぐに公開できます。ただ、Cloudflare Pagesもかなり強い選択肢です。静的サイトであれば、GitHubにpushするだけでデプロイでき、独自ドメインも扱いやすく、CloudflareのCDN上で配信されます。

今回は、まずCloudflare Pagesで静的サイトを公開するところだけに絞って試します。

AI機能やLLMOpsの話はこの記事では扱いません。まずは、個人開発者が「ブログ、LP、ポートフォリオをCloudflareに置ける」状態を作るのが目的です。

今回作るもの

今回は、Astroで小さな静的サイトを作ります。

内容は、個人ブログのトップページ、記事一覧、記事詳細ページだけです。DBも認証もAPIも使いません。最小構成でCloudflare Pagesにデプロイします。

構成は次のようにします。

Browser
  ↓
Cloudflare Pages
  ↓
Static HTML / CSS / JS

技術構成は次のとおりです。

Astro
Cloudflare Pages
GitHub
Custom Domain

この記事で確認することは、次の5つです。

• Astroで静的サイトを作れるか
• GitHub連携でCloudflare Pagesにデプロイできるか
• pushするだけで再デプロイされるか
• 独自ドメインを設定できるか
• ローカル開発と本番公開で詰まる点はどこか

なぜCloudflare Pagesを使うのか

静的サイトの公開先としては、Vercel、Netlify、GitHub Pagesなど、いくつか選択肢があります。

その中でCloudflare Pagesを試す理由は、Cloudflareの他サービスへ広げやすいからです。

最初は静的サイトだけで十分です。しかし、個人開発を続けていると、問い合わせフォーム、画像配信、API、認証、AI機能、Bot対策などを後から足したくなります。

Cloudflare Pagesを入口にしておくと、Workers、R2、KV、D1、Turnstileなどに広げやすいです。最初から全部使う必要はありませんが、あとから拡張できる余地があるのは安心です。

この記事では、まずPagesだけを使います。複雑にしすぎると、静的サイト公開という本題がぼやけるためです。

セットアップ

まずAstroプロジェクトを作ります。

npm create astro@latest cloudflare-pages-blog
cd cloudflare-pages-blog
npm install
npm run dev

ローカルで起動して、ブラウザで確認します。

npm run dev

最初はテンプレートのままで構いません。ここで重要なのは、デザインではなく、Cloudflare Pagesへデプロイする流れを確認することです。

ビルド設定

Astroの静的サイトとしてビルドします。

npm run build

ビルド結果は通常 dist に出力されます。

Cloudflare Pagesでは、次のように設定します。

Framework preset: Astro
Build command: npm run build
Build output directory: dist

GitHubリポジトリとCloudflare Pagesを連携し、mainブランチへのpushをトリガーにデプロイします。

デプロイしてみる

GitHubにpushします。

git init
git add .
git commit -m "Initial Astro site"
git branch -M main
git remote add origin git@github.com:your-name/cloudflare-pages-blog.git
git push -u origin main

Cloudflare Pagesの管理画面からGitHubリポジトリを選び、ビルド設定を入力してデプロイします。

初回デプロイが成功すると、Cloudflare Pagesのサブドメインでサイトが公開されます。

https://your-project.pages.dev

ここまで来れば、静的サイトの公開自体は完了です。

独自ドメインを設定する

次に、独自ドメインを設定します。

Cloudflareでドメインを管理している場合、PagesのCustom domainsからドメインを追加するだけで設定できます。Cloudflare外でドメインを管理している場合は、DNSレコードの設定が必要になります。

ここは実際に試しながら、次の点を確認します。

• apex domainで公開するのか
• subdomainで公開するのか
• DNS反映にどれくらい時間がかかるのか
• HTTPS証明書が自動で有効になるのか

個人ブログなら、最初は blog.example.com のようなサブドメインで試すのが安全です。既存サイトがある場合、apex domainをいきなり切り替えると影響範囲が大きくなります。

詰まりそうなところ

実際に進める前から、いくつか詰まりどころが予想できます。

1つ目は、ビルド出力ディレクトリの指定です。Astroなら基本は dist ですが、フレームワークや設定によって変わります。Cloudflare Pages側のBuild output directoryが間違っていると、ビルドは通ってもページが表示されません。

2つ目は、Node.jsのバージョンです。ローカルでは動いているのにCloudflare Pagesのビルド環境では落ちる場合があります。必要であれば、.node-version や環境変数でNode.jsバージョンを固定します。

3つ目は、画像やパスの扱いです。相対パス、base path、public配下のファイル参照が、本番で崩れることがあります。特にGitHub Pagesから移行する場合、base pathの設定が残っているとハマりそうです。

4つ目は、独自ドメインのDNSです。Cloudflare管理下のドメインならかなり楽ですが、外部DNSを使っている場合は、CNAMEやTXT検証で少し手間取る可能性があります。

スクリーンショットとして残すもの

この記事では、次のスクリーンショットを残します。

• ローカルで表示したAstroサイト
• Cloudflare Pagesのプロジェクト作成画面
• ビルド設定画面
• 初回デプロイ成功画面
• pages.devで公開されたサイト
• Custom domains設定画面
• 独自ドメインで表示されたサイト

特に、ビルド設定とデプロイ結果は読者が再現するときに役立つので、必ず残します。

この記事で言いたいこと

Cloudflare Pagesは、静的サイトを公開するだけならかなり素直に使えます。

個人開発では、アプリ本体を作る前に、LP、ブログ、ポートフォリオのような外側の置き場が必要になります。そこに時間をかけすぎると、本来作りたいものに進めません。

Cloudflare Pagesを使えば、GitHubにpushするだけで公開でき、独自ドメインも設定しやすい。まずはこの入口を作っておくと、その後にWorkers、R2、D1、Turnstile、AI Gatewayなどへ拡張しやすくなります。

ただし、最初から全部Cloudflareに寄せる必要はありません。今回の記事ではPagesだけを使い、静的サイト公開の最小構成に絞ります。

次の記事では、静的サイトに問い合わせフォームやAPIを足す場合に、Cloudflare Workersをどう組み合わせるかを試していきます。