Case Study

用 AI 一個人在 2 週內建好 morganvault.com

Q: 這個案例證明了什麼、沒有證明什麼？

證明的是建站速度與技術品質：2 週建好、4 項 Lighthouse 都是滿分 100、每頁 ~350KB。**沒有證明的是流量或營收成果**——上面的量化數據全是技術指標，不是訪客數、訂閱數或銷售額。這個案例本身目前的搜尋曝光也還不多，這是誠實的現況，不是拿來反過來證明「建好就會有人來」。上線只是完成一半的工作，這點在「踩過的坑」那節也講過。

Q: 每月 $36 的成本估算適用於所有規模的網站嗎？

不適用。這個估算對應的是**靜態、內容為主、無後端、無使用者帳號**的個人網站——跟這個案例本身一樣的規模。如果你的網站需要資料庫、使用者登入、金流串接，或是每個請求都要重度呼叫 AI（例如即時對話功能），複雜度與成本都會不同層級。把這個數字當「靜態內容站的下限」讀，比當「所有 AI 建站的行情」讀更準確。

這就是你正在讀的網站。所有技術細節、工具、真實成本、踩過的坑——全部公開。這份 case study 也是 Morgan Vault 電子書工作流程的活見證。

作者 Morgan · 最後更新 2026-07-29

一句話概述

這個網站從零到上線用了什麼工具、花多少時間和錢？

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 就在講這個。

大家實際會問的問題

做一個這樣的網站實際要花多久時間？2 週，平均每天投入 4-6 小時、有一般生活穿插其中——不是「全職 80 小時」。詳細每日進度看上面的時間軸。

每月實際經常性成本多少？每月固定約 $36 美元：Claude Code（Anthropic Pro）$20、Wispr Flow 語音輸入 $15、網域攤平 $0.83。Cloudflare Pages 跟 GitHub 這個規模完全免費。Lemon Squeezy 只有真的賣出時才收 5% 手續費。

最容易踩的一個大坑是什麼？以為「網站上線」就等於「有人會來」。部署可能只完成一半的工作——上線後還要花差不多同等時間做 SEO/AEO、訂閱收集、流量導入。

這個案例證明了什麼、沒有證明什麼？證明的是建站速度與技術品質：2 週建好、4 項 Lighthouse 都是滿分 100、每頁 ~350KB。沒有證明的是流量或營收成果——上面的量化數據全是技術指標，不是訪客數、訂閱數或銷售額。這個案例本身目前的搜尋曝光也還不多，這是誠實的現況，不是拿來反過來證明「建好就會有人來」。上線只是完成一半的工作，這點在「踩過的坑」那節也講過。

這套流程適合完全不懂技術的人嗎？會比 2 週久。Morgan 本身有 25 年跨金融、科技、區塊鏈的背景，「用 AI 對話取代寫程式」對他來說是換一種操作方式，不是從零開始學邏輯與除錯。完全的新手同樣可以走這套流程，但大概率會在「踩過的 8 個坑」裡卡更久、次數更多——那份清單本來就是為了讓你少走一些冤枉路，不是保證你也能複製 2 週的時程。

每月 $36 的成本估算適用於所有規模的網站嗎？不適用。這個估算對應的是靜態、內容為主、無後端、無使用者帳號的個人網站——跟這個案例本身一樣的規模。如果你的網站需要資料庫、使用者登入、金流串接，或是每個請求都要重度呼叫 AI（例如即時對話功能），複雜度與成本都會不同層級。把這個數字當「靜態內容站的下限」讀，比當「所有 AI 建站的行情」讀更準確。

想用同一套工作流程做自己的網站？

這份 case study 是濃縮版。完整的 200 頁實戰書（含我親自踩過的更多坑、可直接複製的腳本、HTML 起點模板、AI 對話模板）在電子書套組裡。

查看電子書套組 — $39.90 →