AIで作ったLPを無料で公開する方法。GitHub＋Cloudflare Pages

岡山県・倉敷を拠点に、AIを使って日々の仕事の生産性を高め、新しい価値を生み出すことに取り組んでいます。実業を持つ中小企業こそ、AIを使い倒して生産性を向上させる余地が大きいと思っています。実践のなかで得た気づきを発信しています。

AIに「こんなお店のホームページを作って」と頼むと、いまはもう、それなりに見られるものが返ってきます。文章も、レイアウトも、写真の置き方も、ひととおり形になります。

でも、その次でつまずきます。

手元にHTMLのファイルができても、それはまだ自分のパソコンの中にあるだけです。人に見てもらうには、インターネット上のどこかに置いて、URLでたどり着ける状態にしないといけません。サーバー、ドメイン、月額いくら。このあたりで手が止まります。僕も最初は、ここが一番の壁でした。

今日はこの壁を、お金をかけずに越える手順を書きます。使うのは GitHub と Cloudflare Pages という2つの無料サービスです。実際に僕が作った架空店舗のデモサイトを、公開するところまで、画面を撮りながら通しでやってみます。

そもそも「公開する」って、何をしているのか

ホームページを公開するというのは、ざっくり言えば「作ったファイルを、誰でもアクセスできる場所に置く」ことです。

その置き場所を、この記事では2つの役割に分けます。ひとつが GitHub、もうひとつが Cloudflare Pages です。

GitHub は、ファイルの保管庫です。作ったHTMLや画像を、まとめて置いておく棚だと思ってください。Cloudflare Pages は、その棚を見に行って、世界中からアクセスできるページとして配ってくれる係です。この2つをつなぐと、棚に新しいファイルを置くたびに、公開されているページが自動で最新になります。

少し前まで、サイトを公開するにはサーバーを借りるのが当たり前でした。月額を払って、FTPというソフトでファイルを送って、暗号化（https）は別に設定して。GitHub と Cloudflare Pages の組み合わせは、その手間と費用をまるごと肩代わりしてくれます。

どちらも、個人が普通のサイトを1つ公開するくらいなら、無料の範囲で収まります。僕は作ったデモサイトをいくつもこの方法で出していますが、いまのところ費用はかかっていません。ここがこの構成を選んでいる理由です。

今回、公開するもの

今回公開するのは「暮らしの器 てとて」という架空の雑貨店のデモサイトです。倉敷で作家の器を扱うお店、という設定で作りました。実在のお店ではありません。

このサイトは、Claude Code の「lp-build」というスキルに指示を出して作りました。モデルは Claude（Opus 4.8）です。お店の雰囲気や載せたい要素を伝えると、トップページの構成からコピー、写真の配置まで、ひとまとまりで返ってきます。

実際にはこんな指示を打ちました。お店の部分を自分のお店に置き換えれば、そのまま使えます（コピーして Claude Code に貼るだけ）。

倉敷の雑貨店「暮らしの器 てとて」のホームページを1枚つくってください。

# お店
- 作家の器（備前焼・吹きガラス・木工）を扱う、岡山・倉敷のお店
- 手仕事の温かみが伝わる、落ち着いた雰囲気

# 入れる内容
- 世界観の伝わるヒーロー（キャッチコピー＋写真）
- 取り扱い / 店主のこと / お客様の声 / 店・アクセス
- スマホでも崩れないレイアウト

# つくり方
- HTML・CSS・画像だけのシンプルな構成（index.html / styles.css / img）
- できあがったら GitHub のリポジトリに上げてください

ページの中身も、器の写真に説明と価格を添えた商品カード、店主の紹介、お客様の声、アクセスと、お店のサイトとして必要なところはひととおり入っています。スマホでも崩れず読めるように作ってあります。

中身はとてもシンプルです。ページ本体の index.html、見た目を決める styles.css、それと写真の入った img フォルダ。特別な仕組みは何も使っていない、ただのHTMLとCSSの一式です。この「ただのファイルの集まり」を、そのままネットに載せます。

STEP1｜GitHubに、ファイルを置く

まず、作ったファイル一式を GitHub に置きます。

GitHub では「リポジトリ」という単位でファイルをまとめます。ひとつのサイトにつき、ひとつの箱、というイメージです。箱を新しく作って、そこに index.html や styles.css、img フォルダを入れていきます。

やり方は2通りあります。GitHub のサイト上に、ファイルをドラッグ＆ドロップで放り込む方法。もうひとつが、コマンドでまとめて送る方法です。Claude Code に作業を任せているなら、コマンドのほうは「GitHubに上げておいて」と頼むだけで代わりにやってくれます。手で確実にやりたいならドラッグ＆ドロップ、で使い分ければ十分です。

