本關目標
不用自行架站,也能用 ChatGPT 建立、檢查、發布並分享一個網站。
需要裝備
CLAUDE CODE
掉落獎勵
第一個可執行成果
本關前言 INTRODUCTION
“目標:不用自行架站,也能用 ChatGPT 建立、檢查、發布並分享一個網站。
1. ChatGPT Sites 是什麼?
ChatGPT Sites 可以建立、託管、修改與分享網站、網頁應用程式與遊戲。
它適合用於:
- 一頁式活動或課程介紹頁 - 品牌、產品與作品集網站 - 教學網站與資源整理頁 - 內部工具或儀表板
Sites 目前為公開測試功能;可用性會依方案、地區與工作區設定而不同。
2. 先記住:儲存版本不等於發布
Sites 的正確流程有兩個階段:
1. 儲存版本:建立可檢查的網站版本,不會對外發布。 2. 發布版本:將已儲存的版本發布,取得正式網址。
每一個發布網址都是正式環境網址。因此,內容尚未確認前,請先要求「儲存版本」,不要直接發布。
3. 建站流程
第一步:進入 Sites
你可以用以下兩種方式進入 ChatGPT Sites:
#### 方式一|ChatGPT 網頁版
1. 打開 ChatGPT。 2. 在左側選單點選 更多(More)。 3. 選擇 Sites。 4. 進入後點選建立新網站,開始輸入建站需求。
也可以直接開啟:
https://chatgpt.com/sites
#### 方式二|ChatGPT Desktop App
1. 開啟 ChatGPT Desktop App。 2. 在側邊選單找到並點選 Sites。 3. 選擇建立新網站。 4. 可以從提示詞開始,也可以匯入相容的本機專案。
若沒有看到 Sites,可能是因為此功能仍在公開測試階段,是否可用會依帳號方案、地區或工作區設定而不同。
第二步:描述網站需求
提示詞至少要包含:
- 網站目的 - 目標讀者 - 要放的內容 - 必要功能 - 視覺風格
第三步:檢查網站
確認內容、按鈕、手機版與互動是否正確,也確認沒有個資、帳密或內部資料。
第四步:要求儲存版本
先把目前成果存成可檢查的版本。
第五步:設定分享權限並發布
選擇適合的觀看權限:
- 只有自己或受邀者 - 工作區內所有人 - 任何拿到連結的人
要用 LINE 分享給一般訪客時,選擇「任何拿到連結的人都可以觀看」。
第六步:實際打開公開網址
分享前,請用一般瀏覽器開啟網址,確認:
- 網站正常顯示 - 網址可以安全開啟 - 訪客不需登入 - 手機版可閱讀
確認後再分享給別人。
4. 什麼時候需要資料庫或上傳檔案?
一般介紹網站不需要額外資料儲存。
| 網站需求 | 要求加入的能力 |
|---|---|
| 保存表單、分數、使用者進度 | D1 資料庫 |
| 上傳圖片、文件、音訊或影片 | R2 檔案儲存 |
| 上傳檔案又要可搜尋、分類 | D1 + R2 |
| 內部網站要辨識工作區使用者 | 工作區登入 |
| 面向公眾的登入或第三方登入 | 驗證功能 |
不要為了深色模式、勾選狀態或暫時提示訊息而要求資料庫。
A. 原始企劃提示詞
text你是一位專業的網頁企劃師、UX 設計師、戶外安全教育顧問與文案設計師。
請為我設計一個「野外求生入門認識網頁」。
網頁目標:
讓完全沒有野外求生經驗的人,可以在 3 分鐘內理解野外求生的基本概念、危機處理順序、出發前準備,以及遇到迷路或突發狀況時該怎麼做。
目標受眾:
1. 登山新手
2. 親子戶外活動家庭
3. 露營初學者
4. 學校或營隊課程學員
5. 想學基本求生觀念的一般大眾
整體風格:
1. 清楚、安全、可信任
2. 不要太恐嚇,但要有警覺性
3. 使用自然色系,例如森林綠、土壤棕、米白、岩石灰
4. 視覺感覺要像戶外安全教育網站,不要像極限冒險網站
5. 文字要白話、簡單、適合初學者閱讀
請設計以下內容:
一、Hero 首屏區
請包含主標題、副標題、一句核心觀念、主要行動按鈕、次要行動按鈕與建議背景圖描述。
主標題要有吸引力,但不要誇張。
請強調:「野外求生的第一步不是找食物,而是保持冷靜、保暖、找水、發出求救訊號。」
二、為什麼要學野外求生
- 不是為了冒險,而是為了安全
- 多數危機來自迷路、失溫、脫水與準備不足
- 正確順序比勇敢更重要
- 學會基本觀念,可以保護自己和同行的人
三、野外求生的核心原則
請用 STOP 原則說明:
S:Stop 停下來
T:Think 思考
O:Observe 觀察
P:Plan 計畫
每一點請用簡短白話說明,不要太學術。
四、求生優先順序
請設計成卡片式區塊,順序如下:
1. 停下來,不要亂走
2. 檢查受傷狀況
3. 找地方避風避雨
4. 保持體溫
5. 尋找與處理水源
6. 發出求救訊號
7. 最後才考慮食物
每張卡片包含小標題、一句重點與一個簡單例子。
五、常見錯誤提醒
- 迷路後一直往前走
- 急著找食物
- 亂吃不認識的植物或菇類
- 手機一直開著耗電
- 沒有告訴別人自己的行程
- 下雨後仍穿濕衣服硬撐
六、出發前求生包清單
請設計成 checklist:
水、行動電源、哨子、頭燈或手電筒、雨衣、保暖外套、急救包、打火機、小刀、離線地圖、高熱量食物、保溫毯、塑膠袋或防水袋。
請加入提醒:「求生包不是為了用到,而是為了萬一用得到。」
七、求救訊號教學
請說明三短聲哨音、手電筒閃光、地上排 SOS、鮮豔衣物標記位置;有訊號時優先傳送位置、人數、傷勢、水和食物狀況。
八、親子或新手學習區
請加入:野外求生不是教孩子冒險,而是教孩子在不熟悉的環境中保持冷靜、觀察環境、做出安全選擇。
九、安全聲明
本網頁提供基礎野外安全觀念,不能取代專業登山訓練、急救課程或當地救援指引。實際戶外活動前,請依照地區、天氣、路線難度與自身能力做好準備。
十、CTA 行動呼籲
請設計:下載求生包清單、開始學習 STOP 原則、查看新手戶外安全指南。
十一、SEO 設計
請提供 SEO 標題、Meta Description、5 個關鍵字,以及網頁 H1、H2、H3 架構。
十二、網頁版型建議
請描述:首屏 Hero、觀念介紹、核心原則、求生優先順序卡片、常見錯誤提醒、求生包清單、求救訊號、親子學習、安全聲明與 CTA 區塊。
十三、設計注意事項
請避免血腥、恐怖、災難感太重的視覺;避免鼓勵冒險或挑戰極限的語氣;避免過度複雜術語;避免讓人以為看完網頁就能獨自進行高風險探險。
請用繁體中文輸出,語氣白話、清楚、實用。B. 接續給 Sites 的建站提示詞
text請根據以上企劃,使用 ChatGPT Sites 建立一個可分享的一頁式網站。
這是內容導向的教育網站,不需要登入、不需要資料庫、不需要上傳檔案,也不需要保存使用者資料。
請先建立並儲存一個版本讓我檢查,不要直接發布。C. 確認後的發布提示詞
text內容已確認。
請發布目前已儲存的版本,將觀看權限設定為「任何拿到連結的人都可以觀看」,並回傳公開網址。
發布後,請確認一般訪客不需要登入也能開啟網站。D. 分享到 LINE 的文字
text這是「野外求生入門認識網站」,適合登山新手、親子戶外活動、露營初學者與營隊課程先看。
內容包含 STOP 原則、求生優先順序、出發前求生包清單、求救訊號,以及迷路時的基本處理方式。
點這裡看:
貼上網站網址官方文件
- https://learn.chatgpt.com/docs/sites?surface=app
CLEAR CHECKLIST
通關前,先完成這 3 件小事
打開工具,不只收藏工具
完成一個 30 分鐘小任務
留下你的第一個 build 記錄