そもそもCloudflare Pagesって何？

Webサイトをインターネット上に公開するには、「サーバー」と呼ばれるコンピューターにファイルを置く必要がある。レンタルサーバーを借りると月数百円〜数千円かかるのが一般的。

Cloudflare Pages（以下CF Pages）は、静的なWebサイトを無料で公開できるサービス。「静的」というのは、ブログの記事やポートフォリオのように「あらかじめ作ったHTMLファイルをそのまま表示する」タイプのサイトのこと。WordPressのように裏でデータベースが動くものとは違う。

無料プランでも十分すぎる性能で、月間リクエスト数の制限もかなり緩い。個人ブログや副業の情報サイトには最適。

なぜCloudflare Pagesを選んだのか

理由 01

完全無料

サーバー代ゼロ。独自ドメインを買わなくても「プロジェクト名.pages.dev」というURLが自動で貰える。このブログのURLも「ai-fukugyo-lab-6kg.pages.dev」で、お金はかかっていない。

理由 02

速い

Cloudflareは世界中にサーバーがある大きな会社。サイトの表示速度が速い。読者がページを開いたときにサッと表示される。遅いサイトは読者が離脱するので、これは地味に重要。

理由 03

HTTPS（鍵マーク）が自動

ブラウザのURLバーに鍵マークが表示される安全な接続（HTTPS）が自動で有効になる。レンタルサーバーだと別途設定が必要だったりするが、CF Pagesは何もしなくてもHTTPS。

公開までの具体的な手順

ここからは、実際に私がやった手順を書いていく。スクリーンショットはないけれど、画面の説明を丁寧にするので安心してほしい。

Step 01

Cloudflareのアカウントを作る

まず dash.cloudflare.com にアクセスして、メールアドレスとパスワードでアカウントを作る。Googleアカウントでのログインにも対応している。無料。クレジットカードの登録も不要。

Step 02

HTMLファイルを用意する

公開したいWebサイトのHTMLファイルを用意する。「HTMLなんて書けない」と思うかもしれないけれど、ここでClaude Codeの出番。「こんなデザインのブログを作って」と伝えれば、HTMLファイルを作ってくれる。

私の場合、このブログのHTMLは全部Claude Codeに作ってもらった。デザインの要望（ダークテーマ、シンプル、記事一覧がカード型）を伝えただけ。

Step 03

Cloudflareダッシュボードで「Pages」を開く

ログイン後、左側のメニューから「Workers & Pages」をクリック。次に「Create」ボタンを押して、「Pages」タブを選ぶ。

Step 04

「Direct Upload」を選ぶ

CF PagesにはGitHub連携とDirect Upload（直接アップロード）の2つの方法がある。GitHubを使っていない非エンジニアには「Direct Upload」が簡単。「Upload assets」を選んで、HTMLファイルをドラッグ&ドロップするだけ。

プロジェクト名を入力する欄がある。ここで入力した名前がURLになる（例：「my-blog」なら「my-blog.pages.dev」）。

Step 05

ファイルをアップロードして公開

フォルダごとドラッグ&ドロップするか、ファイルを選択してアップロード。「Deploy site」ボタンを押せば、数秒〜数十秒で公開される。表示されたURLにアクセスすれば、もう世界中から見れる状態。

ポイント

トップページのファイル名は必ず「index.html」にすること。これがないと、URLにアクセスしてもページが表示されない。Claude Codeに頼めばちゃんと index.html という名前で作ってくれる。

更新したいときはどうする？

記事を追加したり、デザインを変更したいときは、修正したHTMLファイルをもう一度アップロードするだけ。CF Pagesのダッシュボードから該当プロジェクトを開いて、「Create deployment」から新しいファイルをアップすれば、数秒で反映される。

私の場合はClaude Codeで記事のHTMLファイルを作って、それをアップロードするという流れ。慣れると5分もかからない。

GitHubと連携すればもっと便利（でも必須じゃない）

もし余裕があれば、GitHub（ギットハブ）というサービスと連携すると、もっと便利になる。GitHubにHTMLファイルを置いておくと、ファイルを更新するたびにCF Pagesが自動で最新版を公開してくれる。

ただし、GitHubが分からなくても全く問題ない。Direct Uploadだけでサイトの公開・更新は完結する。私も最初はDirect Uploadだけで運用していた。

セキュリティメモ

GitHubを使う場合、リポジトリ（ファイルの保管場所）は必ず「Private（非公開）」に設定すること。Publicにすると、ソースコードが世界中に公開されてしまう。CF Pagesとの連携はPrivateリポジトリでも問題なく動く。

独自ドメインは必要？

結論：最初はいらない。

CF Pagesが自動で付けてくれる「プロジェクト名.pages.dev」のURLで十分。私のブログもこのURLで運用している。SEO（検索エンジンでの上位表示）を本格的に狙うなら独自ドメイン（例：myblog.com）があったほうがいいけれど、まずはコンテンツを充実させることのほうが大事。

独自ドメインが欲しくなったら、後からいつでも追加できる。Cloudflareのダッシュボードからドメインを購入（年額1,000円前後〜）して、CF Pagesのプロジェクトに紐づけるだけ。

私がハマったところ

ファイルの構成が分からなかった

最初、HTMLファイルだけアップすればいいのか、CSSファイルや画像も一緒にアップする必要があるのかが分からなかった。答えは「サイトで使っているファイルは全部まとめてアップする」。でもこのブログの場合、CSSはHTMLファイルの中に書いてある（インラインスタイルという方式）ので、HTMLファイル1個だけでOKだった。

アップロード後にページが白くなった

一度、ファイルをアップした直後にページが真っ白になったことがあった。原因は「index.htmlの名前が大文字になっていた（Index.html）」だけ。ファイル名は小文字で統一するのが安全。

WordPressとの比較

「ブログならWordPress（ワードプレス）じゃないの？」と思う人も多いはず。

WordPressは確かに高機能だけれど、レンタルサーバー代が月500〜1,000円かかる。プラグインの管理、セキュリティのアップデート、データベースのバックアップ……メンテナンスが結構ある。

CF Pages + HTMLファイルの組み合わせは、メンテナンスがほぼゼロ。サーバーの管理はCloudflareがやってくれるし、セキュリティの心配もほぼない。HTMLファイルを置いているだけなので、乗っ取られるリスクも極めて低い。

デメリットは「コメント機能」や「検索機能」のような動的な機能がないこと。でも個人ブログや副業の情報発信サイトなら、それらは必須ではない。

まとめ：サイトを持つハードルは限りなくゼロになった

昔は「Webサイトを作る＝HTMLを書ける人だけの特権」だった。今は違う。Claude CodeにHTMLを作ってもらって、Cloudflare Pagesにアップするだけ。かかるお金はゼロ、必要な知識もほぼゼロ。

noteやアメブロのような既存プラットフォームでブログを書くのも全然アリだけれど、「自分だけのサイト」を持つ満足感は格別。デザインも構成も自分の好きにできる。

まずは1ページだけ作って、公開してみてほしい。「自分のサイトがインターネット上にある」という感覚は、やってみないと分からない嬉しさがある。

ネルの実績

Cloudflare Pagesでブログ「AI副業ラボ」を無料運営中。HTMLは全部Claude Codeが作成。月額費用ゼロ。サーバー管理の知識ゼロ。それでもちゃんと動いている。