上の画面が、実際に置いたあとのリポジトリです。index.html、styles.css、img。さっき手元にあったファイルが、そのまま並んでいるのが分かります。

STEP2｜Cloudflare Pagesで、公開する

ファイルの置き場所（GitHub）ができたら、いよいよ Cloudflare Pages で公開します。ここは画面に沿って、順番に見ていきます。無料のアカウントを作れば、あとはクリックで進みます。

まず、Cloudflare にログインして、左メニューの「Workers & Pages」から「作成」を押します。すると、こんな画面が出ます。

GitHub とつなぐ方法のほかに、ファイルをそのまま放り込む「Upload your static files」も選べます。今回は GitHub とつなぐので、下の「Pages を導入しようとお考えですか？ 始める」から Pages の画面へ進みます。

始め方を聞かれるので、「既存の Git リポジトリをインポートする」を選びます。GitHub を使わず手元のファイルを直接あげたいだけなら、下の「ファイルをドラッグアンドドロップする」でも公開できます。

次に、GitHub のアカウントをつないで、さっき作ったリポジトリ（今回なら zakka-demo）を選びます。初めてのときは、GitHub 側で「Cloudflare にアクセスを許可しますか」と聞かれるので、許可します。一度つなげば、次からは選ぶだけです。

リポジトリを選ぶと、最後に「ビルド設定」を聞かれます。今回のようにHTMLとCSSだけの素のサイトなら、難しい設定は要りません。フレームワークは「なし」、ビルドコマンドは空のまま、出力ディレクトリもそのままで「保存してデプロイ」を押します。

少し待つと、◯◯.pages.dev というURLが発行されます。これがもう、世界中からアクセスできる公開ページです。上の画面のように「自動デプロイが有効です」と出ていれば成功です。

この記事のいちばん最初に貼ったLPの画面は、まさにこの手順で公開したページを撮ったものです。公開先のURLはこちらです。

スマホからでも、この記事を読んでいる人の環境からでも、同じように開けます。

無料なのに、ここまでやってくれる

地味に大きいのが、ここです。これだけのことを、Cloudflare Pages はぜんぶ無料の範囲でやってくれます。

自分で用意した独自ドメイン（○○.com）をつなげるのも無料です。通信を暗号化する https（鍵マーク）も、こちらが何もしなくても最初からついています。ページは世界中に広がる Cloudflare のネットワークから配られるので、表示も速い。

急にアクセスが集中しても、追加料金の心配はいりません。個人のサイトやお店のページくらいなら、無料の枠でまず困らないと思います。

更新もラクです。文章を直したくなったら、手元のファイルを直して GitHub に上げ直すだけ。Cloudflare Pages がその変更を自動で拾って、公開ページを組み立て直してくれます。「お店の電話番号が変わった」「今月のキャンペーンを載せたい」。そういう更新も、1回上げれば数十秒後には公開ページに反映されます。

この型は、ホームページ以外にも使えます

ここまで「お店のホームページ」を例にしましたが、この公開のしかたは、HTMLでできているものなら何にでも使えます。

自分用に作ったちょっとしたツール、イベントの案内ページ、データをまとめた一枚もの。中身が何であれ、「GitHubに置いて、Cloudflare Pagesで公開する」という流れは同じです。僕自身、作ったものはその都度この方法で外に出しています。

一度この型を身につけてしまえば、「作ったはいいけど、どうやって人に見せよう」で立ち止まることがなくなります。ここが、作れるようになったあとで地味に差が出てくるところだと思っています。

おわりに

AIで何かを作れるようになると、次に立ちはだかるのが「それをどう世に出すか」です。作る部分ばかり話題になりますが、公開までの道がつながって、はじめて人に届きます。

GitHub と Cloudflare Pages の組み合わせは、その道を無料で、しかも一度きりの設定でつないでくれます。最初のとっかかりだけ少し慣れが要りますが、越えてしまえば、あとは「直して上げるだけ」です。

作ったものが自分のパソコンの中で眠っているなら、まずはひとつ、URLにして外に出してみてください。

書き手はYT。縁もゆかりもなかった倉敷に、なぜか定住しています。お酒と温泉と読書が好きで、効率を追う仕事の反動か、この三つには一切の効率を求めません。

YT
ここまで読んでくれてありがとうございます。

「自分で作るのは大変そう」という方向けに、LPを初期費用3万円・月額0円で作る受託もしています。作例と料金はこちらにまとめています。

相談はnoteのメッセージか、XのDM（@YTaikura）まで。まずは壁打ち（初回無料）からでも大丈夫です。

追記：Claude Codeの導入からLP制作・資料作成・動画編集までの全手順を、1本の有料noteにまとめました。僕が実際に使っている設定ファイルとスキル一式つきです。