如何發布你用 ChatGPT 製作的網站

簡介

許多人正使用 ChatGPT 來製作網站。預設情況下，它會給你一個單一的 React 或 HTML 檔案。但拿到程式碼之後，下一步就不那麼明顯了。你還是得把它部署到某個地方、連結網域、讓它在手機上正常顯示，並想辦法持續編輯。

像 GitHub 和 Netlify 這類傳統開發工具可以將 HTML 檔案上線，但之後每次修改都需要處理程式碼檔案、部署作業和各種技術細節。大多數人並不想處理這些。

在本指南中，我會示範如何使用名為 Repaint 的全新 AI 工具，將你用 ChatGPT 製作的網站，變成一個真正已發布的網站。你可以從程式碼開始，發布網站，並透過與 AI 對話來進行編輯。

為什麼從 ChatGPT 發布網站很困難

ChatGPT 可以生成程式碼預覽，但它不是一個完整的網站建構工具。當你想發布網站時，它會叫你去使用其他平台，例如建議使用 GitHub、Netlify、Vercel 等開發工具，或建議用傳統的網站建構工具重建。兩者都不理想。

開發工具的優點是可以直接執行 ChatGPT 生成的程式碼，缺點則是每次修改都需要編輯特定的程式碼檔案。對於不會寫程式的人來說，這意味著為了用 AI 做些簡單的修改，必須不斷在已部署的程式碼之間進出傳送檔案。

大多數人會選擇使用 WordPress、Wix 或 Webflow 等網站建構工具來避開程式碼的複雜性。這些平台讓發布修改變得更順暢。問題在於，它們無法執行 ChatGPT 生成的網站，所以你必須手動重建所有內容。之後，每次修改也都得手動處理。

這正是你應該使用 Repaint 這類 AI 網站建構工具的原因。它兼具執行自訂程式碼的彈性，以及在同一個地方編輯和發布的便利性。

Repaint 是什麼？

Repaint 是一個用來打造網站的 AI 平台。它採用與 ChatGPT 相同、以對話為核心的工作流程。你可以用日常語言提出修改需求，檢視結果，並持續調整，直到網站符合期望。

但 Repaint 是一個完整的網站平台，而不只是生成程式碼的地方。這代表它能處理 ChatGPT 做不到的網站運營環節：

• 它會將你的網站發布上線，讓人可以實際造訪。
• 它讓你能連結自訂網域，讓網站使用你真正的 URL。
• 它讓網站維持可透過 AI 編輯的狀態，方便日後修改。
• 它能協助管理 SEO 細節，如頁面標題、描述和網站結構。
• 當網站需要擴充時，它可以建立新頁面。

這就是「生成網站預覽」和「擁有一個能長期管理的真實網站」之間的差別。

第一步：從 ChatGPT 匯入程式碼

當 ChatGPT 製作網站時，它會建立一個單一的程式碼檔案並顯示在畫布上。通常是 React，但也可能是 HTML。無論哪一種，你都可以使用畫布上方的按鈕來複製程式碼或下載檔案。

要開始，先下載 ChatGPT 為你製作的檔案，或複製它產生的程式碼。然後前往 Repaint，上傳檔案或貼上程式碼，再描述你想建立什麼。Repaint 會以這些內容為基礎，建立一個你可以發布並持續編輯的網站。

第二步：規劃 Repaint 應該建立什麼

加入程式碼後，Repaint 會在建置網站前問你幾個問題。這讓你有機會決定是要完全沿用 ChatGPT 的版本、把它當作粗略的靈感參考，或將它擴展成包含更多頁面的大型網站。

規劃內容

ChatGPT 常常會做出單頁式網站，連結是捲動到頁面區塊，而不是開啟新頁面。但大多數企業需要的不只一個頁面。所以如果你拿到的是單頁網站，可以考慮請 Repaint 將它建置為多個頁面。

你也可以趁此機會增加更多內容。ChatGPT 通常不會製作像部落格文章那樣的大量頁面。當你將網站匯入 Repaint 時，可以擴大規模，把你想要的內容全部加進去。

任何新頁面都會與你既有的風格保持一致。

規劃風格

預設情況下，Repaint 會複製你 ChatGPT 網站的風格。這意味著它會保留相同的外觀：色彩、版面配置、字體和間距。

但你不一定要沿用原本的風格。如果不滿意，你可以請 Repaint 重新設計你的網站。Repaint 可以：

• 盡可能忠實地重現原版
• 仿照你喜歡的另一個網站的風格
• 為你的內容打造自訂風格
• 由它為你決定

不用太煩惱這件事。如果你不喜歡它做出來的結果，之後也可以請它做出新的版本。

確認計畫

在生成任何內容之前，Repaint 會明確列出即將建置的內容：包括哪些頁面、什麼內容，以及採用什麼風格。仔細檢視並做最後調整。修改計畫遠比重新生成整個網站快得多。

確認後，Repaint 就會開始建立你的新網站！

第三步：生成你的網站

確認計畫後，Repaint 就會開始建置你的網站。隨著它處理每個頁面，你會看到進度訊息。簡單的首頁可能需要一兩分鐘；包含較多頁面的大型網站則可能需要更長時間。

Repaint 並非只是託管你的程式碼。它會以 ChatGPT 的版本作為素材，再依照你的計畫建置網站。如果你要求完全重現原版，它會盡量貼近原本的樣貌。如果你要求更多頁面或不同風格，它會以 ChatGPT 的版本為起點繼續延伸。

匯入後，有些細節可能需要調整。如果任何地方看起來與預期不同，你可以在下一步透過與 Repaint 對話來修正。

第四步：透過 AI 編輯你的網站

