Cloudflare Pages 公開ガイド — スタッフ限定ナレッジハブの公開手順

このガイドについて

ローカルにある ai_knowledge_hub.html を、スタッフだけがアクセスできる状態でオンライン公開するための手順書です。final_review.html のような体験を、URLを共有するだけでスタッフに届けます。

すべて無料枠で完結します。クレジットカードの登録は Zero Trust 利用時のみ必要ですが、課金は発生しません。

各ステップに 画面イメージ を添えています。実際のUIと細部は異なる可能性がありますが、要素の位置関係と操作の流れは同じです。

Step 1. Cloudflare アカウント作成

所要 5 分

https://dash.cloudflare.com/sign-up を開く
メールアドレスとパスワードを入力
確認メールのリンクをクリックして認証完了

サインアップ画面のイメージ

支払い情報の登録は不要です。Cloudflare Pages 単体なら無料で完結します。Zero Trust(後述)を使う場合のみ、認証目的でクレジットカードまたは PayPal の登録が求められます。

Step 2. Pages プロジェクト作成

所要 5 分

ダッシュボード左メニューから 「Workers & Pages」 をクリック
「Create application」をクリック
「Pages」タブを選択
「Upload assets」(または「Get started」→「Drag and drop your files」)を選択
プロジェクト名を入力(例:tomita-knowledge)
「Create project」をクリック

プロジェクト作成画面のイメージ(Workers & Pages 内)

重要:プロジェクト名は <PROJECT_NAME>.pages.dev という形でURLになります。すでに使われている名前は自動でランダム文字列が追加されます。ユニークかつ覚えやすい名前を選んでください。

Step 3. ファイルをドラッグ&ドロップでアップロード

所要 5 分

アップロード前に、フォルダ構造を以下の形に整えるのが最も重要です。

📁 tomita-knowledge/
├── index.html          ← ai_knowledge_hub.html をリネーム
├── 📁 tools/
│   └── (子ページを後から追加)
├── 📁 workflows/
└── 📁 inbox/

ai_knowledge_hub.html を index.html にリネーム
上記のフォルダ構造を作る(空フォルダでも可)
フォルダ全体をブラウザのドラッグ&ドロップエリアにドロップ
「Save and Deploy」をクリック
数秒待つと https://tomita-knowledge.pages.dev が公開される

落とし穴:index.html にリネームしないと、URLが tomita-knowledge.pages.dev/ai_knowledge_hub.html になり、トップアクセスで 404 になります。

アップロード制限:Drag & Drop 方式は最大 1,000 ファイル、1ファイルあたり最大 25 MiB。ナレッジハブ運用ではまず到達しません。

Step 4. Cloudflare Access を有効化

所要 10 分

Phase 1 完了時点では世界中からアクセス可能な状態です。許可したメールアドレスだけがアクセスできる状態にします。

ダッシュボード左メニューから 「Zero Trust」 を開く
初回のみ:チーム名を設定(例:tomita-coach)
プラン選択画面で Free を選択
クレジットカードまたは PayPal を登録(課金されないが認証必須)
「Access」→「Applications」→「Add an application」
「Self-hosted」を選択
Application domain に tomita-knowledge.pages.dev を入力
ポリシー作成:Action は 「Allow」
「Include」ルールで 「Emails」 を選択し、許可するメールアドレスをリスト化
保存して有効化

Access Policy 設定画面のイメージ

無料枠の上限:50ユーザーまで無料。トミタコーチのスタッフ規模なら十分です。51人以上は1ユーザー $7/月。

クレジットカード登録について:Zero Trust Free プランは課金されませんが、登録時にカード情報の入力が必須です。これは Cloudflare の不正利用対策で、登録だけなら無料です。

Step 5. 内容を更新する

所要 1〜2 分

ローカルでファイルを編集する(index.html や子ページ)
ダッシュボード「Workers & Pages」→ プロジェクトを選択
「Create new deployment」をクリック
更新したいファイルを含むフォルダ全体をドラッグ&ドロップ
「Save and Deploy」

自動バックアップ機能:各デプロイは履歴として残ります。間違えて消してしまっても、ダッシュボードから過去のバージョンにワンクリックで戻せます。Xサーバーには無い大きな利点です。

注意:差分アップロードではなく、毎回フォルダ全体を上げる方式です。一部のファイルだけ上げると、それ以外のファイルが消えてしまうので必ず全体をアップロードしてください。

Slack / メールで共有する文面のコツ

URLだけポンと送るのではなく、「何を見るか」「何分かかるか」「どう反応すればよいか」を冒頭で伝えると、final_review.html と同じ体験を生み出せます。

共有メッセージのテンプレート例:

お疲れさまです。AI関連ツールの運用状況をひとつのページにまとめました。

URL:https://tomita-knowledge.pages.dev

所要時間は 5〜10 分。「現在運用中のもの」「検証中のもの」「保留中のもの」が一覧で見られます。初回アクセス時にメールアドレス認証があります(ワンタイムコードがメール送付されます)。

気になる項目があれば各セクション末尾からお知らせください。

結論:現時点では有料化は不要

Cloudflare の有料プランには3種類あり、それぞれ別物です。トミタコーチに関連する範囲だけ整理します。

プラン	月額	関連性
Cloudflare Pages Free	$0	★ ナレッジハブ運用はこれで完結
Cloudflare CDN Pro	$20/月	独自ドメインで公式サイトを運用する場合のみ検討。内部ハブには過剰。
Workers Paid	$5/月〜	Pages Functions を本格活用する場合。Access を使うなら不要。
Zero Trust Free	$0(50人まで)	★ スタッフ認証はこれで完結
Zero Trust Pay-as-you-go	$7/ユーザー/月	51人以上のスタッフを認証する場合のみ。

つまり、トミタコーチの想定運用では ★ の2つ(完全無料)で十分です。将来、公式サイトを Cloudflare で独自ドメイン運用する段階になれば、CDN Pro($20/月)の検討余地が出てきますが、それは別の話です。

有料化を検討すべきタイミング:
① スタッフが51人を超えた → Zero Trust Pay-as-you-go
② 公式サイトを Cloudflare で運用 → CDN Pro
③ サーバー側でJSを動かしたくなった → Workers Paid
いずれも後からいつでも切り替え可能です。今は無料で開始し、必要が出てから検討するのが合理的です。

補足:Cloudflare Pages を選ぶ理由

更新の軽さ ── FTPと違い、ブラウザでドラッグするだけ。「思いついたら追記」というナレッジ運用の思想と一致する。
自動バックアップ ── 各デプロイが履歴として残り、巻き戻し可能。Xサーバーでは別途バックアップが必要。
独自ドメイン不要 ── *.pages.dev サブドメインで完結。気軽に始められる。
無料枠が圧倒的に余裕 ── 帯域無制限、ファイル数2万、月間ビルド500回。内部ナレッジ運用では到達不可能な上限。
後悔できる構造 ── 気に入らなければXサーバーに移行できる。HTMLファイル単体なので環境に縛られない。