LP公開手順書
(Cloudflare Pages利用)

納品されたLPデータをCloudflare Pagesで
公開する方法をご案内します。

☁️
🟠 Cloudflare Pages とは

Webサイトを世界中に高速・安全に公開できる無料のホスティングサービスです。

※ 無料枠について

Cloudflare Pages(無料)Netlify(無料)
転送量✔ 無制限月100GBまで
サイト数✔ 無制限無制限
クレジット消費✔ なし機能により消費あり

LPを掲載するだけの用途なら、無料枠を超えることはほぼありません。

Cloudflareにログイン(または新規登録)する

以下のURLにアクセスしてください。

URLhttps://dash.cloudflare.com/login
ログイン画面
▲ GoogleアカウントやAppleアカウントでもログインできます。
初めての方は「Don't have an account? Sign up」から無料登録してください。
左メニューの「Compute」→「Workers & Pages」をクリック

ログインすると以下のようなダッシュボードが表示されます。
左側のメニューを見て、「Build」グループの中にある「Compute」をクリックしてください。

⚠️
「Workers & Pages」は左メニューの「Build」→「Compute」の中に隠れています。
直接見えていない場合は「Compute」をクリックして展開してください。
Cloudflare Pages の作成画面を開く
① 「Create application」をクリック

Workers & Pages の画面が開いたら、右上の青いボタンをクリックします。

Workers & Pages画面
▲ 右上の 「Create application」 ボタンをクリックしてください。
② ダイアログ下部の「Get started」をクリック

ダイアログが開きます。一番下の小さな文字「Looking to deploy Pages? Get started」をクリックします。

Create applicationダイアログ
▲ 「Upload your static files」ではなく、一番下の「Get started」リンクをクリックしてください。ここがCloudflare Pagesの入口です!
⚠️
「Upload your static files」を選ぶとPagesではなくWorkersとして作成されます。
必ず一番下の小さい「Get started」リンクをクリックしてください。
③ 「Drag and drop your files」の「Get started」をクリック
Get started with Pages
▲ 下側の 「Drag and drop your files」の「Get started」 をクリックします。
(上の「Import an existing Git repository」は今回使いません)
納品データを準備する

納品されたZIPファイルを用意するだけでOKです。解凍(展開)する必要はありません!

💡 ZIPファイルのままアップロードできます
Cloudflare PagesはZIPファイルを直接受け付けてくれます。受け取ったZIPファイルをそのまま使いましょう。
📦 ○○○.zip ← このままでOK!解凍しなくてよい
プロジェクト名を入力してファイルをアップロードする
① プロジェクト名を入力して「Create project」をクリック

「Project name」の欄に名前を入力して 「Create project」 をクリックします。

プロジェクト名入力
▲ 「Project name」に好きな名前を入力します。
入力すると下に「Your project will be deployed to 〇〇.pages.dev」とURLのプレビューが表示されます。
⚠️
プロジェクト名は英数字とハイフン(-)が使用できます。(日本語・スペースは使用不可)
この名前がURLになるので、わかりやすい名前をつけましょう。
例:yamadakafehanakosalontokyolp2024
② ファイルをアップロードする

「Create project」をクリックすると、アップロードエリアが表示されます。

アップロードエリア
ZIPファイルをそのままこの枠の中にドラッグ&ドロップしてください。
解凍せずにZIPのままでOKです!
③ 「Deploy site」をクリック

アップロードが完了したら「Deploy site」ボタンが青くなります。クリックして公開します。

アップロード完了
▲ 「All files were successfully uploaded.」が表示されたら成功です。
右下の 「Deploy site」 をクリックしてください。
公開完了!
公開完了画面
▲ 「Success! Your project is deployed to Region: Earth」と表示されたら公開完了です!
青いリンク(〇〇.pages.dev)をクリックして、LPが正しく表示されるか確認してください。
🎉

このURLをお客様へご案内したり、
SNSやホームページからリンクできます。

URL形式 https://【プロジェクト名】.pages.dev
🔄 LPを更新する方法

URLはそのままで、データを差し替えたい場合

1
Workers & Pages を開くCompute → Workers & Pages をクリックします。
2
対象のプロジェクトをクリック一覧から更新したいプロジェクトを選びます。
3
「Create deployment」をクリック画面右上の青いボタン「Create deployment」をクリックします。
4
ZIPファイルをアップロード「Drag in or click to upload a file or folder.」のエリアにZIPファイルをそのままドラッグします。解凍不要です!
5
「Save and deploy」をクリック右下の「Save and deploy」ボタンを押して完了です。
⚠️
更新する際は、一部だけでなくすべてのデータをアップロードしてください。
🗑️ 不要になったLPを削除する方法
1
削除したいプロジェクトを開くWorkers & Pages の一覧から対象をクリックします。
2
「Settings」を開く左メニューではなく、画面上部のタブにある「Settings」をクリックします。
Settingsタブの場所
▲ 「Settings」は左メニューではなく上のタブにあります。
3
一番下までスクロール「Delete project」ボタンが出てきます。クリックしてください。
4
プロジェクト名を入力して削除確認のためプロジェクト名を入力し、「Delete」をクリックします。
⚠️
削除したプロジェクトは元に戻せません。削除前にバックアップを取っておいてください。