ChatGPT Sitesを使うと、会話しながらWebサイトをかなりのところまで作ることができます。
実際に、Nuxtで試してみました。
しかし作業を進めようとすると、ひとつ壁にぶち当たります。
このサイト、どうやってGitHubやローカル環境に持っていけばいいの？
Sitesの画面を探しても、少なくとも私が確認した範囲では、分かりやすい「GitHubへエクスポート」といったボタンは見当たりませんでした。
しかし実際に試してみると、GitHubプラグイン（Codex Connector）を使うことで、ソースコード一式をGitHubのリポジトリへコピーできました。
さらに、そのリポジトリをWindowsのローカル環境へcloneし、npm install → npm run devまで実行。
Sitesで作ったNuxtサイトを、そのままローカル開発へ移行できました
少なくとも私が調べた範囲では、この手順を詳しく紹介している情報はあまり見当たりませんでした。
そこで今回は、実際に試した手順と結果を共有したいと思います。
※この記事は2026年9月時点のChatGPT Sites（パブリックベータ）をもとにしています。仕様変更には注意してください。
結論：Sites → GitHub → ローカルNuxtまで移行できた
今回試した流れは次の通りです。
ChatGPT Sites
→ GitHubプラグインを接続
→ GitHub側で対象リポジトリを指定
→ WorkからGitHubへのアクセスを確認
→ ソースコード一式のコピーを指示
→ GitHubのmainブランチへ保存
→ ローカル環境へclone
→ npm install
→ npm run dev
→ ローカルで編集を継続
専用のエクスポートボタンを使ったわけではありません。
Sitesを作成しているChatGPT Workから、接続したGitHubリポジトリへソースコードをコピーするよう指示するという方法です。
冒頭で述べた通り成功し、ローカル環境でも問題なくNuxtサイトを起動できました。
1．GitHubに空のリポジトリを作る
まず、GitHub側にコピー先となるリポジトリを作成しました。
今回は、
your-account/sample-site
というPrivateリポジトリを用意しています。
既存ファイルとの競合を避けるため、READMEや.gitignoreなども作らず、空の状態から開始しました。
2．ChatGPTにGitHubプラグインをインストールする
ChatGPTの「プラグイン」からGitHubを探します。
GitHubプラグインを開くと、「プラグインをインストール」という項目があります。
インストールを進めると、GitHub側でChatGPT Codex Connectorのアクセス設定を行います。
補足として、私が詰まった点。
GitHubとChatGPTは同じGoogleアカウントでなくてもOKです
GitHubは仕事用とプライベート用を作っていて、今回は仕事用のGoogleアカウント。
ChatGPTはプライベート用のGoogleアカウント。
そのため迷いました。
結論としては、コピー先リポジトリを所有しているGitHubアカウントでConnectorを認証してください。
3．アクセスできるリポジトリを限定する
GitHub側の認証画面では、
- All repositories
- Only select repositories
を選択できます。
今回は安全のため、Only select repositoriesを選択しました。
そして、先ほど作成したyour-account/sample-siteだけを指定します。
これなら、ChatGPT側に許可するGitHubリポジトリを必要なものだけに限定できます。
4．まずは読み取りだけできるか確認する
いきなりソースコードをコピーさせるのは少し怖いので、まず接続確認だけ行いました。
Workから次のように指示します。
GitHubの
your-account/sample-siteリポジトリにアクセスできるか確認してください。
現時点では、ファイルの作成・変更・コミット・Pushなどの書き込み操作は一切行わないでください。
リポジトリが参照可能かどうかだけ確認し、結果を報告してください。
結果は、
アクセスできました。
your-account/sample-siteは参照可能です。
- 非公開リポジトリ
- デフォルトブランチ：main
- 読み取り権限：あり
となりました。
無事、GitHubとの接続に成功です
5．SitesのソースコードをGitHubへコピーする
接続を確認したら、いよいよSitesのソースコードをコピーします。
今回使用した指示は、概ね次のようなものです。
現在ChatGPT Sitesで作成しているこのWebサイトのソースコード一式を、GitHubリポジトリ
your-account/sample-siteにコピーしてください。条件：
- 現在のSites側のサイトは削除・変更しない
- GitHub側にコピーを作成するだけにする
- 表示・機能・画像などのアセットを可能な限り維持する
- 必要なプロジェクトファイル一式を対象にする
mainブランチへ反映する- 作業後に作成したファイル構成とコミット内容を報告する
- Sites側とGitHub側で差異が出る場合は、その内容も報告する
ポイントは、Sites側を変更しないことを明示していることです。
いきなり「移行する」のではなく、まずGitHubにコピーを作る形にしました。
6．実際にコピーされたファイル
結果として、GitHubのmainブランチへソースコード一式が保存されました。
今回のサイトはNuxtで作成しており、主な構成は次の通りです。
pages/ components/ assets/ main.css data/ behind.json public/ app.vue nuxt.config.* package.json README .gitignore
各ページに加えて、共通コンポーネント、CSS、JSONデータ、画像なども含まれています。
最終的に、ソースコードと画像を含む全21ファイルについて、Sitesの作業ファイルとGitHub側が一致していることを確認できました。
7．コピーされなかったもの
すべてがそのままGitHubへ入るわけではありませんでした。
今回除外されたのは、
- Sites専用の公開設定
- 環境固有のdistリンク
- 生成済み出力
node_modules
などです。
ただし、これらは通常Gitリポジトリに保存する必要のないものも多いため、ローカル開発へ移行するためのソースコードとしては問題ありませんでした。
実際、このあとローカル環境で依存関係をインストールし直すことで、Nuxtサイトを起動できています。
8．未公開のSites編集内容もコピーされた
今回ひとつ興味深かったのが、
公開中のSitesだけでなく、編集中だった未公開の変更もGitHubへコピーされました
実際、Aboutページで調整していた、
- コンテンツ幅
- 背景色
- 境界部分
などの未公開変更もGitHub側に含まれていました。
今回の挙動を見る限り、「現在公開されているSiteをダウンロードする」というより、現在のSites作業環境にあるソースコードをGitHubへコピーすると考えた方が近そうです。
これは移行時にはかなり重要なポイントです。
公開中のサイトと編集中の状態が異なる場合は、
どの状態がGitHubへコピーされたのか確認した方がいいと思います
9．GitHubからローカル環境へcloneする
GitHubへのコピーが完了したので、次はWindowsのローカル環境へ移します。
今回は、
C:\web-projects\sample-site
で開発することにしました。
GitHubからリポジトリをcloneし、プロジェクトディレクトリへ移動します。
git clone （リポジトリURL） cd sample-site
その後、依存関係をインストールします。
npm install
node_modulesはGitHubへコピーされていないため、package.jsonなどをもとにローカル環境で必要なパッケージをインストールします。
10．npm run devでNuxtを起動する
インストールが終わったら、
npm run dev
を実行します。
今回の環境ではNuxtの開発サーバーが正常に起動し、
http://localhost:3000/
からサイトを表示できました。
これで、
Sites上で作っていたサイトをローカル環境に再現できました。
ページ遷移、画像やCSSの読み込みも確認済み。
現在はローカルの方で編集作業を続けています。
まとめ
最悪「Sitesからソースコードを取り出せれば……」くらいに考えていましたが、実際にはほぼまるっとコピーできました。
ChatGPT Sites→ GitHubで管理→ ローカルで本格的に調整・開発
という流れが、少なくとも今回作成したNuxtサイトでは成立しています。
「ここからはGitHubで管理したい」
「AIで作ったサイトを自分の開発環境へ持っていきたい」
「ローカルで細かく調整して完成させたい」
という場合には、かなり使えそう。
ぜひ試してみてください
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。