Case Study
用 AI 一個人在 2 週內建好 morganvault.com
這就是你正在讀的網站。所有技術細節、工具、真實成本、踩過的坑——全部公開。這份 case study 也是 Morgan Vault 電子書工作流程的活見證。
一句話概述
這個網站從零到上線用了什麼工具、花多少時間和錢？
2 週工時，主要工具 Claude Code + Wispr Flow + Cloudflare Pages + GitHub。每月經常性成本 $25-40 美元（含 Claude Code 訂閱）。一個人完成 HTML/CSS/JS、16 語言 i18n、SEO/AEO 結構化資料、自動部署 pipeline。
2 週時間軸
不是「全職 2 週 80 小時」——是真實的、有一般生活的、平均每天投入 4-6 小時的 2 週。
第 1-2 天
環境設定：Claude Code 安裝、Cloudflare 帳號開通、GitHub 倉庫建立、Wispr Flow 訂閱。第一行 HTML 寫出來。
第 3-5 天
Hero / About / Book / Pricing 主要 section 結構出來。CSS design system 收斂（navy + gold 配色、serif/sans 字體階梯）。第一次 Cloudflare Pages 自動部署成功。
第 6-8 天
16 語言 i18n 系統：用單一 JS 物件存所有翻譯、data-i18n 屬性切換、語言選單。寫 build_i18n.py 產生 16 個語言子頁強化 SEO。
第 9-10 天
SEO/AEO 結構化資料：7 個 JSON-LD schema（Organization, Person, WebSite, Book, FAQPage, BreadcrumbList, HowTo）、sitemap.xml、hreflang、og 社群卡（1200×630）。Lighthouse 跑滿分。
第 11-12 天
內容文案打磨：每段話跟 Claude 一起改 5-10 次。FAQ 內容、踩坑紀錄、社會證明、CTA 文字反覆抓誠實 vs 銷售的平衡。
第 13-14 天
部署 + 第一週迭代：上線後即時根據 GA4 + GSC 數據調整。發現幾個 RWD bug、CSS specificity 衝突、JSON-LD validator 警告——立刻修。
真實每月經常性成本
這不是 marketing 預估，是 Morgan 信用卡帳單真實項目：
| 工具 | 每月 | 備註 |
|---|---|---|
| Claude Code | $20 | Anthropic Pro 訂閱含 Claude Code |
| Wispr Flow | $15 | 語音輸入，寫長 prompt 必備 |
| Cloudflare Pages | $0 | 免費方案完全夠用（500 builds/月、無限頻寬） |
| GitHub | $0 | 公開倉庫免費 |
| Lemon Squeezy | 5% | 交易手續費，僅有銷售時才扣 |
| 網域 | $0.83 | $10/年的 .com 攤平 |
| 每月固定支出 | ~$36 | 含所有 AI 訂閱、不含交易抽成 |
技術棧
沒有框架、沒有 build step（除了 i18n）、沒有依賴。整站是純 HTML/CSS/JS：
- HTML（單檔 master）~3,600 行、所有 16 語言 i18n 在同個檔案的 JS 物件裡
- CSS（內嵌 <style>）~1,300 行、沒用 Tailwind / Bootstrap，純手寫
- JavaScript（原生）~600 行、無框架、無 React/Vue
- build_i18n.py（Python 標準庫）~350 行、產生 16 語言子頁 + sitemap、零外部套件
- Cloudflare Pages純靜態 CDN serve、global edge、自動 SSL
- Cloudflare Worker（email）訂閱表單後端、KV 存 email、~100 行
- GitHub Actionsgit push 自動觸發 Cloudflare Pages 部署
- deploy.bat（Windows）一鍵：bump cache、build i18n、git push、Worker deploy
deploy.bat 真實片段：
REM === [0.5/6] Build per-language static HTML pages (SEO/AEO) ===
!PY_CMD! build_i18n.py 2>&1
REM === [1/6] Clean lock files + git status ===
taskkill /F /IM git.exe >nul 2>&1
REM === [3/6] git add + commit + push ===
git add -A
git commit -m "!MSG!"
git push origin main
REM === [6/6] Cloudflare Worker (Wrangler) ===
powershell -File "Website\deploy_cloudflare.ps1" -Mode WorkerOnly量化成果
16語言子頁
7JSON-LD schemas
289hreflang entries
~350KB每頁大小（含內嵌 CSS/JS）
100Lighthouse Performance
100Lighthouse SEO
100Lighthouse Accessibility
100Lighthouse Best Practices
踩過的 8 個坑（每個都記錄真實解法）
這些都是真實發生在 morganvault.com 建站過程的問題，不是「理論上可能」：
- PowerShell 編碼亂碼UTF-8 BOM 跟 Big5 codepage 衝突。Windows Terminal 改 chcp 65001 沒用，要改 PowerShell profile。
- Cloudflare Pages 部署「成功」但網站沒更新CDN 邊緣節點快取 24 小時。改用版本號 query string ?v=YYYYMMDD 強制 bust。
- JSON-LD aggregateRating 警告Product schema 強制需要 aggregateRating 或 review；新書沒有評論，硬塞會被 Google 標 manipulative。改用 Book schema 解決。
- GitHub Actions vs Cloudflare API token 權限混淆兩種 token 用途不同：GitHub Actions 用 secrets.CLOUDFLARE_API_TOKEN（範圍：Pages: Edit）；本機 Wrangler 用環境變數 CLOUDFLARE_API_TOKEN（範圍：Workers Scripts: Edit）。
- RWD 斷點 720/900px 重疊區兩條 @media 斷點分別在 720 跟 900，導致 720-900 區間有絕對定位 vs flex 列衝突。把所有 stack 規則統一到 900px。
- CSS @media specificity 順序錯誤後寫的 @media (max-width: 900px) 規則應該覆蓋早寫的 1024px，但實際 cascade 沒生效——因為兩條都是 (0,2,0)。改成更精確選擇器解決。
- 教學文件與實際 UI 版本飄移Cloudflare 官方 docs 的 dashboard 截圖跟 2026 年實際介面差很多。解法：截圖給 Claude 看，讓 AI 翻譯成最新 UI 步驟。
- 部署完了，然後呢？最大的坑——以為網站做完就有人來。實際要再花同等時間做 SEO、AEO、subscription collection、流量導入。這本書 Chapter 5 + 6 就在講這個。
想用同一套工作流程做自己的網站？
這份 case study 是濃縮版。完整的 200 頁實戰書（含我親自踩過的更多坑、可直接複製的腳本、HTML 起點模板、AI 對話模板）在電子書套組裡。
查看電子書套組 — $39.90 →