配布資料を毎回ネットで無料公開している方法を、実際の画面でそのまま見せます。サーバー代0円、はじめての Cloudflare Pages。
この30分が終わったとき、あなたはこうなっています。
ひとことで言うと——HTMLファイルを置くと、無料で世界中に高速配信してくれるサービス。
サーバーを借りて、契約して、設定して…とハードルが高かった。お金もかかる。途中で挫折しがち。
ファイルを置くだけ。無料・高速・鍵マーク(https)も自動。難しい設定はいらない。
なぜ速い・なぜ無料?
Cloudflareは世界中にサーバーを持つ会社。あなたのページを各地のサーバーにコピーして、見る人にいちばん近い場所から届けます。だから日本からでも一瞬。個人で配布資料やLPを置くくらいなら、料金は実質かかりません。
何を公開できる?
いちばん相性がいいのは、HTML・CSS・JavaScriptだけでできた「静的サイト」です。たとえば、配布資料、ポートフォリオ、告知ページ、LP、ちょっとしたまとめページ。AIで作ったHTMLをURLにしたい時にも使えます。
私がやっているのは、HTMLを置き場(GitHub)に上げるところまで。公開はぜんぶ自動です。
配布資料やLP
(AI・テンプレでOK)
非公開のまま
でOK
自動で受け取り
世界中にコピー
更新は「送る」
だけで自動反映
私はこの方式。一度つなげば、あとは「保存して送る」だけで自動公開。更新がラクで、履歴も残るのが理由です。
inventory_2 最初に用意するもの
GitHubアカウント、Cloudflareの無料アカウント、公開したいHTMLファイル。この3つがあれば始められます。フォルダ名やファイル名は、半角英数字にしておくとトラブルが少ないです。
リポジトリは「HTMLの置き場」。セミナー用なら、まずは空のリポジトリでOKです。
トップページにしたいHTMLは、基本的に index.html という名前にします。GitHub上からアップロードしてもOK。
Cloudflareの管理画面で Pages を開き、GitHubリポジトリを接続します。作った置き場を選んで、次へ進みます。
Cloudflareのリポジトリ一覧に出ない時は、GitHubの「Installed GitHub Apps」から Cloudflare を開き、Repository access に使いたいリポジトリを追加します。Privateリポジトリは、ここで許可しないと表示されないことがあります。
フレームワークは「None」。出力ディレクトリは空欄でOK。ビルドコマンドが必要な画面では、静的HTMLなら exit 0 で進めます。
数十秒待つと https://〇〇.pages.dev が発行されます。これが、参加者に渡せる公開URLです。
同じリポジトリにHTMLを更新すると、Cloudflare Pages側も自動で更新されます。毎回ダッシュボードで作業しなくてOK。
autorenew保存して送るだけで、自動で公開URLに反映touch_app 難しいのが苦手な人へ:いちばん簡単な入口
GitHubを使わず、管理画面で「Upload assets」を選んでHTMLフォルダをドラッグ&ドロップするだけでも公開できます。まずはこれで「公開できた」を体験するのもアリ。続けたくなったら、上の GitHub連携に切り替えると一気にラクになります。
よくある不安。ここを分けて理解すると、安心して使えます。
GitHubと連携して使う場合、元のファイル置き場(リポジトリ)は非公開(Private)のままでも連携できます。世界に出るのは、できあがったページ(URL)だけです。
非公開のまま。あなた以外は中を見られない。
世界中の誰でも見られる。これだけが外に出る。
どちらでも公開できます。何度も更新するなら GitHub、1回だけなら直、で使い分け。
| くらべる点 | 直アップロード | GitHub連携 |
|---|---|---|
| はじめやすさ | かんたん(放り込むだけ) | 最初だけ少し設定 |
| 更新のたび | 毎回ドラッグし直す | 保存して送るだけで自動更新 |
| 過去にもどす | できない | いつでも前の状態に戻せる |
| 向いてる人 | 1回だけ・お試し公開 | 何度も育てる資料・LP |
tips_and_updates konmariの場合:配布資料は何度も直すので GitHub連携。「保存して送る」だけで自動公開され、履歴も全部残って、いつでも前に戻せるから。まずは直アップロードで"公開できた"感覚をつかんで、続けたくなったら GitHub、で十分です。
HTMLにできるものなら、なんでも。