如何用 ChatGPT 做網站：三種可行的方法

用 ChatGPT 做網站，你可以有三種做法：請它寫出網站的 HTML 與 CSS，再自行放到主機上；請它規劃頁面並撰寫文案，之後在網站建置工具中完成；或是連接像 Mythex 這樣的 AI 建站工具，讓它直接在同一個 ChatGPT 對話中幫你建置、代管與發布網站。第一種方法免費，適合只有一頁的小網站；第三種則適合需要儲存資料的表單、會員登入或經常更新的網站。本指南會逐一說明每種方法的提示詞，並清楚指出各自的侷限。

ChatGPT 自己能做什麼、不能做什麼

ChatGPT 很擅長寫作，包括程式碼、標題、頁面文案與規劃。但它本身並不是主機服務商：它不會為你的網站提供公開網址，不會執行資料庫，也不會像建站工具那樣在不同專案之間保存網站檔案。下面每一種方法，都是在回答這個缺口。

方法一：ChatGPT 寫程式碼，你自己代管

這是最傳統的做法，對於簡單的靜態網站很有效，例如作品集、單頁式的行銷頁面或婚禮網站。

步驟一：要求一個完整的單檔頁面

請明確說明內容與版面：

請寫一個完整的單頁網站，所有 HTML 放在同一個檔案，CSS 放在 style 標籤內。這是為阿曼的自由插畫家 Maya Haddad 做的。區塊包括：頂部標題列（含她的名字與「為書籍與品牌繪製插畫」）、六張作品集圖片的網格（使用我之後可以替換的佔位圖片路徑）、一段簡短的自我介紹、三項服務與起始價格的清單，以及一個以 mailto 連結顯示她電子郵件的聯絡區塊。風格乾淨現代，留白充足，在手機上也能正常顯示。不要使用 JavaScript 框架。

只要求一個檔案，之後儲存與上傳都比較簡單。

步驟二：儲存並開啟

把程式碼複製到文字編輯器，存成 index.html，然後用瀏覽器開啟。如果某處看起來不對，就向 ChatGPT 描述問題，例如：「桌面版的圖片網格只有一欄，請在寬度超過 900px 時改成三欄。」

步驟三：替換佔位內容

把佔位圖片換成你自己的圖片，並替換 ChatGPT 虛構的文字。仔細核對價格、電子郵件與姓名，因為 AI 在補足空缺時總是說得很有把握。

步驟四：放上網路

把檔案上傳到 GitHub Pages 等免費靜態主機，或任何你已付費的網站主機，就會得到公開網址。若要使用自己的網域名稱，請依主機的指示操作；我們的連接自訂網域指南說明了 DNS 的部分。

方法一的侷限

• 儲存資料的表單。 聯絡表單需要一個可以接收送出內容的地方，你需要表單服務或伺服器。
• 登入與會員專區。 這些需要後端與資料庫。
• 頁面很多時。 要在十個手動貼上的檔案中，維持相同的頁首與選單，會非常繁瑣。
• 更新。 每次修改都要重新要求程式碼、貼上、再上傳一次。

方法二：ChatGPT 負責規劃，建站工具負責建置

在這種做法中，ChatGPT 負責思考與撰寫文字，網站建置工具負責建置與代管。

步驟一：和 ChatGPT 一起規劃網站

我在曼徹斯特經營一家接受蛋糕訂購的小型家庭烘焙坊。請建議我的網站需要哪些頁面、每一頁應該說什麼，以及我希望訪客在每一頁採取的一個行動。請控制在五頁以內。

步驟二：撰寫文案

請 ChatGPT 為每一頁寫出文字，然後用你自己的語氣改寫。加入 ChatGPT 不可能知道的真實細節：營業時間、價格、配送範圍，以及你的蛋糕有什麼不同。

步驟三：在建站工具中建置

把規劃與文案貼進網站建置工具。在拖曳式工具中，你把文字放進範本即可；在 AI 建站工具中，你可以用一則訊息交代整個規劃，它就會建好頁面。例如在 Mythex 網站建置工具中：

請依照這份規劃與文案，為曼徹斯特的一家家庭烘焙坊建立網站：[貼上內容]。加入一個訂購表單，會把每筆需求（姓名、電話、蛋糕種類、需要日期、留言）儲存下來，讓我能在只有我可以登入的管理頁面中看到。風格溫馨、家常，在手機上也能正常使用。

這裡的訂購表單會儲存到真正的資料庫，這是單一貼上的 HTML 檔案做不到的。關於這種路線的更多說明，請參閱如何用 AI 建置網站。

方法三：直接在 ChatGPT 中建置並發布

最新的選項，是把建站工具連接到 ChatGPT，讓 ChatGPT 能直接使用該工具的功能。你仍然停留在 ChatGPT 對話中，專案、預覽、資料庫與代管都由建站工具提供。

Mythex 透過它的 ChatGPT 應用程式（一個 MCP 連接器）運作。你可以在 Mythex 的帳戶設定中連接它；任何方案都能連接，但執行專案沙盒的工具需要 Pro 方案。連接後，你可以對 ChatGPT 說類似這樣的話：

請使用 Mythex 為我的烘焙坊建立一個新網站，包含首頁、一個列出蛋糕與價格的菜單頁，以及一個會儲存到資料庫的訂購表單。先給我看預覽，等我說看起來沒問題再發布。

接著 ChatGPT 會建立專案、撰寫程式碼、執行它，並在你核准後發布到公開網址。之後的修改只要在同一個對話中再發送訊息即可。同樣的連接器做法也適用於 Claude、Cursor 與 Codex。關於這種運作方式以及哪些建站工具支援，請參閱具備 MCP 的 AI App 建置工具。

你應該選哪一種方法？

適用於任何方法的提示技巧

• 先提供真實資訊。 名稱、所在地、服務、價格、聯絡方式。提供的虛構細節越少，之後需要清理的就越少。
• 描述訪客與目標。 「一位想找生日蛋糕的家長，最後應該會送出訂購需求。」
• 要求以手機為優先的版面。 大多數訪客都用手機瀏覽。
• 第一版出來後，每次只改一件事。
• 明確要求基本的 SEO 項目： 每頁都有獨特的標題與描述、真正的標題層級、圖片的替代文字。請參閱 AI 建置網站的 SEO。

我們的為 AI App 建置工具撰寫提示詞指南提供了更多模式。

常見問題與解法

• 設計看起來很通用。 給一個參考：「像一間沉靜的北歐咖啡館，大量留白，搭配一種柔和的綠色。」
• 程式碼被截斷。 請 ChatGPT 從最後一行繼續，或把頁面切成幾個區塊，一次給你一個。
• 它虛構了客戶見證或統計數字。 把它們刪掉。假評論會破壞信任，而且在許多地方違反消費者保護法規。
• 修改後網站壞掉。 在貼上新程式碼前，先保留一份最後可正常運作的版本。Mythex 等建置工具會保存檢查點，讓你可以回復。

發布前

逐字閱讀每一頁的內容。確認聯絡方式能用。在手機上打開網站。確認圖片是你自己的，或已取得適當授權。然後發布，並在訪客已經聚集的地方分享。如果你希望整件事完全免費，如何免費做網站會更詳細地說明免費代管的選項。

常見問題