如何發布你用 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 會以你的程式碼為基礎，建立一個你可以發布並持續編輯的完整網站。

如果你還沒有在 ChatGPT 中製作網站，建議要求使用 React。它比較接近 Repaint 使用的格式，較不會在轉換過程中遺失小細節。HTML 也可以使用，任何問題之後都能透過與 Repaint 對話來修正。

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

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

規劃內容

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

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

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

規劃風格

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

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

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

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

確認計畫

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

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

第三步：生成你的網站

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

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

有時細節可能會在生成過程中遺失。如果你的原始檔案是 HTML，這種情況會更常見，因為 React 比較接近 Repaint 使用的格式。如果重要細節遺失了，你可以在下一步加以修正。

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

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

例如，你可以請 Repaint：

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

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

第五步：發布你的網站

當網站準備就緒時，點擊發布按鈕。Repaint 會將網站上線，並提供一個可分享給任何人的網址。它大概會長這樣：https://xxxxxx-xxxxxx-xxxxxx.sites.repaint.com

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

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

第六步：連結你的網域

當你準備好使用自己的 URL 時，前往網站設定 > 網域，點擊連結自訂網域。這需要付費方案，定價詳情請參閱這裡。

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

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

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

結語

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

常見問題

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

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

用 Repaint 發布需要多少費用？

將程式碼匯入 Repaint、生成網站、進行編輯和發布都是免費的。免費方案的主要限制包括：使用量有上限、無法使用自訂網域，且網站會顯示 Repaint 標誌。付費方案起價為每月 20 美元（按年計費）或每月 25 美元（按月計費），包含更多使用量、自訂網域支援，並移除 Repaint 標誌。

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

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

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

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

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

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

如果你要求 Repaint 重現原版，外觀幾乎會完全相同。偶爾會有些細節遺失，因為 Repaint 會將程式碼轉換成自己的網站格式。如果原本的 ChatGPT 版本是 HTML，轉換問題會更常見。如果遇到這種情況，你應該可以在幾次提問內修正所有問題。

如果 AI 犯了錯怎麼辦？

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

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

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

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

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

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

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

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

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