WEEK 06 / AI 網站建置

AI 架站 1：Codex＋GitHub＋Vercel

01｜這週你會做出什麼

用 AI 做出第一個網站，並讓它真正出現在網路上。

2026-11-06（學期第 8 週）

先照步驟做，卡住再查操作參考。查看完成標準 ↓

02 / SKILLS

本週學習內容

GitHub
Repository
Codex
檔案結構
Preview
Commit / Push
Vercel
Deployment
Public URL

03 / REFERENCE

操作參考｜需要時再查

必看

開始操作前看重點，完成後用清單自查。

LLM 基礎概念

大型語言模型如何產生文字與程式，以及為什麼需求要寫清楚、結果一定要驗收。

約 18 分鐘

在 YouTube 開啟 ↗

Gemini 生成網站與提示詞工程

示範用 Gemini 產生網站，並說明怎麼寫提示詞，讓 AI 做出符合規劃的頁面。

約 26 分鐘

在 YouTube 開啟 ↗

GitHub 與 Vercel

把網站放上 GitHub 保存版本，再連接 Vercel 部署成公開網址。

約 22 分鐘

在 YouTube 開啟 ↗

必看 · 網頁

GitHub → Vercel 上線檢核 ↗

英文官方操作文件。Import 儲存庫、Deploy、取得公開網址；修改再 Push 後確認新版本。

Codex 建站 → Preview → GitHub Repository → Commit / Push → Vercel Import → Deploy → Public URL

Preview 正常，程式碼已 Commit / Push 到自己的 Repository。Vercel 連接正確 Repository，Deployment 成功且公開網址能開啟。修改一段文字並再次 Push，確認線上顯示新文字。

卡住再看

只查你正在卡住的步驟，不必讀完整份文件。

卡住再看 · 網頁

Codex 入門：開始建立與修改網站 ↗

英文官方說明。只查開始使用與目前可用介面；本週需求先限定首頁、兩個內頁與導覽。

卡住再看 · 網頁

GitHub Hello World：儲存與留下改版紀錄 ↗

簡中官方圖解。只練習 Repository 與 Commit；本週不要求完整 Git 指令或分支協作。

04 / MAKE

跟著做

Step 1

寫一份可以執行的需求

沿用學期網站主題，寫出對象、頁面、內容、CTA 與手機需求，請 Codex 協助建立第一版。

檢查點 → 需求包括可檢查的完成條件。

Step 2

認識檔案並開啟 Preview

請 AI 解釋主要檔案與啟動方式，辨認結構、樣式與互動的來源。執行預覽並檢查首頁。

檢查點 → 知道修改標題要找哪個檔案。

Step 3

建立 GitHub Repository

登入 GitHub，建立專案 Repository。提交前檢查檔案，排除密碼、金鑰、環境設定與大型影片。

檢查點 → Repository 裡只有應分享的專案檔案。

Step 4

Commit，再 Push

用一句話描述本次修改並 Commit，再 Push 到 GitHub；在網頁確認檔案與版本紀錄。

檢查點 → 看得到這次提交與對應內容。

Step 5

連接 Vercel 並部署

在 Vercel 匯入此 Repository，確認專案目錄與建置設定後 Deploy。檢查部署紀錄，取得公開網址。

檢查點 → 用未登入視窗打開正式網址。

Step 6

修改一次，再重新上線

修改一段標題或 CTA，預覽確認後 Commit／Push；在 Vercel 確認新部署完成，再開啟公開網址。

檢查點 → 能對照本地、GitHub 與上線版本。

05 / UNDERSTAND

你剛剛學到了什麼？

核心循環：描述 → AI 產生 → 預覽驗收 → 存檔 → 再描述

AI 負責寫程式，你負責想清楚與驗收。一次只請 AI 改一件事，改完立刻預覽；確認沒問題就 Commit 存檔，再描述下一步。

HTML / CSS / JavaScript

HTML 管結構、CSS 管外觀、JavaScript 管互動。即使不用自己寫，也要能描述想改哪一層。

Repository / Version Control

Repository 保存專案；Commit 記錄一個版本，Push 把提交送到 GitHub。

Hosting / Deployment

Hosting 提供網站運作空間；Deployment 把這個版本建置並發布到可存取的環境。

兩條架站方式怎麼選
比較面向	WordPress	Codex＋GitHub＋Vercel
建置速度	使用現成 Theme 可快速開始	需求清楚時可快速產生原型，仍需驗證
修改方式	後台、編輯器與外掛設定	描述需求、修改檔案、檢查版本
內容管理	適合持續發布文章與分類	需自行規劃內容檔案或 CMS
功能彈性	依外掛與佈景支援範圍	可客製互動，也要負責驗證
維護	更新、相容性、安全與備份	依賴、版本、安全與部署
適用情境	內容網站、部落格、常態更新	互動展示、特定工具、客製介面

06 / DELIVER

本週成果

本週過關目標

一個真正部署到 Vercel 的 AI Coding 網站

GitHub 有專案與可辨認的 CommitVercel 正式網址可公開瀏覽完成一次修改後重新部署能說明兩條架站方式的適用情境

勾選供本次瀏覽自我檢核，重新整理後重設。繳交與期限依 Google Classroom 或學校 LMS 公告。

07 / DEBUG

常見問題 / Debug

Vercel Deploy 失敗怎麼辦？

查看部署紀錄中第一個真正的錯誤，確認專案目錄、安裝與建置指令。把錯誤與最近修改一起交給 AI 分析，再只修正相關問題。

08 / KEEP GOING

下一週，繼續往前。

帶著「一個真正部署到 Vercel 的 AI Coding 網站」，下一單元進入「Agentic AI 入門：從對話到行動」。