ステップ04: 世界に公開 | Webサイト自動構築ガイド

このステップの到達目標

GitHubが「何をしている」のかをイメージで理解する。
Cloudflare Pagesの最大のメリット（Private対応＋無料公開）を知る。
デプロイ（公開）までの一連の流れを把握する。

ローカルフォルダに美しいWebサイトが出来上がりました。でも、それはまだ「あなたのパソコンの中だけの世界」です。
これを上司や同僚、あるいは世界中の人に見せるためには「転移門」が必要です。

01 GitHubとCloudflareって何？

GitHub

あなたのファイルをインターネット上の金庫に保管するサービス。バックアップであり、Cloudflareへの橋渡し役です。

Cloudflare Pages

GitHubの金庫からファイルを読み取り、世界中からアクセスできるURLを発行してくれる魔法のサービスです。

仕組み：なぜ2つも使うのか？

「なぜGitHubに直接公開しないの？」と思うかもしれません。実はGitHub Pages（GitHub標準の公開機能）も存在します。しかし、GitHub Pagesには致命的な弱点があります。Publicリポジトリ（ソースコード公開）でないと無料で使えないのです。

つまり、あなたの裏プロンプトや学習メモ、恥ずかしい試行錯誤のコミット履歴が全世界に丸見えになります。

Cloudflare Pagesなら、Privateリポジトリ（ソース非公開）のまま無料でWebサイトを公開できます。これが「最強の盾」と呼ぶ理由です。

02 公開までの全体像

① パソコンのフォルダ

→

② GitHubに保管

→

③ Cloudflareが公開

→

④ URL発行！

03 公開までの手順（5ステップ）

01

GitHubアカウントを作成

github.com からアカウントを作成します。Googleアカウントでのサインアップも可能です。
02

新しいリポジトリ（金庫）を作成

GitHub上で「New Repository」をクリック。名前を入力し、必ず「Private」を選択してください。これがあなたの秘密の金庫です。
03
ローカルフォルダをGitHubに接続

VS Codeのターミナルで以下のコマンドを実行します。Antigravityに「このフォルダをGitHubに繋いで」と日本語で頼んでも実行してくれます。
```
git init
git add .
git commit -m "feat: Initial commit"
git remote add origin https://github.com/あなたのID/リポジトリ名.git
git push -u origin master
```
04

Cloudflare Pagesに接続

Cloudflare Pages にログインし、「Create a project」→「Connect to Git」→ 先ほどのPrivateリポジトリを選択します。
05

公開URLを受け取る

数分待つと、あなたのプロジェクト名.pages.dev という公開URLが発行されます。このURLを知人に教えれば、あなたのサイトを見てもらえます。

04 メリットとリスクの全て

メリット

最強の盾：Privateリポジトリ対応。裏側のプロンプトや学習メモは世界から完全に隠蔽。
共有の魔法：Privateであっても、発行されたURLさえ教えれば誰でもサイトを閲覧できる。
完全無料：個人利用であれば料金は一切かかりません。
自動更新：GitHubにpushするだけでCloudflare側も自動更新されます。

リスクとその超越

唯一の弱点：Cloudflare Pagesの標準機能にはページ単位のパスワードロックがありません。URLが第三者に漏れれば、誰でも閲覧できてしまいます。

しかし——「アクセス制限をかけて」とAIに一言伝えるだけで、Antigravityが即座にJavaScriptによる簡易パスワード画面や、Cloudflare Workersによる堅牢なアクセス制御を構築します。超越可能です。

更新は何度でもできる

一度接続してしまえば、次回以降はローカルで修正して git add . && git commit -m "修正内容" && git push するだけで自動的にCloudflareにも反映されます。Antigravityに「これをpushして」と言えば、コマンドすら自分で打つ必要はありません。

ステップ 04 クリア！

EXP +100 獲得

転移門の開き方をマスターしました。最後のQuestでは、応用テクニックと困った時の駆け込み寺を用意しています。

世界に公開しよう