ChatGPT 網站完整教學：用 Work 建立網站、優缺點及網站評估
|
| ChatGPT 做網頁效果展示，透過 Work 建立網站後，可快速設定分享權限、網址與網站內容。 |
做網站（Sites）現在已經有更多種簡單又方便的作法，重要的永遠是網站的內容，要考量你想提供什麼服務或什麼價值，能花多少時間維護，再決定用什麼工具去做網站。如果想了解用 ChatGPT 如何架網站，這篇有詳細介紹及截圖說明。
要整理微型企業的 AI 協助相關內容時，第一篇文章寫的就是建立自己的專屬網站
ChatGPT 網站
OpenAI 於 2026 年 7 月 9 日宣布推出 ChatGPT Sites 公開測試版。使用者可以直接在 ChatGPT Work 中，透過對話建立、修改及發布網站。不需要懂 HTML、CSS，也不用購買主機或安裝架站系統，只要告訴 ChatGPT 想做什麼網站，就能透過對話逐步完成。目前開放給 Pro、Pro Lite、Edu 等帳號使用者，Plus 帳號陸續開放中，免費帳號及 Go 帳號目前無法使用，日後是否可用官方說明中沒提及。
我是 Plus 帳號，7/10 日就看到 Work 標示新功能，只依 ChatGPT 對我的了解，另外再完整給了它我的部落格、形象網站、Instagram 與 YouTube 網址，請 ChatGPT Work 幫我建立一個課程教學網站。從內容架構、版面設計、數位平台入口，到後續修改字體、導覽列、按鈕與網址，都透過對話完成。
ChatGPT 網站 的優點
- 會提供 ChatGPT Sites 的網域，網址也會依內容自動給一個，可以修改，也可以綁定自己的網域
- 網站 For RWD，會依使用裝置更改適當排版（它會主動完成）
- 若有上傳照片，手機版也會採取直式照片配置
- 圖片檔名若沒指定，也會自己判定給更好的檔名（預設檔案類型是 .webp）
- 圖片檔案大小會自動考慮網站載入速度縮小
|
| ChatGPT Sites 網址 Facebook、LINE 等社群平台分享效果及 RWD 響應式設計手機呈現 |
ChatGPT 網站成品
我有做的特別要求：
- 頂部導覽列可以固定或往下捲動時變霧面
- 加上右下角「回到最上方」按鈕
建網站前先準備什麼
如果 ChatGPT 也記憶了你主要的數位平台或主要工作內容，不需主動再提，它也可以完成的，我們只需決定要做什麼內容的網站，比如說我做教學網站，但若你有偏好顏色，也可以指定網站風格。網站中若有要提供圖片，也可以上傳，它也會依內容，自己區分為「教學特色」或「代表作品」等。
處理網站通常一開始不會完整知道要呈現哪些內容，所以第一步只需依平常對話內容，ChatGPT 會依對我們的了解，自行先做一版，等它完成，你就會有想法去增添哪些內容，再逐一在對話中要求它補充進去即可。ChatGPT Sites 網站設置操作步驟
|
| 圖一 用 Work 建立網站 第一步 |
- 從「更多」選單開啟網站功能
- 點選「網站」
- 點選「建立網站」
入門
首次使用時，參考圖一 用 Work 建立網站第一步點入時，會自動導入 ChatGPT Work 首頁，會有簡單的教學指引（上圖），提供可使用的功能，包含 Slack／Teams 整合、行事曆、自訂運作方式、連接工具、學習寫作風格 等功能。
還會依最近的內容，提示 ChatGPT Work 提供的多種 AI 工作範例，可協助完成摘要整理、研究分析、部落格內容創作、網站規劃與電子郵件撰寫，快速建立完整工作流程。
使用 ChatGPT Work 建立個人化 AI 寫作風格
- 我選擇了：學習我的寫作風格
ChatGPT 自動給提示詞：從我們的對話與任何已連接的電子郵件來源學習我的寫作風格；如有需要，協助我連接電子郵件，並說明未來將如何運用這些學習成果協助我撰寫內容。
ChatGTP 會分析過去對話與已連結的電子郵件，建立個人化寫作風格。完成分析後，會提供它的觀察面向、寫作特徵，及未來套用原則讓我們確認，會舉例說明，會依照不同需求，比如說部落格開場詞、課程宣傳、社群分享、Email 等，依我們常用的文字語氣、說話風格，讓我們評比是否符合需求，相同的，若你覺得不妥，可以請它更改。
過程中還會提供使用者調整與確認 AI 寫作風格的介面，依個人需求點選。這部份很有 Claude 的影子。
我常態性的對話中事實上有提供過數位平台，它的記憶庫中也有，但為了一次性完成，很方便能給的內容，我還是在第一時間給它了，免得浪費 Token。將部落格、品牌網站、Instagram 與 YouTube 等公開內容提供給 ChatGPT Sites 後，ChatGPT 會整理網站定位、課程特色與內容架構，快速完成網站初步規劃。
ChatGPT Work 會自動規劃網站架構與內容，它會描寫說明，過程中有不妥可以介入要求它修改。圖下為生成的網頁文字，我要求改字型大小，ChatGPT Sites 會自動調整網站內容與版面配置。
網址設定
完成後會給一個 ***.chatgpt.site 的網址，可以要求改網址，但等於它幫忙重做，或者一開始，你就指定要用什麼前綴字元，也可以套用自己的網域。
設定流程如下：- 在這個網站加入選定的自訂網域。
- 系統會產生 CNAME 與網域驗證紀錄。
- 到購買網域的平台新增指定的 DNS 紀錄。
- 等待驗證與 SSL 安全憑證生效。
- 完成後即可用自己的網址開啟網站。
日後如何修改
- 在 ChatGPT 左側選單點選更多
- 點選 網站（Sites） 後，即可查看所有建立的網站
- 點擊 編輯 即可進入網站編輯器，修改內容、版面
如何加入照片或圖片
原本上傳的圖片是 ChatGPT 中下載的，含日期與中文空格的檔名，上傳做網站配圖 ChatGPT 自動改成有意義的英文檔名，同時完成：
- 每張圖片加入符合內容的 alt 替代文字
- PNG 轉成容量較小的 WebP
- 保留清晰度並加快網站載入
- 使用可被搜尋引擎理解的圖片路徑
自訂網域
- 選擇要修改的 網站（Sites），點按 三個點點
- 點擊 設定 即可進入更詳細的內容修改
可修改項目包括：
- 標題名稱可以直接修改
- ChatGPT Sites 支援綁定自訂網域，讓網站使用專屬網址，提升品牌專業度。只要新增網域並依照系統提供的 DNS 記錄完成設定，即可使用自己的品牌網址發布網站。
- 環境變數：你的網站執行時使用的設定，例如 URL、名稱或功能開關。
- 機密資訊：機密設定資訊，例如金鑰和密碼。（雖然這功能有提供，但不建議）
- 刪除網站
分享權限
- 僅限自己
- 任何有連結的人
目前符合 SEO 項目
- 網站公開，使用者不需登入 ChatGPT
- 網頁標題 Title
- 搜尋說明 Meta Description
- H1、H2 標題結構
- 手機版響應式設計
- 可讀取的文字內容
- Facebook 分享縮圖
尚未符合部份
- LINE 分享縮圖
- 獨立 robots.txt
- sitemap.xml
- Canonical 標準網址（等自訂網域確定後設定）
網站建置個人建議
- 介面更親切（有繁中介面）
- 學習使用不難懂，不需額外教學，功能操作簡單成品不簡單
- 數位行銷中的 網站/設計/圖文/簡報/專案/任務/專屬 GPTs，可以協助絕大部份工作。
ChatGPT Sites 缺點
- 目前我網頁是單網頁，只有 7張圖片，但載入時間有點略久
ChatGPT Sites 網站效能
Google PageSpeed Insights 測試結果
Google PageSpeed Insights 診斷效能，會針對效能、無障礙功能、最佳做法、搜尋引擎最佳化（SEO）給分數。主要檢查內容：
- 效能（Performance）：載入速度、圖片、程式與字型
- 無障礙（Accessibility）：字級、對比、圖片替代文字、鍵盤操作
- 最佳做法（Best Practices）：安全性與網頁技術規範
- SEO：標題、描述、索引與行動裝置體驗
通常 90分以上就算不錯。我的網頁 ChatGPT Sites 測出的分數：
- 效能（Performance）：99 分
- 無障礙（Accessibility）：95 分
- 最佳做法（Best Practices）：100 分
- SEO：100 分
- ChatGPT Sites 主機當下回應較慢
- 第一次進入時需要建立快取
- 網路或 Cloudflare 節點當時不穩定
- 網站隔一段時間首次開啟時反應較慢
瞭解實際使用者體驗部份
- Largest Contentful Paint (LCP)：主要內容多久出現，理想值在 2.5 秒內。
- Interaction to Next Paint (INP)：點擊後網站多久反應，理想值在 200 毫秒內。
- Cumulative Layout Shift (CLS)：載入時畫面是否跳動，理想值低於 0.1。
ChatGPT Sites 網站效能評估建議
- 減少沒有實際使用的字型載入。
- 將首頁形象照設為優先載入。
- 確認所有下方作品圖片繼續採延後載入。
- 補上圖片寬高，降低畫面跳動。
- 檢查 JavaScript 與 CSS 是否有未使用內容。
- 加入 GA4 後，蒐集台灣訪客的真實載入數據。
延伸閱讀
蘇素雲 Celia Su｜Canvassador・Canva 官方推廣大使。大專院校與教育訓練講師，主授 Canva 視覺設計、生成式 AI 與數位行銷。2010 年起在此寫下 470+ 篇實測教學——寫出來的，都是自己先做過一遍的。
留言
張貼留言