bolt無料ライブ・30分

konmari流
"ページを無料で公開"
する仕組み

配布資料を毎回ネットで無料公開している方法を、実際の画面でそのまま見せます。サーバー代0円、はじめての Cloudflare Pages。

event2026年6月8日(月)12:15〜12:45 videocamオンライン personkonmari × けいたろう
flagTODAY'S GOAL

今日のゴール

この30分が終わったとき、あなたはこうなっています。

  • check_circle
    「ページ公開」の正体がわかる。サーバーやドメインの難しさナシで、仕組みがイメージできる。
  • check_circle
    ドラッグ&ドロップで公開する手順を、自分の手で再現できる。
  • check_circle
    (HTMLを用意できた人は)自分だけのURLが手元にある状態。
helpWHAT IS IT

Cloudflare Pages ってなに?

ひとことで言うと——HTMLファイルを置くと、無料で世界中に高速配信してくれるサービス

home_work

むかしの「公開」

サーバーを借りて、契約して、設定して…とハードルが高かった。お金もかかる。途中で挫折しがち。

cloud_done

Cloudflare Pages

ファイルを置くだけ。無料・高速・鍵マーク(https)も自動。難しい設定はいらない。

なぜ速い・なぜ無料?
Cloudflareは世界中にサーバーを持つ会社。あなたのページを各地のサーバーにコピーして、見る人にいちばん近い場所から届けます。だから日本からでも一瞬。個人で配布資料やLPを置くくらいなら、料金は実質かかりません。

何を公開できる?
いちばん相性がいいのは、HTML・CSS・JavaScriptだけでできた「静的サイト」です。たとえば、配布資料、ポートフォリオ、告知ページ、LP、ちょっとしたまとめページ。AIで作ったHTMLをURLにしたい時にも使えます。

account_treeHOW IT WORKS

konmari流・公開の流れ

私がやっているのは、HTMLを置き場(GitHub)に上げるところまで。公開はぜんぶ自動です。

description

HTMLを作る

配布資料やLP
(AI・テンプレでOK)

arrow_forward
folder

GitHubに置く

非公開のまま
でOK

arrow_forward
cloud_done

Cloudflare

自動で受け取り
世界中にコピー

arrow_forward
public

URLが完成

更新は「送る」
だけで自動反映

workspace_premiumKONMARI'S WAY

konmari流のセットアップ(GitHub連携)

私はこの方式。一度つなげば、あとは「保存して送る」だけで自動公開。更新がラクで、履歴も残るのが理由です。

inventory_2 最初に用意するもの
GitHubアカウント、Cloudflareの無料アカウント、公開したいHTMLファイル。この3つがあれば始められます。フォルダ名やファイル名は、半角英数字にしておくとトラブルが少ないです。

GitHubにログインして、リポジトリを作る

リポジトリは「HTMLの置き場」。セミナー用なら、まずは空のリポジトリでOKです。

index.html をリポジトリに入れる

トップページにしたいHTMLは、基本的に index.html という名前にします。GitHub上からアップロードしてもOK。

Cloudflare Pagesで「GitHub連携」を選ぶ

Cloudflareの管理画面で Pages を開き、GitHubリポジトリを接続します。作った置き場を選んで、次へ進みます。

リポジトリが出ない時は、GitHub側の許可を追加する

Cloudflareのリポジトリ一覧に出ない時は、GitHubの「Installed GitHub Apps」から Cloudflare を開き、Repository access に使いたいリポジトリを追加します。Privateリポジトリは、ここで許可しないと表示されないことがあります。

ビルド設定は、静的HTMLならほぼ空でOK

フレームワークは「None」。出力ディレクトリは空欄でOK。ビルドコマンドが必要な画面では、静的HTMLなら exit 0 で進めます。

Deployすると、pages.dev のURLができる

数十秒待つと https://〇〇.pages.dev が発行されます。これが、参加者に渡せる公開URLです。

2回目からは、GitHubに入れ直すだけ

同じリポジトリにHTMLを更新すると、Cloudflare Pages側も自動で更新されます。毎回ダッシュボードで作業しなくてOK。

autorenew保存して送るだけで、自動で公開URLに反映

touch_app 難しいのが苦手な人へ:いちばん簡単な入口
GitHubを使わず、管理画面で「Upload assets」を選んでHTMLフォルダをドラッグ&ドロップするだけでも公開できます。まずはこれで「公開できた」を体験するのもアリ。続けたくなったら、上の GitHub連携に切り替えると一気にラクになります。

lockSECURITY

「公開」って、中身も全部バレるの?

よくある不安。ここを分けて理解すると、安心して使えます。

vpn_key公開されるのは「ページ」だけ。元データは隠せる。

GitHubと連携して使う場合、元のファイル置き場(リポジトリ)は非公開(Private)のままでも連携できます。世界に出るのは、できあがったページ(URL)だけです。

PRIVATE
folder元データ置き場

非公開のまま。あなた以外は中を見られない。

PUBLIC
public公開ページ(URL)

世界中の誰でも見られる。これだけが外に出る。

compare_arrows2 WAYS

「直アップロード」と「GitHub連携」どっち?

どちらでも公開できます。何度も更新するなら GitHub、1回だけなら直、で使い分け。

くらべる点直アップロードGitHub連携
はじめやすさかんたん(放り込むだけ)最初だけ少し設定
更新のたび毎回ドラッグし直す保存して送るだけで自動更新
過去にもどすできないいつでも前の状態に戻せる
向いてる人1回だけ・お試し公開何度も育てる資料・LP

tips_and_updates konmariの場合:配布資料は何度も直すので GitHub連携。「保存して送る」だけで自動公開され、履歴も全部残って、いつでも前に戻せるから。まずは直アップロードで"公開できた"感覚をつかんで、続けたくなったら GitHub、で十分です。

lightbulbUSE CASES

こんなものが公開できる

HTMLにできるものなら、なんでも。

badge
プロフィール / 名刺ページ自己紹介やリンク集を1枚に
campaign
イベント・告知ページセミナーや募集の案内
menu_book
配布資料・まとめ今日のこのページもそう
storefront
かんたんなLPサービスや商品の紹介
warning_amberNOTE

たった1つの注意点

visibilityページに出すHTMLには「秘密」を書かない

  • arrow_rightリポが非公開でも、公開ページの中身は世界中の誰でも見られます
  • arrow_rightメールアドレス・パスワード・APIキー・人に見せたくない情報は、公開するHTMLに直接書かないこと。
  • arrow_right逆に言えば、これさえ守ればOK。むずかしい設定は他にありません。
rocket_launchNEXT STEP

今日のあとの「次の一歩」

linkLINKS

リンク集