如何用 ChatGPT 製作網站：三種可行方法

用 ChatGPT 製作網站，你可以叫佢寫出網站嘅 HTML 同 CSS，然後自己將檔案放到託管服務上；或者用佢規劃頁面同撰寫文案，再喺網站構建工具入面建站；又或者喺 ChatGPT 內連接 Mythex 之類嘅 AI 構建工具，由同一個對話直接建立、託管同發布網站。第一種方法免費，適合單頁網站；第三種則適合需要儲存資料嘅表單、登入功能或者經常更新嘅網站。本指南會逐一示範每種方法，並講清楚各自嘅局限。

ChatGPT 自己能做與不能做嘅事

ChatGPT 好擅長寫嘢：程式碼、標題、頁面文案同計劃。但佢本身並唔係託管服務商。佢唔會為你嘅網站提供公開網址，唔會運行資料庫，亦唔會像構建工具咁喺項目之間保存網站檔案。下面每種方法，都係針對呢個缺口嘅不同解決方法。

方法一：ChatGPT 寫程式碼，你自行託管

呢個係經典做法，適合簡單嘅靜態網站，例如作品集、登陸頁或者婚禮網頁。

第一步：要求一個完整嘅單檔頁面

內容同版面要講清楚：

寫一個完整嘅單頁網站，做成一個 HTML 檔案，CSS 放喺 style 標籤入面。網站係為安曼嘅自由工作插畫師 Maya Haddad 而做。章節包括：頁首，有她嘅名字同「為書籍及品牌而做嘅插畫」；一個六格作品集圖片網格（用佔位圖片路徑，方便我日後替換）；一段簡短嘅關於我段落；一個列出三項服務同起步價嘅清單；以及一個聯絡區塊，電郵用 mailto 連結。風格乾淨現代，留白充足，適合手機瀏覽。唔好用 JavaScript 框架。

一個檔案會更容易儲存同上載。

第二步：儲存並打開

將程式碼複製到文字編輯器，存做 index.html，然後用瀏覽器打開。如果有地方出錯，就向 ChatGPT 描述：「桌面版嘅圖片網格係單欄，請喺闊度超過 900px 時改為三欄。」

第三步：替換佔位內容

將佔位圖片換成你自己嘅圖片，並替換 ChatGPT 憑空寫嘅文字。仔細核對價錢、電郵同名字，因為 AI 填補空白時好有信心，但未必準確。

第四步：上載到網上

將檔案上載到 GitHub Pages 之類嘅免費靜態託管服務，或者任何你已經付費使用嘅網站主機。你會得到一個公開網址。如果想用自己嘅網域，請跟從託管服務嘅指示；我哋嘅自訂網域連接指南會解釋 DNS 嘅部分。

方法一嘅局限

• 儲存資料嘅表單。 聯絡表單需要一個接收提交內容嘅地方，你需要表單服務或者伺服器。
• 登入同會員區。 呢啲功能需要後端同資料庫。
• 多頁網站。 要喺十個手動貼上嘅檔案之間保持頁首同選單一致，會好麻煩。
• 更新。 每次改動都要重新索取程式碼、貼上，再上載一次。

方法二：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 應用程式構建工具。

應該揀邊個方法？

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

• 一開始就俾真實資料。 名稱、地點、服務、價錢、聯絡資料。憑空想像嘅資料愈少，清理工夫就愈少。
• 描述訪客同目標。 「一位為孩子搵生日蛋糕、最終會提交訂購申請嘅家長。」
• 要求以手機為先嘅版面。 大部分訪客都用手機。
• 第一版完成之後，每次只改一樣嘢。
• 明確要求基本 SEO： 每頁獨特嘅標題同描述、真正嘅標題層級、圖片嘅替代文字。詳見 AI 建立網站嘅 SEO。

我哋嘅撰寫 AI 應用程式構建工具提示詞指南有更多做法。

常見問題同解決方法

• 設計睇落好普通。 提供一個參考：「好似一間寧靜嘅北歐咖啡室，大量白色，加一點柔和綠色」。
• 程式碼被截斷。 叫 ChatGPT 由最後一行繼續，或者將頁面分成幾個章節，逐個俾你。
• 佢虛構咗推薦語或者數字。 刪除呢啲內容。假評價會損害信任，而且喺好多地方都違反消費者保障規則。
• 改動之後網站壞咗。 貼上新程式碼之前，先保留一份最後可用版本嘅副本。Mythex 之類嘅構建工具會保留檢查點，方便你還原。

發布之前

逐頁睇清楚每一個字。確認聯絡資料可以用。用手機打開網站。確保所有圖片屬於你，或者已獲正確授權。然後發布，並分享到訪客已經聚集嘅地方。如果想整個過程完全免費，如何免費製作網站會詳細介紹免費託管選項。

常見問題