Cloudflare Pagesで無料サイトを公開する流れ

Cloudflare Pagesで個人開発サイトを無料枠中心に公開する流れを、準備、デプロイ、独自ドメイン、公開前チェックまで作業ログとして整理します。

個人開発でWebサイトを作ったとき、最初に迷いやすいのが「作ったサイトをどこに公開するか」です。レンタルサーバーを契約する方法もありますが、静的サイトや軽いフロントエンドサイトなら、 Cloudflare Pagesを使うことで、費用を抑えながら公開まで進められます。

ただし、「無料で公開できる」という理由だけで選ぶと、あとから独自ドメイン、ビルド設定、URLの正規化、 sitemap.xml、robots.txt、問い合わせページなどでつまずくことがあります。この記事では、個人メディアや小さなWebサービスを公開する前提で、Cloudflare Pagesを使った公開手順と、公開後に確認しておきたいポイントをまとめます。

Cloudflare Pagesとは

Cloudflare Pagesは、HTML、CSS、JavaScriptなどで構成されたWebサイトを公開できるホスティングサービスです。 GitHubやGitLabのリポジトリと連携しておけば、コードをpushしたタイミングで自動的にビルドとデプロイが実行されます。

特に、個人ブログ、ポートフォリオ、サービス紹介ページ、静的サイトジェネレーターで作ったサイトと相性が良いです。サーバーを自分で管理する必要がないため、インフラに時間をかけすぎず、記事作成や機能改善に集中しやすいのがメリットです。

この記事でできるようになること

この記事のゴールは、ローカルで作ったサイトをGitHubに置き、Cloudflare Pagesへ接続し、公開URLで表示を確認できる状態にすることです。

Cloudflare Pagesでサイトを公開する基本の流れがわかる
GitHubリポジトリとの連携方法がわかる
ビルドコマンドと出力ディレクトリの考え方がわかる
独自ドメインをつなぐときの注意点がわかる
公開後に確認すべき基本項目がわかる

最初から複雑なCI/CDや細かいブランチ運用を作り込む必要はありません。まずは「安全に公開できる最小構成」を作り、あとから独自ドメイン、アクセス解析、Search Console、記事テンプレートの改善などを足していく方が、個人開発では進めやすいです。

Cloudflare Pagesが向いているサイト

Cloudflare Pagesは、すべてのWebサイトに万能というより、特に 静的に生成できるサイトやフロントエンド中心のサイトに向いています。

個人ブログ
技術ブログ
ポートフォリオサイト
サービス紹介ページ
ランディングページ
Astro、Vite、Hugoなどで生成した静的サイト
問い合わせフォームや外部サービスを組み合わせた小規模サイト

一方で、画像や動画を大量に配信するサイト、ユーザー投稿型の大規模サービス、サーバー側で重い処理を行うアプリケーションでは、Pagesだけで完結させるのは難しい場合があります。その場合は、専用ストレージ、データベース、認証基盤、バックエンドAPIなどを組み合わせて設計する必要があります。

準備するもの

Cloudflare Pagesでサイトを公開する前に、以下を用意しておきます。

Cloudflareアカウント
GitHubまたはGitLabのリポジトリ
公開したいサイトのソースコード
Node.jsを使う場合は、ローカルでビルドできる状態のプロジェクト
必要に応じて独自ドメイン

秘密情報はリポジトリに入れない

APIキー、管理者パスワード、アクセストークン、メール送信用の認証情報などは、ソースコードに直接書かないようにします。公開リポジトリに一度出してしまった秘密情報は、あとから削除しても安全とは言い切れません。誤って公開した場合は、削除だけでなく、キーの無効化や再発行まで行う前提で考えましょう。

公開までの全体像

Cloudflare Pagesでサイトを公開する流れは、大きく分けると以下のようになります。

サイトのソースコードを用意する
GitHubなどのリポジトリにpushする
Cloudflare Pagesでリポジトリを接続する
ビルドコマンドと出力ディレクトリを設定する
デプロイ結果を確認する
必要に応じて独自ドメインを設定する
公開後の基本チェックを行う

ここからは、それぞれの手順を順番に見ていきます。

1. サイトのソースコードを用意する

まずは、公開したいサイトのソースコードを用意します。 HTML、CSS、JavaScriptだけで作った静的サイトでも、ViteやAstroなどのフレームワークを使ったサイトでも問題ありません。

この時点で、ローカル環境で表示確認を済ませておくと安心です。特に、画像パス、CSSの読み込み、リンク先、スマホ表示は、公開後に崩れやすいポイントです。

ローカルで確認しておきたいこと

トップページが表示される
記事ページや下層ページに移動できる
画像が正しく表示される
CSSが読み込まれている
スマホ幅でレイアウトが崩れていない
不要なテストページや下書きページが残っていない

2. GitHubリポジトリにpushする

