Cloudflare Pagesで個人サイトを無料公開した手順

GitHubリポジトリの準備からCloudflare Pagesとの連携、ビルド設定、自動デプロイ、独自ドメイン接続までを実践的にまとめました。

Cloudflare Pagesで個人サイトを無料公開した手順

個人サイトを作っても、ホスティング費用やサーバー管理が負担になり、ローカル環境に置いたままになることがあります。私が求めていたのは、GitHubへコードを送るだけで自動的に公開され、サーバーを管理しなくてもHTTPSを利用できるシンプルな構成でした。HTML・CSS・JavaScriptで作った静的サイトにはCloudflare Pagesがよく合いました。

この記事では、GitHubリポジトリを準備し、Cloudflare Pagesと接続して、標準URLおよび独自ドメインで公開するまでの流れをまとめます。フレームワークを使わない静的サイトを基準にしていますが、React、Vite、Astroでもビルドコマンドと出力先を正しく設定すれば基本的な流れは同じです。

1. デプロイ前に準備したもの

Cloudflareアカウント、GitHubアカウントとリポジトリ、トップページ用のindex.htmlを用意しました。最小構成なら、リポジトリ直下のindex.htmlと、必要に応じてstyle.css、app.jsがあれば十分です。

アップロード前にローカルで表示し、レイアウトとリンクを確認しました。画像には、特定のパソコンでしか使えない絶対パスではなく、./images/photo.webpのようなリポジトリ内の相対パスを使用します。また、APIキー、パスワード、個人用設定が含まれていないかも確認しました。機密情報は環境変数やCloudflareのSecretとして管理する方が安全です。一度Gitへ記録された値は、後でファイルを削除しても履歴に残る可能性があります。

2. GitHubへサイトを登録する

新しいリポジトリを作り、サイトのファイルをコミットしてmainブランチへ送信しました。Cloudflare PagesのGit連携はGitHubとGitLabに対応しており、変更をプッシュするたびに自動でビルドとデプロイを実行できます。公開・非公開のどちらのリポジトリも利用できます。

Cloudflareには選択したリポジトリへのアクセス権が必要です。可能であれば、アカウント内の全リポジトリではなく、公開に使用するリポジトリだけを許可する方が安全です。

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

CloudflareのダッシュボードでWorkers & Pagesを開き、新しいアプリケーション、Pages、Git接続の順に進みました。GitHubを認証し、準備したリポジトリを選択します。

確認する主な設定は、プロジェクト名、本番ブランチ、フレームワーク、ビルドコマンド、出力ディレクトリです。プロジェクト名は標準のpages.dev URLに使われ、本番ブランチには通常mainを指定します。純粋なHTMLサイトならフレームワークなしを選び、ビルドコマンドを空欄にできる場合があります。出力ディレクトリには、実際に公開するファイルが入ったフォルダを指定します。

Viteの場合、一般的なビルドコマンドはnpm run build、出力先はdistです。ただしプロジェクトごとに異なるため、package.jsonとフレームワークの説明を確認してください。モノレポでは、サイトがあるフォルダをルートディレクトリとして指定する必要があります。

4. 最初のデプロイを確認する

設定を保存すると、Cloudflareがリポジトリを取得し、必要に応じて依存関係をインストールしてサイトを公開します。成功するとproject-name.pages.devのようなURLが発行されます。

トップページだけでなく、下層ページの直接表示、CSS・JavaScript・画像の読み込み、モバイル表示、HTTPS、存在しないURLの動作も確認しました。失敗した場合はDeployments画面のビルドログを最初に確認します。よくある原因は、出力フォルダの指定ミス、Node.jsバージョンの違い、ファイル名の大文字と小文字の不一致、Gitに追加されていない画像です。macOSでは問題が見えなかった大文字・小文字の違いが、デプロイ環境でエラーになることがあります。

5. 更新後は自動的に再デプロイされる

Git連携の便利さは、その後の運用で分かります。ローカルで修正してmainへプッシュすると、Cloudflare Pagesが新しいデプロイを開始します。FTPでファイルを送ったり、サーバーへログインしたりする必要はありません。

別ブランチやプルリクエストはプレビューデプロイで確認できます。本番URLを変更する前に、実際のWeb環境で画面と機能を確認できるため安全です。過去のデプロイ履歴を比較できる点も、問題の調査に役立ちます。

6. 独自ドメインを接続する

pages.devの標準URLだけでも利用できますが、個人サイトとして長く使うなら独自ドメインを接続できます。PagesプロジェクトのCustom domainsからドメインを追加し、案内されたDNS設定を適用します。

DNSをCloudflareで管理していれば比較的簡単です。他社で管理している場合は、指定されたCNAMEなどのレコードを正確に登録します。DNSの変更が反映されるまで時間がかかることもあります。接続後は、ルートドメインとwwwのどちらを代表URLにするか決め、もう一方を転送すると分かりやすくなります。

7. 無料でも上限は確認する

Cloudflare Pagesの無料プランは個人の静的サイトには十分余裕がありますが、無制限ではありません。公式文書では、無料プランのビルドは月500回、1サイトあたり最大20,000ファイル、静的ファイル1個の上限は25MiBです。Pages FunctionsのリクエストはWorkersプランの使用量に含まれます。

そのため、写真や動画を元のサイズのまま大量に置くのではなく、WebPなどで最適化することをお勧めします。大量のメディアが必要なら別のストレージも検討します。ホスティングが無料でもドメイン購入費用は別です。上限は変更される可能性があるため、運用前に公式のLimitsページを確認するのが安全です。

まとめ

Cloudflare Pagesの大きな利点は、サーバーを直接管理しなくてよいことでした。GitHubへのプッシュがそのままデプロイになり、HTTPSとグローバル配信も複雑な追加設定なしで使えます。

全体の流れは、ローカルでサイトを確認し、GitHubのmainへ送信し、Cloudflare Pagesでリポジトリを接続し、ビルドと出力フォルダを設定し、pages.devで検証し、必要なら独自ドメインを追加するというものです。その後の更新はGit pushで自動公開できます。

最初は設定項目が多く見えますが、一度接続すれば静的サイトの管理作業は大きく減ります。費用をかけずに個人サイトを始めたい場合に、実用的な選択肢です。

参考資料

• Cloudflare Pages Git連携: https://developers.cloudflare.com/pages/get-started/git-integration/

• Cloudflare Pagesの上限: https://developers.cloudflare.com/pages/platform/limits/