兩個月前一位企業主問我：「AJ，你們公司網站誰做的？看起來蠻不錯。」我有點不好意思說：「⋯我自己。」他愣了一下：「你不是 AI 講師嗎？怎麼會寫網站？」我笑了——「現在的時代，不會寫網站，才是真的不會 AI。」
我不是工程師背景。大學唸的不是資工、職涯也沒寫過 production 等級的程式。但兩個月前我用 Claude Code 配 Vercel，從 0 蓋完了你正在讀這篇文章的整個網站——首頁、講師頁、服務介紹、預約洽詢、部落格、學員專區、管理後台、課程企劃書產生器、請款核銷頁，全部。這篇是我蓋網站的完整流程、選型、雷區與心得。
為什麼決定自己蓋
外包做一個有後台的公司官網，行情大概 30–50 萬，時程兩到三個月。我打聽完之後想了三件事：
- 速度：我等不及。寫一篇部落格、加一個功能、改一個字，如果都要等外包三天五天，這不是我要的節奏。
- 控制力：網站是我跟客戶的第一個接觸面，每個字、每個按鈕、每個 API 的回應，我希望我自己決定。
- 成本：不是錢——是學習這件事本身的價值。我教企業 AI 內訓，自己卻不會用 AI 蓋網站，這太不應該了。
於是我打開了 Claude Code。
技術選型：少 setup、少維運、少坑
我不是工程師，選型只有一個原則——能不裝就不裝、能 serverless 就不要養伺服器。
| 層次 | 選擇 | 為什麼 |
|---|---|---|
| 前端 | 純 HTML + CSS + Vanilla JS | 不用 React、不用 Next.js、不用打包。文章一個檔案就是一個 URL，SEO 與維護都簡單。 |
| 部署 | vercel deploy --prod |
一行 CLI 推上去就上線。Vercel 自動處理 CDN、TLS、Edge Cache。 |
| 後端 API | Vercel Serverless Functions（/api/*.js） |
不用養伺服器。每個 API 是一個檔案，部署跟著前端一起上。 |
| 資料庫 | Upstash Redis（Redis.fromEnv()） |
按請求計費、零維運、HTTP API 適合 serverless。場次、提問、密碼 hash 全放這。 |
| 寄信 | Resend（驗證 ahadigit.work domain） | 洽詢表單 + 請款核銷單都用它。比起 SendGrid 設定快很多。 |
| 程式碼倉庫 | GitHub Private Repo | Claude Code 寫的程式碼裡有預設密碼跟 secret 邏輯，絕對不能 public。 |
整套加起來每月固定成本不到台幣 1,000 元，比租一台 VPS 還便宜。
Claude Code 是我的工程合夥人
很多人以為 vibe coding 是「我跟 AI 講一句它寫一段」。實際上不是。
我跟 Claude Code 的工作流是這樣：
- 我寫 spec（不是寫程式碼）。例如：「幫我加一個學員專區，密碼登入後可以看講義 iframe、線上問問題（其他學員可以按讚）、複製預設 prompt 庫。資料用 Redis 存。」
- 它先反問我：「Q&A 要不要管理員後台審核？投票要不要防灌票？密碼是每場一組還是全站一組？」這時候我發現我自己其實沒想清楚。
- 它寫 + 我看 diff。我不寫程式碼，但我看 diff 是不是符合我想要的邏輯。看不懂的問它「這段在做什麼？」
- 跑、發現 bug、改。Resend 502、Edit tool 不認識全形括號、Vercel env var 沒設⋯所有坑都踩過一次。
Anthropic 的 Boris Cherny 在 Code with Claude 大會上講過一句我超喜歡：
「The default isn't 'I'm going to prompt Claude'—the default is now 'I'm going to have Claude prompt itself.'」
（不是『我來下 prompt』，而是『我讓 Claude 自己下 prompt』。）—— Boris Cherny, Anthropic
翻譯成我的版本：我不是寫 code 的人，我是給 Claude 派任務、看它回報、決定下一步的人。比較像 PM，不像工程師。
兩個月做了哪些事
從第一行 commit 到你現在讀這篇文章，差不多兩個月。中間的里程碑：
- Day 1：landing page（首頁 + 講師簡介）。幾小時搞定。
- Day 7：講師團隊頁（AJ + Calvin）、服務介紹、預約洽詢表單（接 Resend）。
- Day 14：學員專區（密碼登入 + Slido-like Q&A + Prompt library）、管理後台（HMAC token 認證、場次管理、提問管理）。
- Day 21：部落格（10 篇原創 + 9 篇影片重點）、課程企劃書產生器、請款核銷頁、課後 CTA（訂閱 YouTube 解鎖 PDF）。
- Day 56（上週）：用 16 個 Claude Code agent 平行重構整個部落格 19 篇文章，套用編輯標準。同時送 16 個任務、各自寫各自的，全部回報後我批次採用、commit、push、deploy。
第五個里程碑是最 vibe coding 的時刻——一個非工程師同時派 16 個工程合夥人去重寫 19 篇文章，一個下午做完。傳統外包流程這要兩週。
我學到的三件事
1. 不要怕 spec 沒寫好
Claude Code 比我自己更會發現需求遺漏。「未登入怎麼處理？」「資料怎麼儲存？」「密碼忘記怎麼辦？」這些它都會問——而且問得比我想得快。我把 spec 沒寫好的恐懼，外包給它。
2. 要會看 code，但不用會寫
我看 diff、看 logic 是不是符合我直覺。看不懂的問它「這段在幹嘛？為什麼這樣寫？」。兩個月下來我變成可以「閱讀」HTML/CSS/JavaScript 與 Node serverless 寫法的人——還是不會寫，但看得懂。
3. 學會 commit 跟 rollback
這是 AI coding 時代最重要的技能。寫壞了就 git revert，不要怕。每寫一個功能 commit 一次，commit message 用人話寫，未來看 git log 就像看自己的成長日記。
三個雷區（我都踩過）
- 不要把密碼、API key 寫死在原始碼裡。我一開始把 ADMIN_PASSWORD 預設成「iamaj」，後來改用 Vercel 的環境變數覆蓋。原始碼裡可以留 fallback，但實際 production 一定走 env var。
- 不要把
.env推上 GitHub。.gitignore一定要有它。一旦 leak，你要付出的代價是把整個 secret 重新輪替。 - 不要寫到一半才想 SEO。og:image、JSON-LD、sitemap.xml、robots.txt、llms.txt——這些一開始就要想好。我前期沒做，後來補很痛。
結語：非工程師蓋網站的時代
我不會說每個老闆都該自己寫網站。但我會說——你至少該知道你的網站是怎麼跑的、要改一個字要花多久、加一個功能要花多少錢。否則你會永遠被自己看不懂的東西綁架。
Claude Code 不是寫程式工具，是你的工程合夥人。Vercel 不是部署平台，是你的 IT 部門。Upstash 跟 Resend 不是資料庫跟寄信服務，是你的後端團隊。
以前蓋一個公司網站要 30 萬。今天，蓋一個你自己看得懂的公司網站，成本是你願意花多少時間去學。
我選擇花這個時間。因為我知道——再過五年，分得出來「自己懂技術的老闆」與「永遠靠別人解釋」的老闆，會差很多。