3. 公開する — 作ったサイトをインターネットに出す

実際に操作して撮った画面と、その時に起きたことをそのまま載せています。内容の誤りに気づかれた場合はお問い合わせください。確認のうえ訂正します。

ページ2で、自分のパソコンの中に index.html と style.css ができました。でも、この状態では自分にしか見えません。このページでは、それをインターネットに出して、https://〜 の住所（URL）から誰でも見られるようにします。使うのは Kombai ではなく Netlify（ネットリファイ）というサービスです。フォルダをブラウザに落とすだけで公開できて、無料です。今回は、登録して実際に公開し、仮のURL の名前を変え、最後に非公開に戻すところまでやりました。30 分ほどで、Kombai のクレジットは使いません。

公開するとは何か

ページ1で書いた通り、Web サイトはファイルの集まりで、公開するとは「そのファイルを、誰でも取りに来られる場所に置く」ことです。置く場所を貸してくれるサービスはいくつもあって、Netlify はその1つ。似たものに Cloudflare Pages や Vercel があります。どれでも構いませんが、Netlify には Netlify Drop という、登録もせずにフォルダを落とすだけの入口があるので、今回はそこから入ります。継続的に後悔するためには登録する必要があります。

登録なしで、まず落としてみる

Chrome で https://app.netlify.com/drop を開きます。「Drag & drop to publish instantly」と大きく書かれていて、真ん中に「Drop here」の場所があります。

Netlify Drop の最初の画面

Finder で、ページ2のフォルダ Kombai/projects/project-velvet-sunbeam を出します（Kombai の PROJECTS の「⋮」→「Open with」→「Finder」で開くと、フォルダの中を開いてしまう）。中のファイルではなく、フォルダそのものをつまんで、ブラウザの「Drop here」に落とします。

Finder のフォルダをブラウザに落とすところ

数十秒で「Voilà, your project is live」（できました、公開されています）に変わりました。ただし、ここに書いてある2つのことが大事です。

1時間で消える。「Your project stays live for an hour before it expires」。登録して自分のものにする（claim）と残ります。
仮のパスワードが付いている。「My-Drop-Site」というパスワードで守られていて、claim するまではこれを知らない人は見られません。

つまり、この時点では「公開された」というより「1時間だけ、パスワード付きで置いてある」状態です。

Voilà, your project is live。1時間の残り時間と、パスワード My-Drop-Site

下に出ている https://frolicking-strudel-bf2e67.netlify.app が、仮の URL です。名前は Netlify がランダムに付けます。「Open」を押すとパスワードを聞かれるので、画面の「My-Drop-Site」を入れると、ページ2で作った自己紹介ページがそのまま出てきました。アドレスバーが 127.0.0.1 ではなく netlify.app になっているのが、ページ2との違いです。

仮の URL で表示された自己紹介ページ

登録して残す

Netlify に戻って「Claim this site」を押すと、アカウント作成の画面に飛びます。Google / GitHub / GitLab / Bitbucket、それとメールから選べて、今回はメールで登録しました。クレジットカードは要りません。

Netlify の登録画面

登録が終わると、さっきのサイトの管理画面に戻ります。最初は「Your project is now private」という案内が出て、サイトが非公開になっています。仮のパスワードが外れた代わりに、「チームのメンバーだけが見られる」設定になった、という説明でした。他の人に見せるには、「Make public」を押す必要がありますが、一度「Got it」を押して案内を閉じました。

claim した直後の「Your project is now private」

この管理画面には、後で使うものが2つ写っています。上の「Make public」ボタンと、下の「Production deploys」にある「Drag and drop your project folder here to deploy new changes」という枠です。後者はwebサイトを更新するときに使う枠で、Kombai で直したフォルダをここにもう一度落とすと、サイトが新しくなります。今回は試していません。

サイトの管理画面。Make public と、更新用のドロップ枠

URL の名前を変えて、公開する

ランダムな名前のままでもいいのですが、変えられます。左の「Project configuration」→「General」→「Project details」に「Change project name」があります。今回は tameshita-self-introduction にしました。使える文字は英数字とハイフンだけ、37 文字まで。同じ名前を誰かが使っていると取れません。「古い URL では見られなくなる」という注意も出ます。

Change project name の画面

そして「Make public」。「Public — Anyone on the internet」（インターネットの誰でも）を選んで押します。

Make public の確認画面

これで https://tameshita-self-introduction.netlify.app を、パスワードなしで誰でも開けるようになりました。ページ1の最初に書いた「作ったサイトをインターネットで見られる状態にする」は、これで達成できました。

新しい URL で表示された自己紹介ページ

非公開に戻したくなったら

公開したものは、いつでも見えない状態に戻せます。「Project configuration」→「General」→「Visitor access」で「Edit visibility」を押し、「Private」を選んで、「Applies to」を「Production and previews」にして保存します。

Visitor access で Private を選ぶ画面

保存すると「Production visibility: Private」になり、URL を開いてもログイン画面になって、中身は見えません。今回作ったページも、この記事を書いた後にこの操作で非公開にしてあります。もう一度出したくなったら、同じ場所で「Public」に戻すだけです。

Production visibility が Private になった画面

まとめ

この3ページでやったのは、Kombai を入れて、自己紹介の1ページを日本語で頼んで作らせ、そのフォルダを Netlify に落として URL で見られるようにするところまでです。Kombai で使ったクレジットは 63、Netlify は無料、クレジットカードはどちらにも出していません。

公開の手順そのものは、フォルダを落として、登録して、「Make public」を押すの3つでした。。

1つ注意があります。Kombai が入れた仮の連絡先は、押すと本当にそのアドレスのページに飛ぶ形で作られていて、今回のものは実在する人のアカウントに当たっていました（画面ではその部分を隠しています）。AI が適当に付けた名前が本物と重なることはあるので、公開する前に、名前・メール・SNS の所は自分のものに変えるか、消しておいてください。Kombai に「連絡先を〜に変えて」と頼んで、直したフォルダを更新の枠に落とせばokです。

次へ進む人に

ここまでで使わなかったけれど、Kombai の画面に出てきた言葉を3つだけ。どれも今回は試していないので、名前と役割だけです。

React：ページ2の「Proposed tech stack」で「Vanilla JS」の代わりに出てくる選択肢の1つ。ページの部品（ボタン、一覧など）を使い回せるようにした作り方で、何十ページもあるサイトやアプリを作る時に使います。1ページなら要りません。
GitHub：ファイルの変更の履歴を預けておく場所。Kombai は「Open folder…」でこの履歴付きのフォルダを開いて、その中で作業できます。Netlify も GitHub と繋ぐと、ファイルを更新するたびに自動で公開し直してくれます。今回のドラッグ＆ドロップは、その手動版です。
リポジトリ：GitHub に預けた1つのフォルダのこと。Kombai のチャットに「空のリポジトリ構成を確認します」と出てきたのは、このことです。

自分の名前で本当に使う1ページを作るなら、ページ2の頼み方で名前と連絡先を最初から指定して、ページ3の手順で公開するだけです。