解鎖條件
一個下午，沒有完整規格，沒有先畫架構圖。
只有一個模糊的念頭：我想要一個部落格，但我不想手動發文。
這是 Vibe Coding 的起點——不是「先計劃再執行」，而是「感覺對了就動，動了再收斂」。
什麼是 Vibe Coding
一般開發流程長這樣：
需求 → 規格文件 → 架構設計 → 實作 → 測試 → 部署
Vibe Coding 長這樣：
有一個感覺 → 問 AI → AI 給方向 → 試試看 → 感覺不對再調 → 反覆迭代
這不是隨意亂做。Vibe Coding 的核心是：把「直覺」當作第一個輸入，用工具快速驗證，讓系統自己長出形狀。
今天的部落格就是這樣長出來的。
副本攻略
Stage 1：技術棧選擇
Next.js 16 + React 19 + TypeScript。
純靜態，markdown 驅動，文章就是 src/content/blog/ 裡面的 .md 檔。沒有資料庫，沒有後台 CMS，沒有多餘的東西。
Vibe Coding 的原則之一：選最簡單能跑的技術，不要為了未來優化設計。
Stage 2：SEO 一次補完
建好骨架後，馬上補上所有 SEO 基礎設施：
generateMetadata：每篇文章動態產生 title / descriptionog:image、og:title、canonical URLrobots.txt：靜態檔，直接放public/sitemap.ts：動態生成，掃所有文章自動列出not-found.tsx：客製化 404，不要讓人看到空白頁
這些全部在第一天做完，因為 SEO 是地基，不是裝飾。晚做反而要回頭補。
Stage 3：審稿流程的核心問題
部落格建好了，文章怎麼上？
手動 commit、手動 push、等 Vercel 部署——這個流程不夠自動。我想要的是：
AI 寫草稿 → 我在 Telegram 看 → 按一下核准 → 自動上線
所以今天還建了一條流水線：
content/ai-drafts/：AI 生成的草稿放這裡/api/approve：一個 Next.js API route，收到 Telegram 的核准訊號後，把草稿 promote 到src/content/blog/，並觸發git push- n8n + Telegram Bot (
@PenCCBot)：接收訊息，傳送審稿通知，轉發核准指令
整條鏈目前 webhook 已通，approve / revise / reject 基礎回應已有，下一步是讓 /api/approve 真正完成 promote + push 這個動作。
Stage 4：今天的第一篇「真」文章
不是 Hello World。是一篇關於「如何用 Obsidian 和 Git 打通發布流程」的完整紀錄。
這篇文章放進去、SEO 也跑了、sitemap 自動更新——系統第一次完整走了一遍。
感覺對了，但還沒收斂的地方
Vibe Coding 有一個缺點：它很容易在「感覺差不多」的時候停下來。
今天還沒做完的：
og-image.png：需要一張真正的封面圖，現在還是 fallback- Vercel 還沒連接：repo 是 private，要手動 import
.env的APPROVE_SECRET：防止任意觸發 promote- n8n workflow 升級：approve 按鈕真正觸發
/api/approve
這些都是「地基已好，裝修未完」的狀態。
Before / After
Before：有想法，沒地方放，沒時間整理，最後都爛在 Obsidian 裡面。
After：打開 Telegram，看到草稿，按核准，五分鐘後文章上線。
Vibe Coding 不是在追求完美的架構。它是在追求：你有直覺的當下，系統能不能跟上你的速度。
今天，跟上了。