ターゲット読者：AI（v0、ChatGPT、Claude、Windsurf など）を使用してウェブページのファイルを生成しましたが、
index.htmlを実際にインターネットに公開し、ドメイン名で他の人がアクセスできるようにする方法がわかりません。
📺 ビデオチュートリアルもBilibiliで同時に公開中。画像やテキストと合わせて視聴するとより分かりやすいです 👇
ビデオリンク：https://b23.tv/kUBOrLl
なぜ「デプロイ」が必要なのか？
AIを使ってウェブサイトを作成するのは最初のステップに過ぎません。最終的に手に入るのは一連のファイルです：
my-website/
├── index.html
├── style.css
├── script.js
└── images/これらのファイルは今のところあなたのコンピュータ内にしかありません。他の人がアクセスするためには、以下の3つが必要です：
- ウェブサイトのファイル：AIによって生成されたもの。
- ドメイン名：ブラウザで入力するURL。
- ホスティングサーバー：ファイルを保存し、ドメイン名がアクセスされたときにファイルを送信するサーバー。
このチュートリアルでは以下の組み合わせを使用します：
- KataBump：無料でセカンダリドメイン名（例：
yourname.kdns.fr）を取得する。 - Cloudflare Drop：ローカルフォルダをドラッグ＆ドロップまたは選択してアップロードすると、アクセス可能なウェブサイトが自動的に生成される。
- Cloudflare：ドメイン名の解決、HTTPS証明書、グローバルCDNの高速化を提供する。
このプロセスにはクレジットカードが不要で、サーバーの購入やLinuxの知識も必要ありません。
準備するもの
始める前に確認してください：
- メールアドレス：KataBumpとCloudflareに登録するためのもの。
- AIによって生成された静的ウェブサイトのフォルダ：ルートディレクトリには
index.htmlが含まれている必要があります。 dashboard.katabump.comとcloudflare.comがインターネットからアクセス可能であること。
静的ウェブサイトとは？
静的ウェブサイトとは、HTML、CSS、JavaScript、画像などのフロントエンドファイルのみを含み、バックエンドのデータベースやNode.js/Pythonサービスがないウェブサイトのことです。AIによって生成されたランディングページ、個人のホームページ、ポートフォリオ、ブログテンプレートなどがこれに該当します。
AIツールが出力したのが.zipという圧縮ファイルであれば、まずコンピュータに解凍し、フォルダのルートディレクトリにindex.htmlがあることを確認してください。
全体の流れ
プロセスは大きく4つのステップに分かれます：
| ステップ | プラットフォーム | 目的 |
|---|---|---|
| 1 | KataBump | 無料でドメイン名を取得する |
| 2 | Cloudflare | ドメイン名をCloudflareにホスティングし、ネームサーバーのアドレスを取得する |
| 3 | KataBump | Cloudflareのネームサーバー情報をKataBumpに入力する |
| 4 | Cloudflare Drop | ウェブサイトのフォルダをアップロードし、デプロイして自分のドメイン名にバインドする |
以下に各ステップの詳細を順に説明します。
第1ステップ：KataBumpで無料ドメイン名を取得する
1. KataBumpを開いてログインする
公式コントロールパネルにアクセスします：
https://dashboard.katabump.com/アカウントがない場合は、ページ上の「Create an account」をクリックしてメールアドレスで登録してください。既にアカウントがある場合は、メールアドレスとパスワードを入力してログインします。ログインページではDiscordを使った迅速なログインも可能です。
2. 「My Domains（マイドメイン）」に入る
ログインに成功すると、左側のメニューから「My Domains（マイドメイン）」をクリックします。
3. 最初のドメイン名を取得する
ページ上の「Get my first domain（最初のドメイン名を取得する）」ボタンをクリックします。
4. ドメイン名を入力する
ドメイン名の入力欄に希望のプレフィックスを入力し、利用可能な無料のサフィックスを選択します。以下のことをお勧めします：
- プレフィックスには英字、数字、ハイフンのみを使用し、中国語や特殊な記号は避けてください。
.kdns.frなど「Free（無料）」と表示されているサフィックスを選択してください。- 最終的に取得する完全なドメイン名をメモしておいてください。例：
yourname.kdns.fr
5. 取得に成功
ドメイン名が利用可能であれば、緑色の成功メッセージが表示され、ドメイン管理ページに移ります。ページには完全なドメイン名、有効期限、ネームサーバーの設定情報が表示されます。
重要なヒント：完全なドメイン名（例：
yourname.kdns.fr）をコピーしておいてください。後ほどCloudflareでドメイン名を追加する際に必要になります。
第2ステップ：ドメイン名をCloudflareにホスティングする
Cloudflareは世界的に有名なCDNおよびDNSサービスプロバイダーで、無料のドメイン名解決、SSL証明書、DDoSの基本的な保護を提供しています。先ほど取得した無料ドメイン名をCloudflareにホスティングし、Cloudflare Dropを使用してデプロイし、自分のドメイン名にバインドします。
1. Cloudflareにログインする
以下のURLにアクセスします：
https://dash.cloudflare.com/loginメールアドレスで登録またはログインします。既にアカウントがある場合は、そのままログインしてください。
2. サイトを追加する
ログイン後、「Add a site（サイトを追加）」をクリックします。
まず「Add a domain（ドメインを追加）」ボタンをクリックしてドメインの追加プロセスに入ります。KataBumpで取得した完全なドメイン名（例：yourname.kdns.fr）をドメイン名の入力欄に貼り付けて、「Continue（続ける）」をクリックします。
3. 無料プランを選択する
Cloudflareではプランを選択するように求められます。「Free（無料）」を選択してください。
4. アクティベーションを続ける
「Continue（続ける）」をクリックして、ネームサーバーの設定ページに進みます。
5. Cloudflareのネームサーバーを取得する
Cloudflareから2つのネームサーバー（Nameserver）が割り当てられます。例：
ada.ns.cloudflare.com
greg.ns.cloudflare.comアカウントやドメイン名によって割り当てられるサーバーは異なる場合があるので、ページに表示された内容に従ってください。
これら2つのアドレスをコピーしておき、次のステップでKataBumpに入力します。
6. KataBumpに戻り、ネームサーバーを設定する
KataBumpのドメイン管理ページを開き、「Nameservers」エリアを探します。
Cloudflareから提供された2つのネームサーバーのアドレスをそれぞれNS1とNS2に入力し、「Save nameservers」をクリックして保存します。
注意：ネームサーバーの変更は通常、世界中で効力を発揮するまでに数分から数時間かかります。Cloudflareからすぐに更新が検出されなかったとのメッセージが表示されても、根気強く待ってください。何度も変更する必要はありません。
7. Cloudflareで更新が確認されたかを確認する
ネームサーバーの設定が完了したら、Cloudflareのアクティベーションページに戻り、「I have updated the nameservers」ボタンをクリックします。
Cloudflareがドメインをチェックします。設定が正しければ、ドメインの状態は「Active（アクティブ）」に変わります。
第六段階：Cloudflare Dropを使用してウェブサイトをデプロイする
Cloudflare DropはCloudflareが提供する公式の静的ウェブサイトアップロードツールで、ローカルのフォルダーやzipファイルを直接アップロードすることで、アクセス可能なウェブサイトを生成できます。
1. Cloudflare Dropを開く
以下のURLにアクセスします：
https://www.cloudflare.com/drop/シンプルなオレンジ色のドラッグアップアップロードページが表示されます。そこには以下のように書かれています：
Drop a folder. Or a zip.
2. アップロード方法を選択する
ページには「Browse folders」と「Browse zip」の2つのボタンがあります。ウェブサイトのフォルダーを解凍しているので、「Browse folders」をクリックします。
3. ウェブサイトのフォルダーを選択する
ポップアップするファイル選択器で、AIによって生成されたウェブサイトのファイルが保存されているフォルダーを見つけて選択します。
重要な注意：必ずフォルダー自体を選択してください。単一の
index.htmlを選択してはいけません。また、フォルダーのルートディレクトリには必ずindex.htmlが含まれていなければなりません。そうでないと、デプロイ後にエラーが発生したり、ページが空白になったりします。
4. アップロードを待つ
アップロード処理中に進捗状況が表示されます。ファイルのサイズやインターネットの速度によっては、数秒から数分かかることがあります。
5. デプロイが成功した
アップロードが完了すると、Cloudflareが自動的にデプロイを行い、一時的なドメイン（例：xxxxx.pages.dev）が生成されます。
この時点では、一時的なドメインを使用してウェブサイトにアクセスできますが、まだ自分のドメインにはリンクしていません。
第七章、第四段階：サイトの認領と独自ドメインの設定
KataBumpで取得した無料ドメインをウェブサイトで使用するには、Cloudflare Dropのサイトを自分のCloudflareアカウントに認領し、独自のドメインを追加する必要があります。
1. 「Claim」をクリックして認領する
デプロイが成功したら、ページ上の「Claim」ボタンをクリックしてください。
2. 再度認領を確認する
システムは新しいページに移動し、再度認領ボタンをクリックして確認を完了します。
3. Cloudflareアカウントを選択する
先ほどログインしたCloudflareアカウントを選択してください。
4. すぐにドメインを追加する
認領が成功すると、Cloudflare Dropのウェブサイト管理画面に移ります。「すぐにドメインを追加」をクリックしてください。
5. 無料ドメインを選択する
ポップアップされたドメインリストから、KataBumpで取得したドメインを選択してください。
6. ドメインの追加が成功したことを確認する
追加が成功すると、「ウェブサイト管理」ページに自分のドメインが「追加されたドメイン」のセクションに表示されます。
7. ドメインを使用してウェブサイトにアクセスする
ブラウザを開き、自分のドメインを入力してください。例えば：
https://yourname.kdns.frすべてが正常に動作していれば、AI制作のウェブサイトが正式にオンラインになります！
第八章、よくある質問とトラブルシューティング
1. ドメインにアクセスすると「サイトが見つかりません」または404エラーが表示される
- Cloudflare Dropのデプロイが成功し、「Deploy successful」と表示されていることを確認してください。
- ドメインがCloudflare Dropのサイトに追加されていることを確認してください。
- DNSの設定が全世界で有効になるまで5〜10分待ってください。
- Cloudflareのドメイン概要ページでドメインの状態が「Active（アクティブ）」であることを確認してください。
2. ドメインを開いてもCloudflareのデフォルトページが表示される
- KataBumpで設定したネームサーバーがCloudflareが提供する2つのアドレスに正しく変更されているかを確認してください。
- ネームサーバーの設定後、十分な時間（最大24時間）が経過しているかを確認してください。
3. アップロード後にウェブサイトのデザインや画像が失われる
index.htmlで参照されているCSS/JS/画像のパスが正しいかを確認してください。- AIが生成したのが相対パス（
./style.cssの場合）であれば、通常問題ありません。 - 絶対パス（
/style.cssの場合）であれば、ファイルが実際に存在するか、相対パスに変更してください。
4. ウェブサイトが空白のまま開く
- フォルダのルートディレクトリに
index.htmlがあることを確認してください。 - ファイルのエンコードがUTF-8であることを確認してください。
F12の手順に従ってブラウザのコンソールを開き、JavaScriptエラーがないかを確認してください。
5. 配置済みのウェブサイトをどのように更新するか？
Cloudflare Dropでは、ローカルのファイルを自動的に同期する機能は現在サポートされていません。ウェブサイトを変更した後は、フォルダを再パッケージ化または選択し、再度アップロードする必要があります。アップロードに成功すると、元のドメイン名が自動的に最新バージョンにリダイレクトされます。
九、まとめ
このチュートリアルを通じて、以下のことを完了しました：
- KataBump を利用して無料でドメイン名を取得しました。
- 取得したドメイン名のDNS設定をCloudflareに委託しました。
- Cloudflare Dropを使用して静的ウェブサイトをアップロードし、デプロイしました。
- 取得したドメイン名をCloudflare Dropのサイトにリンクしました。
- 自分で指定したドメイン名を通じてウェブサイトにアクセスできるようになりました。
このプロセスでは、サーバーの購入やNginx/Apacheの設定、クレジットカードの使用は一切必要ありません。AIを活用して迅速にウェブサイトを作成したい初心者にとって、これは現在最もコストパフォーマンスの高い方法の一つです。
より長期間無料でドメイン名を利用したい場合は、別の記事「ゼロコストでウェブサイトを構築する：無料で永久的なセカンドレベルドメインを取得し、Cloudflareにワンクリックでホスティングする詳細ガイド」も参考にしてください。