次に、サイトのソースコードをGitHubなどのリポジトリに置きます。 Cloudflare PagesはGitリポジトリと連携できるため、変更履歴を残しながら公開作業を進められます。

個人開発では、最初から複雑なブランチ運用を作る必要はありません。まずはmainブランチに公開用のコードを置き、サイトが安定してきたら、必要に応じて開発用ブランチを分けるくらいで十分です。

Gitで管理しておくメリット

Gitで管理しておくと、いつ、どのファイルを変更したのかが残ります。デプロイ後に表示が崩れた場合でも、直前の変更を確認できるため、原因を探しやすくなります。

3. Cloudflare Pagesでリポジトリを接続する

Cloudflareの管理画面を開き、Pagesのプロジェクトを作成します。 Git連携を選び、公開したいGitHubリポジトリを選択します。

初回連携時には、CloudflareがGitHubリポジトリへアクセスできるように許可を求められます。すべてのリポジトリを許可する必要がない場合は、公開したいリポジトリだけを選んで許可すると管理しやすいです。

Git連携にしておくと、リポジトリに変更をpushしたタイミングで自動的にデプロイされます。手動アップロードよりも変更履歴を追いやすいため、継続運用するサイトではGit連携がおすすめです。

4. ビルドコマンドと出力ディレクトリを設定する

フレームワークを使っている場合は、ビルドコマンドと出力ディレクトリを正しく設定します。ここを間違えると、ビルドは成功しているのにページが表示されない、または古いファイルが公開されることがあります。

構成	Build commandの例	出力ディレクトリの例
静的HTMLのみ	空欄	プロジェクト構成に合わせる
Vite	`npm run build`	`dist`
Astro	`npm run build`	`dist`
Hugo	`hugo`	`public`
Next.jsの静的出力	`npm run build`	設定内容に合わせる

迷ったときは、ローカルでビルドを実行し、どのフォルダにHTMLやCSS、JavaScriptが出力されているかを確認します。 Cloudflare Pagesに指定するのは、基本的にはソースコードの場所ではなく、 公開用ファイルが生成された出力先です。

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

設定が終わると、Cloudflare Pagesで最初のデプロイが実行されます。初回デプロイでは、成功・失敗に関係なくビルドログを確認しておきましょう。

個人開発では「とりあえず表示されたからOK」と考えがちですが、ログを読んでおくと、次にエラーが出たときの切り分けがかなり楽になります。

デプロイ失敗時によくある原因

Node.jsのバージョンが合っていない
依存パッケージのインストールに失敗している
ビルドコマンドが間違っている
出力ディレクトリの指定が違っている
環境変数が未設定になっている
画像ファイル名の大文字・小文字がローカル環境と本番環境でズレている

エラーが出た場合は、エラー文をそのまま作業メモに残しておくのがおすすめです。次に同じようなサイトを作るとき、過去のメモがそのままトラブル対応の資料になります。

6. 公開URLで表示を確認する

デプロイが成功すると、Cloudflare Pagesのサブドメインで公開URLが発行されます。まずはそのURLにアクセスして、主要ページが正しく表示されているかを確認します。

トップページが表示されるか
記事ページや下層ページへ移動できるか
画像、CSS、JavaScriptが読み込まれているか
スマホ表示で横スクロールが出ていないか
存在しないURLにアクセスしたときに404ページが表示されるか

公開直後は、細かいデザイン調整よりも、まずは「ユーザーが普通に読める状態か」を確認します。トップページだけ整っていても、記事一覧、記事詳細、問い合わせ、プロフィールなどへの導線が弱いと、サイト全体として使いにくく見えてしまいます。

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

Cloudflare Pagesのサブドメインで問題なく表示できたら、必要に応じて独自ドメインを接続します。独自ドメインを使う場合は、wwwあり・なしのどちらを正規URLにするかを最初に決めておくと、あとからURL管理で迷いにくくなります。

たとえば、以下のように方針を決めておきます。

正規URLは ttps://example.com/ にする
www.example.com は正規URLへリダイレクトする
記事ページのcanonicalも正規URLに合わせる
外部サービスに登録するURLも正規URLに揃える

URLの表記がバラバラになると、同じページが複数のURLで存在しているように見えることがあります。小さなサイトでも、最初にURLの方針を決めておくと後の修正が少なくなります。

公開直後に確認したい基本ファイル

サイトを公開したら、記事を増やす前にクロールやユーザー導線に関係する基本ファイルを確認します。ここが雑だと、せっかく記事を書いてもサイト構造がわかりにくくなります。

最低限確認したい項目

/sitemap.xml に公開したいURLだけが入っている
/robots.txt で不要なページを適切に制御している
存在しないURLにアクセスしたとき404ページが表示される
問い合わせページまたは連絡手段がある
プライバシーポリシーページがある
プロフィールまたは運営者情報がある
記事一覧から各記事へ自然に移動できる
スマホで読みにくいレイアウトになっていない

