Claude Codeで作ったサイトを公開する方法|サーバーにアップする手順

AIで「稼ぐ・作る」

※本記事はプロモーション(アフィリエイト広告)を含みます。実際に使って良かったものだけを紹介しています。

Claude Code(デスクトップアプリ版)でページは作れた。
でも、それをどうやって世界に見せるのか、そこで手が止まっていませんか。

先に結論です。サイトの公開は「① サーバーを借りる → ② 住所(ドメイン)を紐付ける → ③ ファイルを置く → ④ 表示を確認する」の4フェーズで終わります。②はまとめ契約ならほぼ自動で済むので、実際に手を動かすのは3つだけ。黒い画面(ターミナル)も、git も、FTPソフトも、この記事では一切使いません。すべてブラウザの管理画面だけで完結します。

この記事を読むと、こうなります。

  • 「サーバー・ドメイン・アップロード」という3つの言葉の関係が、1回で整理できる
  • 作ったHTMLファイルを、どこにどう置けばいいかが分かる
  • 公開後に「真っ白」「表示されない」になったときの原因の切り分けができる

この記事で使うツール

レンタルサーバー(月額600〜1,000円台〜。最新は公式で確認)

必要なもの:Claude Codeで作ったHTMLファイル一式、メールアドレス、支払い方法。できること:作ったサイトをインターネット上に公開する。プログラミング不要。管理画面のドラッグ&ドロップだけで完結します。

「作れた」と「公開できた」の間にある、たった1つの壁

作ったサイトは、公開しない限り、あなたのパソコンの中にしかありません。
つまり、見られるのは世界であなた1人だけ。

公開して初めて、閲覧できる人が「0人」から「世界中」に変わります。ここを越えるだけで、あなたの成果物は一気に価値を持ちます。

そして、ここでつまずく人の多くは、実は同じ場所でつまずいています。原因は技術力ではなく、言葉の団子状態です。

サーバー=土地、独自ドメイン=住所、アップロード=引っ越しという家の比喩の全体図
公開に必要なのは3つだけ。土地(サーバー)・住所(ドメイン)・引っ越し(アップロード)

この記事では、公開の仕組みを「家を建てて引っ越す」ことにたとえます。これで一気に見通しがよくなります。

  • サーバー=土地(サイトのデータを置いておく場所)
  • 独自ドメイン=住所(そのサイトにたどり着くための「〇〇.com」)
  • アップロード=引っ越し(作ったファイルを土地に運び込む作業)

「ファイルはできた。で、どこに置くの?」――この“置き場所”という発想さえ持てれば、あとは作業するだけです。難しく感じるのは、検索するとターミナル前提の記事ばかり出てきて心が折れるからで、あなたの理解力の問題ではありません。

公開までの4フェーズ(この順番だけ覚える)

サーバー契約→ドメイン紐付け→アップロード→表示確認の4フェーズのフロー図
公開はこの4フェーズ。山場は③のアップロード(といっても、ドラッグ&ドロップするだけ)

やることは4つだけです。上から順に進めれば、必ず公開までたどり着きます。

  • ①:レンタルサーバーを契約する(土地を借りる)
  • ②:独自ドメインを紐付ける(住所を決める)
  • ③:ファイルをアップロードする(引っ越し・ここが山場)
  • ④:ブラウザで表示を確認する(引っ越し完了チェック)

フェーズ①:レンタルサーバーを契約する

最初にやるのはサーバー契約です。ここで「サーバーとドメインをまとめて申し込めるプラン」を選ぶのが、初心者の最短ルートです。

まとめて契約すると、フェーズ②の「住所の紐付け」まで自動で終わります。別々のサービスで契約すると、この紐付け設定を自分でやることになり、最初の関門がひとつ増えます。
実際このブログも、サーバーとドメインをまとめて用意する方式にしています。

フェーズ②:独自ドメインを紐付ける

まとめて契約した人は、ここはほぼ自動で完了しているので読み飛ばしてOKです。

もしドメインを別会社で取得した場合だけ、「このサーバーで、この住所を使います」という紐付け(ネームサーバーの設定)を管理画面から一度おこないます。これも入力欄に指定の値を貼るだけで、コードは書きません。

フェーズ③:ファイルをアップロードする(山場)

public_htmlの中に置けば表示され、外に置くと誰にも見えないことを家の玄関で表した対比図
ファイルは「玄関=public_html」の中へ。外(別フォルダ)に置くと誰にも届かない

ここが本記事の核心です。FTPソフトは使いません。サーバーの管理画面にある「ファイルマネージャー」という機能を使います。手順はこれだけです。

  1. 管理画面で「ファイルマネージャー」を開く
  2. public_html というフォルダを開く
  3. その中の「自分のドメイン名」のフォルダを開く
  4. Claude Codeで作ったHTMLファイル一式を、そこにドラッグ&ドロップする

ここで一番大事なのが public_html の意味です。これは、いわば家の「玄関」。訪問者(=閲覧者)は必ずこの玄関から入ってきます。だからサイトのファイルは、必ずこの玄関の中に置く必要があります。

