Cloudflareで、作ったページを無料で公開する方法
AttachStyleのツールで作ったページ（index.htmlなど）を、レンタルサーバーやWordPressがなくても、無料でインターネットに公開する方法をまとめました。FRIENDGATEで作ったLPを例に、登録から公開・修正までを順番に説明します。
Cloudflareとは
Cloudflare（クラウドフレア）は、世界中のWebサイトの表示を速く・安全にする仕組みを提供している会社です。その機能のひとつに、作ったページのファイルを置くだけで公開できるサービスがあり、個人でも無料で使えます。
サーバー代0円
ファイルを置くだけのページなら、アクセスが増えても料金はかかりません。
表示が速い
世界中のCloudflareのサーバーから配信されるので、スマホでもサッと開きます。
安全な通信に自動対応
「https://」で始まる安全なURLが、設定なしで使えます。
ドラッグで公開
フォルダを画面にドラッグするだけ。むずかしい操作やコマンドはいりません。
公開できるもの
- HTML・CSS・JavaScript・画像だけでできたページ
- AttachStyleのツールでダウンロードしたページ（FRIENDGATEのLPなど）
- リンク集・プロフィールページ・告知ページ
公開できないもの
- WordPressのブログ
- PHPで動くツール（お問い合わせフォームなど、サーバーで処理するもの）
- データベースを使うもの
全体の流れ
- 1無料登録メールアドレスでアカウントを作る
- 2サブドメインを決めるURLに入る名前を最初に1回だけ
- 3フォルダを用意公開するファイルをまとめる
- 4ドラッグで公開名前を付けてDeploy
- 5確認・修正URLを開く・中身を入れ替える
公開の手順
上から順に開いて進めてください。画面のボタン名は英語ですが、押す場所は決まっているので安心してください。
1Cloudflareに無料登録する
Cloudflareの公式サイトで「Sign up（新規登録）」を選び、メールアドレスとパスワードを入れてアカウントを作ります。届いた確認メールのリンクを開くと、管理画面（ダッシュボード）が使えるようになります。
途中でプランの案内が出ることがありますが、ページを公開するだけなら無料のままで使えます。
2公開用のサブドメインを決める（最初に1回だけ）
Cloudflareで公開したページのURLは、次のような形になります。
サブドメインは、最初はメールアドレスをもとに自動で付けられています。公開したURLは誰でも見られるので、ページを公開する前に、あなたの名前やブランド名に変えておきましょう。
- 左のメニューの「Compute」から「Workers ＆ Pages」を開く
- サブドメイン（〇〇.workers.dev）の欄で、変更（Change）を選ぶ
- 新しいサブドメインを半角英数字で入れて「Continue」を押す
- 確認画面で「Update」を押す
「前のサブドメインのURLは使えなくなる」「新しいURLが使えるまで数分かかる」という念押しです。公開前に変えておけば、困ることはありません。
3公開するフォルダを用意する
パソコンに新しいフォルダを1つ作り、公開したいファイルを入れます。最初に表示されるページのファイル名は、必ず index.html にしてください。
ツールの「ページをダウンロード」で保存した index.html を入れます。PREMIUMでカード画像（OGP）を使う人は、一緒にダウンロードされる ogp.jpg も同じフォルダに入れます。
4フォルダをドラッグして公開する
- ダッシュボードのホーム画面にある「Ship something new」の点線の枠（Drop a folder, or a zip）に、フォルダごとドラッグする
- アップロードの画面で、ファイルの一覧に index.html が入っていることを確かめる
- 「Worker name」を、半角英数字とハイフンで分かりやすい名前に変える（例：line-gift）。この名前がURLの最初の部分になります
- 「Deploy」を押す
index.htmlだけをドラッグするのではなく、入れたフォルダごとドラッグするのがポイントです。
5URLを開いて確認する
公開が終わると、ページの管理画面に切り替わります。右上の「Visit」を押すと、公開したページが開きます。パソコンだけでなく、スマホでも開いて表示を確かめましょう。
サブドメインを変えた直後や初めて公開した直後は、安全な通信の準備（証明書の発行）に数分かかることがあります。5〜15分ほど待ってから再読み込みするか、シークレットウィンドウで開いてみてください。
6ページを修正する（同じURLのまま差し替え）
- ツールなどでページを直して、新しい index.html を用意する
- 前回アップしたフォルダの index.html を、新しいものに置き換える（ファイル名は index.html のまま）
- ダッシュボードで「Workers ＆ Pages」を開き、公開中のページ（例：line-gift）を選ぶ
- 右上の「New deployment」を押し、フォルダごとドラッグして「Deploy」を押す
- 「Visit」で開いて、直した内容になっているか確かめる（変わっていないときは再読み込み）
管理画面の見方
公開したページを選ぶと、こんな画面が開きます。見るのは番号のところだけで大丈夫です。
- 1公開中のURLクリックするとページが開きます。右側は最後にアップした時間です。
- 2Visit／New deploymentVisitでページを開く、New deploymentで中身を差し替えます。
- 3機能のつながりの図Domains・Workers・Bindingsなど。ファイルを置くだけのページでは触らなくて大丈夫です。
- 4Deploymentsこれまでのアップの履歴です。「Ready」なら公開できています。
- 5Domains and routes公開中のURLの一覧です。自分のドメインを使うときもここで設定します。
ファイルを置くだけのページは、アクセスしても料金がかからない代わりに、Cloudflare側ではアクセス数を表示しません。アクセス数を知りたいときは、GA4（Googleアナリティクス）などを使いましょう。
事例：FRIENDGATEで作ったLPを公開する
FRIENDGATEは、公式LINEの友だち追加ページを入力するだけで作れるツールです。作ったページはファイル1つ（index.html）にまとまるので、Cloudflareとの相性がぴったりです。
FRIENDGATEで作って、このガイドの手順どおりCloudflareに置いたページです。サーバー代はかかっていません。
うまくいかないときは
「このサイトは安全に接続できません」と表示される
公開やサブドメイン変更の直後は、安全な通信の準備に数分かかります。5〜15分ほど待ってから再読み込みするか、シークレットウィンドウで開いてみてください。
ページが真っ白、または「見つかりません」と出る
最初に表示するファイルの名前が index.html になっているか確かめてください。ファイルだけをドラッグした場合は、フォルダに入れてからフォルダごとアップし直します。
修正したのに、前の内容のまま表示される
ブラウザに前のページが残っていることがあります。再読み込みするか、シークレットウィンドウで開いてみてください。New deploymentで新しいフォルダをアップしたかも確認しましょう。
URLにメールアドレスの一部が入っている
サブドメインが自動で付いたままになっています。手順2の方法で、あなたの名前やブランド名に変えてください。変えたあとは、新しいURLをSNSに貼り直します。
よくある質問
本当に無料で使えますか？
はい。ファイルを置くだけのページは、アクセスが増えても無料で公開できます。クレジットカードの登録も必要ありません。
ページはいくつまで公開できますか？
ページ（Worker）ごとに名前を変えれば、いくつも公開できます。案件ごとにフォルダを分けて、それぞれ別の名前で公開すると管理しやすくなります。
自分のドメイン（独自ドメイン）でも公開できますか？
できます。管理画面の「Domains and routes」から設定しますが、ドメインの設定が必要になるので、まずは workers.dev のURLで始めるのがおすすめです。
WordPressのブログを持っている場合は？
レンタルサーバーのファイルマネージャーでフォルダを作り、index.htmlを置けば、自分のドメインで公開できます。どちらでも作ったページの中身は同じなので、使いやすいほうを選んでください。