特に個人メディアとして長く運用するなら、記事本文だけでなく、サイト全体の信頼感も大切です。記事がいくつかあっても、運営者情報や問い合わせ先が見つからないサイトは、読者にとって不安に見えることがあります。

サイトとして信頼されやすくするためのポイント

Cloudflare Pagesで公開するだけなら、数分で終わる場合もあります。しかし、長く読まれるサイトにするには、公開後の整備が重要です。

手順だけでなく判断理由を書く

「どのボタンを押すか」だけを書いた手順記事は、他のサイトと似た内容になりやすいです。そこで、なぜその設定にしたのか、どこで迷いやすいのか、個人開発では何を優先すべきかまで書くと、読者にとって役立つ記事になります。

たとえば、この記事では「最初から複雑なCI/CDを作らない」「独自ドメインの正規URLを早めに決める」「公開直後はデザインより基本ファイルの確認を優先する」といった、実際の運用に近い観点を入れています。

固定ページを用意する

個人サイトでも、最低限の固定ページを用意しておくと信頼感が出ます。特に、問い合わせ先や運営者情報があると、読者が安心してサイトを利用しやすくなります。

運営者情報またはプロフィール
お問い合わせ
プライバシーポリシー
免責事項
サイトマップまたはカテゴリ一覧

プライバシーポリシーは、アクセス解析ツール、問い合わせフォーム、Cookieなど、自分のサイトで実際に使っているものに合わせて内容を調整します。テンプレートをそのまま貼るだけでなく、サイトの運用実態に合わせることが大切です。

内部リンクを整理する

1記事だけが孤立しているサイトよりも、関連記事、カテゴリページ、トップページへ自然に移動できるサイトの方が読みやすくなります。記事の下には、関連するテーマの記事へのリンクを置いておくと、読者が次に読む内容を見つけやすくなります。

Cloudflare Pagesで独自ドメインを設定する方法
Search Consoleにsitemap.xmlを送信する手順
個人ブログ公開前のチェックリスト
静的サイトで問い合わせフォームを作る方法

Cloudflare Pagesの無料枠で気をつけること

Cloudflare Pagesは個人開発の公開先として便利ですが、無料で使える範囲や仕様は将来変わる可能性があります。料金、ビルド回数、帯域、機能制限などは、使い始めるタイミングで公式情報を確認しておくと安心です。

また、Pagesはサイト公開には便利ですが、すべてのデータ置き場として使うものではありません。記事用画像は圧縮し、動画や大容量ファイルは専用の配信サービスやストレージを検討した方が、表示速度や運用面で安定しやすくなります。

画像を使うときのポイント

記事内の画像は、見た目だけでなく読みやすさにも影響します。画像サイズを圧縮し、内容が伝わるファイル名とalt属性を設定しておくと、読者にも検索エンジンにも親切です。手順記事では、画面キャプチャを大量に並べるより、全体像を示す図解を1枚置いてから細かい手順を説明すると読みやすくなります。

公開前チェックリスト

最後に、Cloudflare Pagesで公開したあとに確認したい項目をまとめます。公開作業そのものよりも、公開後の見直しでサイトの完成度が大きく変わります。

公開前に見るところ

トップページから主要記事へ自然に移動できる
記事ページから関連記事やカテゴリへ移動できる
スマホ幅で横スクロールが出ていない
画像が重すぎない
OGP画像、タイトル、説明文がSNSで崩れない
sitemap.xml に公開したいURLだけが入っている
robots.txt で不要なページを制御している
問い合わせフォーム、または連絡手段がある
プライバシーポリシー、運営者情報、免責事項がある
404ページが不自然な空白ページになっていない
外部サービスに登録する正規URLが決まっている
古いテストページや下書きページが公開されていない

まとめ

Cloudflare Pagesを使うと、個人開発のサイトを比較的手軽に公開できます。 GitHubと連携しておけば、コードをpushするだけで自動的にデプロイできるため、小さなサイトを素早く公開したいときに便利です。

ただし、公開できた時点で完成ではありません。公開URLで表示を確認し、sitemap.xml、robots.txt、スマホ表示、問い合わせ導線、固定ページを整えてからが本当の運用開始です。

まずは最小構成で公開し、問題なく表示できる状態を作りましょう。そのあとで、独自ドメイン、内部リンク、アクセス解析、検索エンジン向けの設定を少しずつ整えていくと、個人開発でも無理なくサイトを育てていけます。

次にやると効果的なこと

独自ドメインを設定する
Google Search Consoleにサイトを登録する
sitemap.xml を送信する
主要ページのURLを検査する
カテゴリページと関連記事リンクを整える
記事テンプレートを作って、更新しやすい形にする