世界に、公開する。

そもそも「デプロイ」とは

デプロイとは、作ったサイトをインターネット上に置いて、世界中の誰でもブラウザで見られる状態にすることです。今までのサイトは、あなたのパソコンの中だけで動いていました。それを「みんなが訪れられる場所」に引っ越しさせる——それがデプロイです。むずかしそうな響きですが、やることは驚くほどシンプルです。

どうやって公開するの？

前の章までで、プロジェクトを GitHub（コードを保管しておくネット上の倉庫）に上げましたね。その GitHub を、ホスティングサービスとつなぐだけで公開できます。ホスティングサービスとは、あなたのサイトを置いてくれる「土地と建物」のようなもの。サービスを“線でつなぐ”だけで、サーバーの設定もファイルの手書きも要りません。

公開先を選ぶ — 3つの選択肢

公開先（ホスティングサービス）には、いくつか選択肢があります。この講座でよく使う代表的な3つを紹介します。どれも GitHub とつなぐだけで、無料から始められます。まずは違いをざっくりつかみましょう。

GitHub Pages

GitHub がそのまま提供する公開機能。すでに使っている GitHub の中で完結するので、いちばん手軽。HTML・CSS だけの“静かな”サイト（静的サイト）向き。このサイト自身も GitHub Pages で公開されています。

Render（レンダー）

静的サイトはもちろん、プログラムが裏で動く“働く”サイト（予約処理・自動メール送信など）まで公開できる、守備範囲の広いサービス。少し本格的なことをやりたくなったらこちら。

Vercel（ヴァーセル）

表示の速さと使いやすさに定評があるサービス。GitHub と相性がよく、設定の自動検出が賢い。迷ったときの無難な一択。

では、3つそれぞれの公開手順を見ていきます。どれか1つを選べばOKです。共通の流れは同じ——GitHubと連携 → デプロイ → URLで確認の3ステップだけです。

A. GitHub Pages で公開する（いちばん手軽）

すでに GitHub にプロジェクトを上げていれば、新しいサービスに登録する必要すらありません。GitHub の設定画面だけで完結します。HTML・CSS だけのシンプルなサイトに最適です。

1. GitHub で、公開したいリポジトリのページを開きます。
2. 上部メニューの「Settings」→ 左メニューの「Pages」を開きます。
3. 「Build and deployment」の「Source」で「Deploy from a branch」を選び、ブランチを main、フォルダを / (root) にして「Save」。
4. 少し待つと、ページ上部に ○○.github.io/リポジトリ名 という公開URLが表示されます。クリックすれば、もう公開されています。

このサイトをGitHub Pagesで公開したいです。リポジトリのSettings→Pagesでどう設定すればいいか、初心者向けに一つずつ教えてください。公開URLがどうなるかも教えてください。

B. Render で公開する（“働く”サイトまでOK）

Render（レンダー）は、見せるだけのサイトも、裏でプログラムが動くサイトも公開できる、守備範囲の広いサービスです。「いずれ予約システムや自動返信メールも付けたい」なら、最初から Render にしておくと引っ越しの手間がありません。

1. Render に GitHub アカウントでログインします。
2. ダッシュボードで「New +」を押します。HTML・CSSだけのサイトなら「Static Site」、プログラムが動くサイトなら「Web Service」を選びます（迷ったら、まずは Static Site）。
3. 公開したい GitHub リポジトリを選び、つなぎます。
4. 必要な設定（公開するフォルダ＝Publish directory など）を入れて「Create」。あとは Render がビルドして公開します。
5. 完了すると ○○.onrender.com のような公開URLが発行されます。

このサイトをRenderで公開したいです。Static SiteとWeb Serviceのどちらを選べばいいか、このプロジェクトの中身を見て判断し、設定（Build CommandやPublish directoryなど）の入力値も具体的に教えてください。

C. Vercel で公開する（速くて無難）

Vercel（ヴァーセル）は、設定の自動検出が賢く、表示も速い人気のサービスです。「あれこれ選ぶのが面倒、とにかく確実に公開したい」ならこれ。

1. Vercel に GitHub アカウントでログインし、「Add New → Project」から、公開したいリポジトリを選びます。
2. 設定はたいてい自動で検出されます。そのまま「Deploy」ボタンを押すだけ。あとは待つだけで、Vercel がビルドして公開してくれます。
3. 完了すると ○○.vercel.app のような公開URLが発行されます。クリックして開けば、もう世界に公開されています。

このサイトをVercelで公開する手順を、初心者向けに一つずつ教えてください。今どの操作をすればいいか、画面の言葉に沿って案内してください。

結局、どれを選べばいい？

迷ったときの目安です。正解は1つではありません。あとから乗り換えることもできるので、気軽に選んでかまいません。