Repaint 生成第一個版本後，你會在螢幕右側看到它。現在你可以像在 ChatGPT 中一樣進行修改。你輸入想要的變更，Repaint 會更新網站，然後你檢視結果。

例如，你可以請 Repaint：

• 新增頁面
• 變更色彩或字型
• 加入聯絡表單
• 生成圖片
• 重寫文字

你可以持續修改，直到網站準備好發布為止。

第五步：發布你的網站

當網站準備就緒時，點擊發布按鈕。Repaint 會將網站上線，並提供一個可分享給任何人的網址

到這一步，你的 ChatGPT 程式碼就變成了一個真正存在於網路上的網站。你可以在手機上開啟、傳給別人，或是在實際的瀏覽器中測試。

你不需要匯出程式碼或將檔案部署到別處。從現在起，Repaint 就是你編輯和發布網站的地方。如果之後想修改，你可以請 Repaint 更新網站，然後用同一個按鈕發布新版本。

第六步：連結你的網域

當你準備好使用自己的 URL 時，只要告訴 Repaint 連接你的網域，它就會提供你需要新增的 DNS 記錄。免費試用期間及所有付費方案都包含自訂網域，定價詳情請參閱這裡。

你的網域是在 ChatGPT 和 Repaint 之外的平台上管理。它是在 GoDaddy、Namecheap 或 Cloudflare 等網域服務商處註冊的。你不需要將它搬到別處，只需在網域服務商那裡更新設定，讓網域指向你的 Repaint 網站。

如果你以前沒有做過這件事，不用擔心。請 Repaint 一步一步帶你完成，它會明確告訴你該怎麼做。

變更生效可能需要幾個小時。一旦 Repaint 顯示你的網域已驗證，你的網站就會在你自己的網域上線。

結語

ChatGPT 讓你能輕鬆建立網站的初版，但要把那段程式碼上線並持續維護仍然不容易。Repaint 讓你能將那段程式碼變成一個真正的網站，可以發布、連結網域，並持續透過 AI 編輯。將生成的程式碼變成已發布的網站，現在比以往任何時候都更簡單。

常見問題

用 Repaint 發布一個 ChatGPT 網站需要多久？

如果你的網站已經完成，應該只需幾分鐘。分享程式碼、規劃網站和生成網站通常需要 2 到 5 分鐘。之後，發布所需時間取決於你做了多少調整。

用 Repaint 發布需要多少費用？

你可以免費試用 Repaint 14 天，期間可以建立、編輯、發布網站，並連接自訂網域。付費方案每月 $25 起，包含託管和每週 AI 用量額度。

試用期結束後，工作區會暫停，直到你開始使用付費方案。你的作品會保留，隨時都可以重新啟用。詳情請參閱我們的定價頁面。

為什麼不直接使用 GitHub Pages、Netlify 或 Vercel？

你也可以這麼做，特別是如果你習慣管理程式碼。這些工具擅長將檔案上線。但任何有意義的修改都會讓你回到程式碼中，意味著你必須不斷在 ChatGPT、編輯器和託管工具之間複製檔案。

Repaint 不同之處在於它是一個完整的網站平台，而不只是提供檔案服務的地方。這代表你可以透過 AI 持續編輯、在同一個地方發布變更、管理頁面、更新 SEO 設定、優化圖片、串接表單，並使用你的自訂網域。它是為長期網站管理而打造，而不只是處理第一次部署。

我需要懂程式才能修正問題嗎？

不需要。Repaint 是為不會寫程式的人設計的。將程式碼從 ChatGPT 匯入後，你就再也不必管理程式碼。如果有任何地方看起來不對，你可以透過與 AI 對話來修正。懂程式有助於在需要時表達得更精確，但這並非必要。

網站看起來會和 ChatGPT 版本一模一樣嗎？

如果你要求 Repaint 重現原版，外觀幾乎會完全相同。偶爾會有些細節遺失，因為 Repaint 會根據你的程式碼重新建立網站，而不是直接託管原始檔案。如果遇到這種情況，你應該可以在幾次提問內修正所有問題。

如果 AI 犯了錯怎麼辦？

每次更新時，Repaint 都會儲存你網站的每個版本。你可以請 Repaint 退回上一步，它會還原到先前的版本。如果想回到某個特定的時間點，也可以手動還原任意一個先前的版本。所以你可以放心修改，不必擔心毀掉網站。

匯入後表單和按鈕還能正常運作嗎？

可以。你原本的 ChatGPT 網站上的聯絡表單可能無法運作。但當你將網站搬到 Repaint 時，它可以將表單轉成真正的聯絡表單，儲存提交內容，並在有人填寫時寄送電子郵件通知。按鈕若連結到實際的頁面或區塊，就應該能正常運作。如果按鈕沒有指向任何地方，你可以請 Repaint 為它建立連結。

Repaint 能處理我 ChatGPT 網站中的圖片、圖示和其他素材嗎？

ChatGPT 製作的網站通常不會把圖片檔案存在裡面，而是連結到託管在別處的圖片。匯入程式碼時，Repaint 可以擷取並儲存這些圖片的副本，讓它們長期保存於你的新網站中。如果你還需要新增圖片，Repaint 也可以幫你生成。

我可以新增 SEO 設定、分析工具和中繼資料嗎？

可以。你只要請 Repaint 處理即可新增自訂程式碼、分析工具和中繼資料。它可以為你設定技術性 SEO，也可以加入其他平台的程式碼片段與嵌入內容。要新增 Google Analytics，只需告訴它你的 GA ID。

Repaint 取代了主機服務，還是我仍需要另外的主機？

Repaint 是一個主機平台，它會運行你的網站。你不需要另外的主機平台，例如 GitHub Pages、Netlify、Vercel 或其他網站建構工具。