ChatGPTで作ったホームページ、公開するまでの手順をぜんぶ解説【無課金で完結】
こんな方向けの記事です
- お金をかけずに、生成AIを活用してホームページを作ってみたい方。
- ChatGPTやGemini、Claudeにお願いしてホームページのコード（HTMLなど）を作ってもらったものの、「どうやったら公開できるかよく分からない」という方。
- なるべく手間や費用をかけず、ちょっとしたホームページを公開したい方。
ChatGPTでホームページは作れる？
私たちが普段パソコンやスマートフォンで見ているホームページは、「HTML」と「CSS」という言語で書かれたソースコードでできています。
ホームページを作ってみたい人は、ChatGPTに「HTMLとCSSを書いて」と頼むだけでOKです。最近はやりの「Codex」や「Claude Code」といったエンジニア向けのツールを使う必要はありません。普段お使いのChatGPTやGeminiの、いつものチャット画面で話しかけるだけです。
一方で、「会員登録やログインの機能をつけたい」「ユーザーが画像や文章を投稿できる機能を作りたい」といった、データを保存したり処理したりする仕組みが必要な場合は、HTMLとCSSだけでは実現できません。この記事では、そうした複雑な機能は扱わず、あくまで「見た目のあるホームページを作って公開する」ところまでを対象にします。
ChatGPTに頼めない「公開」という壁
ChatGPTが作ってくれるのはあくまで「ホームページの設計図」であるコードそのものです。そのコードをインターネット上の誰でもアクセスできる場所に置いて、はじめて「ホームページが公開された」状態になります。
昔ながらのやり方だと、この「ファイルの置き場所」を用意するために、レンタルサーバーを契約し、FTPソフトと呼ばれる専用のツールを使ってサーバーにファイルを転送する、という手順を踏む必要がありました。専門用語も多く、かなりハードルの高い作業です。
この記事では、そういったハードルの高い作業をせず、エンジニアではない方もソースコードを貼るだけで簡単にホームページが公開できる方法（ハルダケを使った手順）をご紹介します。
ChatGPTを使うときにつまずきやすいポイント
ChatGPTをはじめとした生成AIに頼めば、驚くほど簡単にソースコードを書いてくれます。ここでは、簡単な手順の中でもつまずきやすいポイントをご紹介します。
HTMLとCSSを分けず、1つのファイルにまとめる
セットで語られることの多いHTMLとCSSですが、それぞれ別のファイルとして作成して取り扱うのが一般的です。そのためChatGPTに「ホームページを作って」と頼むと、気を利かせてHTMLファイルとCSSファイルを別々に生成してくることがあります。
HTMLとCSSは相互に依存した関係にあるため、別々のファイルで作ってしまうとその接続がうまくいかないことがあります。エンジニアにとってはごく初歩的な問題なので簡単に解決できますが、ソースコードが読めない人には対処が難しい問題です。
そこで、ChatGPTに頼むときに「CSSは別ファイルにせず、HTMLファイルにまとめて書いて」と一言添えましょう。これは「内部CSS（インラインスタイルシート）」と呼ばれる正式な方法で、無用なエラーを防ぐことができます。
専門的で高度なソースコードは避ける
ChatGPTに「ホームページを作って」とお願いすると、気を利かせてHTMLとCSSよりも本格的で高度なコードで書き始めてしまうことがあります。大規模なWebシステムを作るにはReact・Vue・Next.jsといったフレームワークやライブラリを使うのが一般的ですが、これらは完全にプロ用です。優秀な分、専門的な知識がないと扱えません。
これを避けるには、最初にお願いする段階で「HTMLとCSSで書いてください」とはっきり指定しておくのが一番確実です。
AIが書いたソースコードをどうすればいいか分からない
ChatGPTがやってくれるのは、あくまでソースコードを書くところまでです。今のところは、人間の代わりにレンタルサーバーを契約してくれたり、サーバーの初期設定をしたり、ファイルをアップロードしてくれたりはしません。
AIにもらったソースコードを、インターネット上の適切な場所に保存する作業は、自分の手で行う必要があります。
これらのポイントを踏まえたうえで、次の章から実際の公開手順を見ていきましょう。
ハルダケを使ったホームページの公開手順
それでは、ハルダケを使ったホームページの公開方法をみていきましょう。
1. 会員登録する
まずは画面右上の「新規登録」のボタンから会員登録します。
登録したメールアドレスに確認メールが届きます。メールアドレスを間違えていないか確認するのに必要な作業なので、届いたメールの「メールアドレスを確認する」をクリックして認証を完了させます。
2. 編集画面を開く
「新しいページ作る」をクリックします。
「コードを貼りつける」をクリックします。
3. ChatGPTが書いたソースコードをコピペします
ChatGPTが書いたコードをコピーします。コピーボタンをクリックするだけです。
コピーしたソースコードを黒いエリアにペーストします。
POINT
コピぺしたソースコードが、<!DOCTYPE html> から始まって </html> で終わっていることを確認してください。
前後に " や ` のような記号が入ってしまっている時は、<!DOCTYPE html> よりも前の文字と、</html> よりも後ろの文字を削除します。
4. プレビューを確認して名前をつける
ソースコードを貼ると、プレビューが表示されます。
名前とアドレスを設定します。
POINT
ここで設定するアドレスが、自分のホームページのURLになります。他の人が既に使っている文字列は指定できません。
5. 公開して確認する
スマホでの見え方も確認したら、公開ボタンを押します。
以下の表示が出れば、公開は完了です。
ページが表示できることを確認します。
POINT
公開が完了したページは、その瞬間から世界中の人がアクセスできます。
ただし、世界中の人がそのホームページの存在を知っているわけではありませんので、ただちに誰かに閲覧されることはありません。
まとめ
ChatGPTで作ったホームページを公開するには、コードを書いたあとにもう一段階、「サーバーに置く」という作業が必要です。GitHub PagesやNetlifyといった選択肢もありますが、専門用語につまずきやすい方には、ハルダケのようなシンプルな仕組みのサービスがおすすめです。
ハルダケでホームページを公開するのは無料です。ぜひ試しにホームページを作ってみてください。
ハルダケ編集部
ハルダケ編集部は、AIを仕事に活かしたいと考える方に向けて、実践的な情報を発信しています。運営メンバーは武蔵小杉駅前テックカフェでAI講座の運営・講師を務めており、「エンジニアになりたいわけではないけれど、AIを仕事に活かしたい」という自営業者・経営者の方々から、多くの相談を受けてきました。職業エンジニアになるための情報ではなく、本業を持つ方がAIを味方につけるための、実践的な情報発信を目的としています。