1. とにかく手軽に、見せるだけのサイトを出したい → GitHub Pages（GitHub の中だけで完結）
2. いずれ予約・自動返信など“裏の処理”も付けたい → Render（最初から働くサイトに対応）
3. 細かいことは任せて、速く確実に公開したい → Vercel（自動検出が賢い）

フォームの保存先がある場合（Supabase との組み合わせ）

前の章でお問い合わせフォームと Supabase（保存先のデータベース）をつないだ方は、公開のときに1点だけ気をつけます。GitHub Pages や Vercel のような“見せるだけ”の公開先でも、Supabase が保存を引き受けてくれるので、フォームはちゃんと動きます。ブラウザから Supabase へ直接データを送る形だからです。

ただし、ローカル（手元）で使っていた 接続情報（URL と APIキー）を、公開先にも教えてあげる必要があります。多くのサービスには「環境変数（Environment Variables）」の設定欄があり、そこに登録します。

1. 公開先サービスの設定画面で「Environment Variables（環境変数）」を開きます（Vercel・Render にはこの欄があります）。
2. Supabase の Project URL と APIキー（anon key）を、ローカルで使った変数名と同じ名前で登録します。
3. 登録したら、もう一度デプロイ（再公開）して反映させます。

このサイトはSupabaseと連携しています。{Vercel / Render / GitHub Pages のいずれか}で公開するとき、SupabaseのURLとAPIキーをどこにどう設定すればいいか、初心者向けに一つずつ教えてください。環境変数の名前も、このプロジェクトに合わせて教えてください。

一度つなげば、あとは“pushするだけ”（CI/CD）

ここが、いちばん感動するところです。GitHub とホスティングサービスを一度つないでおくと、GitHub に push（更新を反映）するたびに、自動でサイトが再公開されるようになります。この「自動で公開まで流れていく仕組み」を CI/CD と呼びます。

つまり、サイトを直したくなったら——Claude Code で修正して、いつもの保存（コミット）と push をするだけ。あとは何もしなくても、数十秒後には本番のサイトに反映されています。公開作業を毎回やり直す必要はありません。

git add .
git commit -m "トップページの文言を修正"
git push

この3行を打つだけで、変更が GitHub に届き、公開先（GitHub Pages・Render・Vercel のいずれでも）が自動で再公開します。更新のたびにこれを繰り返すだけ。とてもラクになりますね。

あなただけの住所 — 独自ドメイン

公開直後のURLは ○○.vercel.app や ○○.github.io、○○.onrender.com といった、借り物の住所です。これを あなたの会社名.com のような、あなただけの住所に変えられます。これが独自ドメインです。名刺やチラシに載せても見栄えがよく、信頼感も増します。どの公開先でも、設定画面からドメインを割り当てられます。

やることは2つ。①ドメインを取得する（お名前.com や Google Domains などで、年間数百〜数千円ほど）。②取得したドメインを、ホスティングサービスの設定画面で「割り当て」る。この割り当ての具体的な操作も、Claude Code に聞きながら進められます。

独自ドメイン ○○.com を、Vercelで公開しているこのサイトに割り当てる方法を、初心者向けに一つずつ教えてください。ドメイン側で設定する値も具体的に教えてください。

最後に、スマホで開いて見てもらう

公開URLができたら、ぜひ自分のスマホで開いてみてください。パソコンで作ったサイトが、手のひらの中にちゃんと表示される——この瞬間が、いちばん「できた！」と実感できます。家族や知人にURLを送って、見てもらいましょう。誰かに届くために作ったサイトが、いま本当に世界とつながりました。

この章で出てきた言葉

デプロイ

作ったサイトをインターネット上に置いて、誰でも見られるようにすること。「公開」とほぼ同じ意味。

ホスティング

サイトを置いてくれる「土地と建物」のサービス。ここにサイトを載せて公開します。

静的サイト

HTML・CSS だけでできた“見せるだけ”のサイト。お店の紹介ページなど。GitHub Pages・Vercel が得意。

GitHub Pages

GitHub がそのまま提供する公開機能。GitHub の中だけで完結し、静的サイトを手軽に公開できます。

Render

静的サイトに加え、裏で処理が動く“働く”サイトまで公開できる守備範囲の広いサービス。

Vercel

表示が速く、設定の自動検出が賢いホスティングサービス。GitHub と相性がよく、迷ったときの無難な選択。

環境変数

APIキーなど大事な値を、コードの外側に分けて保管する仕組み。公開先にも別途登録が必要です。

CI/CD

GitHub に push するたび、自動でサイトが再公開される仕組み。一度つなげば、更新→push だけで反映されます。

ドメイン

サイトの住所（例：example.com）。独自ドメインを取れば、あなただけの住所を持てます。

DNS

ドメインとサイトを結びつける「住所録」の仕組み。設定が行き渡るまで少し時間がかかります。