注意

public_html の外にファイルを置くと、それは「郵便物を家の中ではなく道端に置いた」状態です。ファイル自体はサーバーにあるのに、玄関の外なので誰も見られません。アップロードで真っ白になる原因の大半がこれです。

もうひとつ、トップページのファイル名は必ず小文字の「index.html」にします。これは家の「表札」にあたり、住所を訪ねてきた人を最初に迎えるページです。表札の名前が違うと、サーバーはどれを最初に見せればいいか分からず、迷子になります。

ポイント

作る段階でつまずきを防ぐコツ。Claude Codeに指示するとき「トップページのファイル名は index.html(小文字)にして」と最初にお願いしておくと、後で名前を直す手間がなくなります。

フェーズ④:ブラウザで表示を確認する

アップロードが終わったら、ブラウザのアドレス欄に https://自分のドメイン を入力して開きます。自分のサイトが表示されたら、公開成功です。おめでとうございます。

もし表示されなくても、慌てないでください。原因はたいてい次の3つのどれかです。

※表は左右にスクロールできます

症状 原因 対処
真っ白/エラー画面 置き場所が違う public_html内のドメインフォルダ直下にあるか確認
まだ何も出ない 反映待ち 契約直後は反映に時間がかかる。一晩置く
「保護されていない通信」 SSL未設定 管理画面で無料SSLを有効にする(ボタン1回)

正直な失敗談:私がハマった3つの落とし穴

ここは私自身がつまずいた記録です。同じ轍を踏まないように、正直に書きます。

失敗①:フォルダの中にフォルダを作って、真っ白。
アップロードはできたはずなのにサイトが真っ白。原因は、public_html の直下ではなく、自分で作った別フォルダの中にファイルを入れていたことでした。アップロードの成否より「どこに置いたか」が9割です。玄関の中に、もうひとつ小部屋を作ってそこに隠していた、という状態でした。

失敗②:トップを home.html にしていて、表示されず。
「トップページだから home でしょ」と思い込んでいました。小文字の index.html に直したら、あっさり表示されました。表札の名前は勝手に決めてはいけない、という教訓です。

失敗③:反映待ちを「壊れた」と勘違いして半日パニック。
契約直後、何度アクセスしても表示されず、設定を疑って半日いじり倒しました。実際は反映を待つ時間だっただけ。翌朝には普通に表示されていました。すぐ出ない=失敗、ではありません。一晩置くのが正解でした。

結論:明日そのまま真似できるチェックリスト

公開でやることは、これだけです。上から順に確認すれば迷いません。

  • □ サーバーとドメインをまとめて契約した(=住所の紐付けが自動で完了)
  • □ 管理画面のファイルマネージャーを開いた(FTPソフトは不要)
  • public_html →ドメイン名フォルダの中にファイルを置いた(玄関の中)
  • □ トップページは小文字の index.html(表札)
  • □ 表示されないときは「置き場所・反映待ち・SSL」の順に切り分けた

あわせて読みたい

Claude Codeでホームページを作る5ステップ|準備から公開までの全体像

そもそもサイトをどう作るのか。準備から公開までの流れを1本で。この記事は、その最後「公開」を深掘りした続きです。

「作れる人」から「公開して届けられる人」へ

ここまで来たあなたは、もう「作れるだけの人」ではなく「公開して人に届けられる人」です。この差はとても大きい。作品は、人の目に触れて初めて仕事になり、実績になります。

サーバーとドメインは、その最後のひと押しに必要な道具です。誇張なく言えば、これがなければ公開できません。逆に言えば、これさえ用意すれば、あなたが作ったものは今日から世界に出せます。

このブログで使っているサーバーについて

私自身、このブログ(ai-jissen-log.online)を ConoHa WING で運営しています。決め手は「サーバーとドメインを、まとめて1か所で用意できた」ことでした。

  • WINGパックなら、サーバー契約と同時に独自ドメインも取得できる
  • 別々のサービスで申し込む手間がなく、最初の設定でつまずかなかった
  • 表示が速く、初心者でも管理画面で迷いにくい
  • WordPressの設置が数クリックで終わる

正直、最初は「サーバーとドメイン、どこで揃えるの?」が一番の不安でした。でも結果的に、ConoHa WINGでまとめてしまうのが、初心者が公開までたどり着く一番ラクな道でした。

国内最速クラスのレンタルサーバー【ConoHa WING】を見る

※料金やドメイン特典はキャンペーンで変わります。更新時の料金が初年度と異なる場合もあるので、契約前に公式サイトで最新の条件を確認してください。

あわせて読みたい

Claude Codeでホームページを作る5ステップ|準備から公開までの全体像

まずは全体像から。作る流れをつかんでから、この公開編に戻ってくると迷いません。


Claude Codeでサイトを作る前の準備|最初にそろえるもの

作りはじめる前に用意しておくと、公開までがスムーズになるものをまとめました。


Claude Codeでサイト作成中につまずくポイントと対処法

作成の途中でよくある詰まりどころと、その抜け方をまとめた1本です。

コメント

タイトルとURLをコピーしました