ChatGPTで作ったサイトを
公開リンクにする
ChatGPTから出力したHTML、CSS、JavaScript、Reactのフロントエンドを確認し、HTTPSの公開リンクとしてテスト、共有、独自ドメイン接続まで進められます。
公開しやすいChatGPT出力
DeployPagesに向いているのは静的なフロントエンドです。サーバー、データベース、認証、秘密鍵が必要な部分はバックエンドと分けます。
単一の HTML ファイル
CSS と JavaScript を含む index.html なら、ファイルをアップロードしてすぐ公開リンクを確認できます。
複数ファイルの静的サイト
HTML、CSS、JS、画像、フォントが分かれている場合は、相対パスが壊れないようフォルダごとアップロードします。
React / Vite プロジェクト
先に本番ビルドを実行し、ソースではなく dist や build などの出力フォルダをアップロードします。
フレームワークの静的書き出し
静的ファイルを生成できる構成なら公開できます。SSR、API routes、データベース処理は別の実行環境が必要です。
プロンプトから公開URLまでの手順
公開できるファイル構成で出力してもらう
index.html、style.css、script.js、素材フォルダなど、ファイル名と配置が分かる静的フロントエンドとしてChatGPTに出力してもらいます。
必要なファイルをまとめて保存
HTML だけをコピーせず、参照されている CSS、JavaScript、画像、フォントを同じ相対パスで保存します。
アップロードして実ページを確認
フォルダ全体をDeployPagesにアップロードし、公開リンクでレイアウト、リンク、画像、フォーム、コンソールエラーを確認します。
AI生成コードを公開する前に
見た目が整っていても、公開時には足りないファイル、仮文言、危険な前提が表に出ます。
仮文言を置き換える
仮のメールアドレス、ダミーテキスト、サンプル価格、架空のリンク、実在しない推薦文を公開前に確認します。
アセットパスを確認する
画像や stylesheet を参照している場合、そのファイルがアップロードするフォルダ内に同じ相対パスで存在するか確認します。
秘密情報を外す
非公開APIキー、データベースURL、サービストークン、管理者資格情報をフロントエンドコードに含めません。
実ブラウザでテストする
公開リンクをデスクトップとスマートフォンで開き、コンソールエラー、フォーム、外部リンク、レスポンシブ表示、読み込みを確認します。
ChatGPT 生成サイトでよくある問題
チャット上のプレビューでは動くのに、アップロード後に崩れる
プレビューは不足ファイルを見えにくくすることがあります。参照されているファイルをすべて保存し、メインHTMLと一緒にフォルダごとアップロードします。
画像が表示されない
ChatGPTに必要な素材を一覧化させ、各ファイルが実際にあるか確認します。架空の画像パスは実ファイルか安定した公開URLに置き換えます。
フォームを押しても何も起きない
静的ホスティングはフォームUIを表示できますが、送信先は自動では作られません。フォームの送信先、サーバーレス関数、外部サービスを使います。
React 版をそのままアップロードしても動かない
依存関係を入れて本番ビルドを実行し、生成された出力フォルダをアップロードします。ソースファイルやpackage.jsonは公開用の静的サイトではありません。
ChatGPT 生成サイト FAQ
ChatGPT Artifacts のコードも公開できますか？
はい。ファイル一式や完成したフロントエンドであれば、静的ファイルをそのままアップロードできます。React形式なら先にビルドし、生成された出力フォルダを使います。
ローカル画像や素材を使っている場合は？
画像、スタイル、スクリプトの相対パスを保つため、フォルダ全体をアップロードします。ローカル素材を参照しているのにHTMLだけをアップロードすると壊れます。
最初の公開後に更新できますか？
はい。ChatGPTで修正版を作り、更新後のファイルをアップロードすれば、既存の公開を新しいビルドに置き換えられます。
ChatGPTが生成したバックエンドコードもここで動きますか？
この静的公開手順では動きません。DeployPagesはフロントエンド出力を公開します。バックエンドルート、データベース、認証コールバック、非公開キーはバックエンドやサーバーレス実行環境側に置きます。
公開前に ChatGPT へ何を確認させるべきですか？
必要なファイル一覧、仮文言の削除、相対パス、フロントエンドに秘密情報を入れないこと、バックエンドが必要な箇所を説明させます。