こんにちは😊 前回までで、Claude Codeと一緒にホームページを作って、デザインや画像も少しずつ整えてきましたね。
今回は、いよいよ最後のステップです✨ ここまで作ってきたホームページを、インターネット上に公開してみましょう。
今の状態では、ホームページは自分のパソコンの中にあるだけなので、基本的には自分しか見られません。今回公開すると、スマホから見たり、家族や知り合いにURLを送って見てもらったりできるようになります。
「公開ってサーバーとか契約しないといけないんじゃないの？」と思うかもしれませんが、大丈夫です。今回はCloudflare Pages（クラウドフレア・ページス）という無料のサービスを使います✨
今日が終わるころには、自分で作ったホームページをスマホから開いたり、誰かにURLを送ったりできるようになります😊
今まで作ってきたホームページのファイルは、自分のパソコンの中にあります。なので、自分のパソコンでは見られますが、他の人のスマホやパソコンからは見られません。
今のホームページが「自分の家に飾ってある作品」だとすると、家に来た人しか見ることができませんよね。それを誰でも見られる場所に展示するのが、公開のイメージです😊
「サーバー」という言葉も難しく感じますが、ホームページのファイルを置いておく場所くらいに思っておけば大丈夫です。公開する方法もいくつかありますが、今回はその中でも一番簡単な静的ホスティングという方法を、Cloudflare Pagesというサービスで使います。
Cloudflare Pagesは、作ったホームページのファイルをアップロードすると、インターネット上で見られるURLを発行してくれるサービスです。無料で使え、サーバーを別で契約する必要もありません。
公開すると〇〇.pages.devという形のURLが自動で作られ、そのURLを開けば誰でもホームページを見られます。
ブラウザでホームページを開いたときに表示される、鍵マークの安全な通信のことをHTTPSと呼びます。今は言葉を覚えなくて大丈夫、これもCloudflare Pages側で自動的に設定してくれます😊
Cloudflareのサインアップページをブラウザで開き、メールアドレスとパスワードを入力して「Create Account」をクリックします。クレジットカードの登録は必要ありません。
登録すると、入力したメールアドレスに確認メールが届きます。メールの中のリンクをクリックすれば、アカウントの準備は完了です✨
Cloudflareにログインしたら、左側のメニューから「Workers & Pages」を選び、その中の「Pages」を開きます。ここが、今回ホームページを公開する場所です。
「え、英語なの？」とちょっと不安になるかもしれませんが、大丈夫です😊 今回使うところは限られていますし、一緒に画面を見ながら進めれば迷いません。
アップロードの前に、ホームページのフォルダの中身を一度確認しておきましょう。今回の例ではyamada-plumbingというフォルダですね。この中にindex.htmlが入っていることを確認します。
Cloudflare Pagesでは、index.htmlがホームページの入口になります。お店でいう正面玄関のようなもので、「まずこのファイルを表示すればいいんだな」と自動で判断してくれます。style.cssやimagesフォルダなどがあれば、それも一緒にアップロードします。index.html 1つにまとまっている場合も、それで大丈夫です😊
Pagesの画面から「Create」→「Pages」→「Upload assets」の順に選びます。続いてプロジェクト名を入力します。
この名前は、公開されるURL（yamada-plumbing.pages.dev）の一部になります。英数字とハイフンで付けておけば大丈夫です😊
ファイルを入れるエリアに、ホームページのファイルをアップロードします。ここでひとつだけ注意があります。
「yamada-plumbing」というフォルダそのものではなく、フォルダを開いてその中にあるファイル（index.htmlが一番上にある状態）をアップロードします。ドラッグ&ドロップでも、画面をクリックして選んでもOKです。
ファイルがアップロードできたら「Deploy site」をクリックします。「デプロイ」は難しく考えず、このホームページをインターネットに公開するくらいの意味でOKです。少し待って、緑色のチェックマークと「Success」が出れば公開完了です🎉
何もなかったフォルダから始めて、Claude Codeにホームページを作ってもらって、デザインを直して、ついにインターネット上に公開できました。ここまで来たら、本当にすごいことです✨
公開が完了すると、〇〇.pages.devというURLが表示されます。今回ならyamada-plumbing.pages.devですね。このURLをクリックすると、先ほどまで自分のパソコンで見ていたホームページがブラウザに表示されます✨
ぜひスマホでも同じURLを開いてみてください。そして、このURLは誰かに送ることもできます。LINEやメールで家族や知り合いに送って、「このサイトどう思う？」と見てもらいましょう😊 実際に誰かのスマホで自分の作ったホームページが開くと、「本当に公開できたんだ！」と実感できると思います。
「公開したら、もう直せない」ということではありません😊 まずVS CodeとClaude Codeを使ってホームページを修正します。
修正できたら、Cloudflare Pagesで今のプロジェクトを開き「Create new deployment」を選びます。そこに修正したファイルをアップロードして、もう一度「Deploy site」をクリックすれば、新しい内容に更新されます。URLはそのままなので、心配しなくて大丈夫です。
まず公開してみて、誰かに見てもらって、気になるところがあったらまた直す。それでOKです。「会社名.com」のような独自ドメインを設定することもできますが、今回は覚えなくて大丈夫。自分のホームページをインターネット上に公開できた。ここまでできれば十分です✨
お疲れさまでした😊 今回は、ここまで作ってきたホームページを実際にインターネット上へ公開しました。
「Claude Codeって何？」から始まって、ホームページの基本を知り、作ってもらい、少しずつ直し、そしてついに自分で作ったホームページを誰かに見てもらえるところまで来ました🎉
大切なのは、コードを全部覚えることではありません。分からないことがあったときに、Claude Codeに相談しながら自分で形にしていけること。ホームページは公開して終わりではなく、公開するところからがスタートです✨ ここまで本当にお疲れさまでした。