85 分鐘複製建站：給 AI Agent 的 SEO Blog 建站 Spec
這篇文章不是 Next.js Blog 教學
網路上已經有幾百篇「用 Next.js + Markdown 建 Blog」的教學，從 Vercel 官方 starter template 到 freeCodeCamp 的 6 小時課程，技術路線幾乎一模一樣。這篇不是其中之一。
這是一份 blueprint——人類讀它理解流程與決策邏輯，AI Agent 讀它直接執行建站。它的核心前提是：你已經有一個跑過的 Next.js 專案，現在要用最短時間複製出第二個品牌網站。不是 create-next-app，不是從空白資料夾開始，是從已驗證的模板源複製、替換、部署。
實戰案例： VarianceLab（variancelab.org），2026-04-12 建立，85 分鐘完成。模板源為 SetupBro。
適用邊界（先確認這篇是不是寫給你的）
適用於：
- 你手上已經有一個可運行的 Next.js 專案，想快速複製出新品牌站
- 品牌官網 + SEO blog
- 內容驅動型網站（知識庫、技術文檔站）
- 個人品牌 / Portfolio + blog
- 你打算把這份 spec 交給 AI Agent（Claude Code、Cursor 等）執行
不適用於：
- 你完全沒有任何現成專案（請先去跟著任何一篇 Next.js 教學走完一遍）
- 需要用戶註冊/登入的 SaaS
- 電商（需要購物車、庫存管理）
- 即時互動型應用（聊天、協作工具）
如果你屬於「不適用」的情況，這篇文章對你沒有價值，現在離開可以省下你的時間。
你需要準備什麼（開工前）
在開始之前，把這些東西準備好。AI 不能替你做這些，但有了這些，AI 可以替你做剩下的全部。
| 項目 | 說明 | 為什麼重要 |
|---|---|---|
| 品牌名 | 中英文都要 | 決定所有 metadata 和視覺文案 |
| 域名 | 已購買、DNS 在 Cloudflare | 部署最後一步需要 |
| Logo | SVG 格式最佳（也接受 PNG） | Header + Favicon |
| Hero 素材 | 靜態圖（fallback）+ 影片（加分） | 首頁第一眼印象 |
| 色系方向 | 「像 Bloomberg」比「藍色」更有用 | AI 需要對標物來決定色值 |
| 內容定位 | 一句話說明這個網站是幹嘛的 | 決定 SEO description 和文案調性 |
| 至少一篇文章 | 草稿即可，AI 可以潤稿或生成更多 | 沒有內容的 blog 沒有靈魂 |
| GitHub 帳號 + PAT | repo scope | 推 code 用 |
| Vercel 帳號 | 免費版即可 | 部署平台 |
| GA4 Measurement ID | 格式 G-XXXXXXXXXX | 流量追蹤 |
準備時間估算： 30-60 分鐘（主要花在 logo 和文案上）。
架構決策（為什麼這樣選）
以下是已經驗證過的技術選型。如果你沒有強烈理由，直接沿用。
技術棧
| 選擇 | 理由 |
|---|---|
| Next.js (App Router) | SSG 靜態生成 = 最快的 LCP，SEO 天花板 |
| TailwindCSS | 不需要設計稿，直接在 JSX 裡寫樣式 |
| TypeScript | 型別檢查在重構時救你一命 |
| Markdown + gray-matter + marked | 文章寫在 .md 檔裡，不需要資料庫 |
| Vercel | 推 main 自動部署，零配置 |
為什麼 MVP 不用資料庫
SEO blog 的內容更新頻率低（一週幾篇），Markdown 靜態生成的 LCP 比任何動態方案都快。Supabase 或 CMS 留到 Phase 2，當你確定這個網站值得長期經營再接。
為什麼從現有專案複製而不是 create-next-app
從零跑 create-next-app 後你還要：裝 TailwindCSS、設 PostCSS、調 tsconfig、寫 blog 解析引擎、設計 layout... 這些全都是已解決問題。從模板源複製再改，省掉 40 分鐘。
執行流程（給 AI 的 spec）
以下步驟按順序執行。每個步驟標註了預估耗時和輸出物。
Phase 0：初始化（5 分鐘）
輸入： 模板源專案路徑、新專案名稱
動作：
- 建立新專案目錄
- 從模板源複製：
package.json、tsconfig.json、next.config.ts、postcss.config.mjs、eslint.config.mjs - 修改
package.json：改 name，移除不需要的 dependencies（Supabase、form libraries 等） - 複製
src/lib/blog.ts（Markdown 解析引擎）— 這是核心，不要重寫 - 建立目錄結構：
src/app/、src/components/、src/lib/、content/blog/、public/ npm install
輸出： 可編譯的空專案骨架
Phase 1：素材就位（2 分鐘）
輸入： Logo、Hero 圖/影片、其他品牌素材
動作：
- 將所有素材複製到
public/ - 統一命名（
logo.svg、hero.png、hero.mp4） - 用 Logo 生成 favicon + apple-touch-icon，放到
src/app/（Next.js App Router 自動偵測）：from PIL import Image
logo = Image.open('public/logo.png')
logo.save('src/app/favicon.ico', format='ICO', sizes=[(16,16),(32,32),(48,48)])
logo.resize((180,180), Image.LANCZOS).save('src/app/apple-icon.png', format='PNG')
輸出： public/ 目錄完整 + favicon 就位
Phase 2：核心頁面（25 分鐘）
這是耗時最長的階段。按以下順序建立：
2.1 全域 Layout（src/app/layout.tsx）
包含：
- Google Fonts 載入（Noto Sans TC 或其他）
- GA4 Script 注入
- Metadata（title template、description、OG tags、favicon、metadataBase）
- Header + Footer 元件引用
<html>的 className（dark mode、font variable）
2.2 全域樣式（src/app/globals.css）
包含：
- TailwindCSS import
@theme inline自訂色系變數.prose-content文章內容樣式（h2、h3、p、a、code、blockquote、table 等）.prose-dark覆蓋樣式（深色背景下的文字、表格、code block 色值）- 深色/淺色模式對應色值
2.3 Header（src/components/Header.tsx）
- Logo + 品牌名（深色背景時 Logo 文字用白色）
- 導覽連結（文章列表、CTA 按鈕）
- Sticky + backdrop-blur + 半透明深色背景（
bg-slate-900/60 backdrop-blur-md） - 深色主題時，導航文字用
text-slate-300，hover 用text-white
2.4 Footer（src/components/Footer.tsx）
- 品牌名 + 標語 + 版權
2.5 首頁（src/app/page.tsx）
典型結構：
- Hero Section — 背景影片/圖片 + 漸層遮罩 + 大標題 + 副標 + CTA。用
-mt-[72px] pt-[72px]讓 Hero 延伸到半透明導航列後面，增強沉浸感 - Content Pillars — 3 欄 grid，展示內容分類
- Latest Articles — 3 欄 grid 文章卡片
- Brand Statement — 品牌宣言卡片
2.6 文章列表頁（src/app/articles/page.tsx）
- 2 欄 grid 卡片佈局
- 每張卡片含分類色系漸層頂圖
2.7 文章內頁（src/app/blog/[slug]/page.tsx）
包含：
generateStaticParams()（SSG）generateMetadata()（動態 OG tags）- JSON-LD Article Schema（
<Script type="application/ld+json">） - 分類色系 hero banner
.prose-content渲染區- 底部 CTA 卡片
2.8 共用元件
- ArticleCard — 文章卡片（含分類漸層頂圖 + 圖標）
- CategoryBadge — 分類標籤 + 色系工具函數
- HeroVideo — 首頁 hero 背景影片（
'use client'）
輸出： 所有頁面可在 localhost 瀏覽
Phase 3：SEO 三件套（5 分鐘）
src/app/sitemap.ts— 自動從 blog 目錄生成 sitemap.xmlsrc/app/robots.ts— 允許全站爬取，指向 sitemap- JSON-LD — 已在 Phase 2.7 完成
驗證：
curl http://localhost:3000/sitemap.xml
curl http://localhost:3000/robots.txt
輸出： SEO 基礎完備
Phase 4：內容填充（15 分鐘）
動作：
- 將準備好的文章轉為 Markdown + frontmatter 格式
- 放入
content/blog/ - 如果不足 3 篇，由 AI 根據品牌定位生成補充文章
- 每篇文章在 localhost 驗證渲染
文章品質檢查清單：
- Frontmatter 欄位完整（title、description、date、category/tags）
- 標題不超過 60 字元
- Description 不超過 150 字元
- 文章結構有 h2 分段
- 列表頁和首頁都有出現
輸出： 至少 3 篇文章上線
Phase 5：部署（10 分鐘）
git init+.gitignore（node_modules、.next、.env）- GitHub 建立 private repo
git add -A && git commit && git push- Vercel Dashboard → Import → 選 repo
- Vercel 自動部署 + 綁定自訂域名
- Cloudflare DNS 授權（CNAME 指向 Vercel）
驗證：
- 自訂域名可訪問
- HTTPS 正常
- 所有頁面 200
輸出： 網站上線，推 main 自動部署
Phase 6：收尾文檔（5 分鐘）
建立 docs/index.md（事實源）和 docs/work_progress.md（工作日誌），記錄：
- 技術棧版本
- 目錄結構
- 部署資訊
- 已發布文章清單
- Roadmap
客製化清單
以下是每個新專案需要改的所有項目，集中在這裡方便一次性替換：
| 項目 | 檔案 | 說明 |
|---|---|---|
| 品牌名 | layout.tsx, Header, Footer, page.tsx | 全域搜尋替換 |
| 色系 | globals.css, 各元件 className | 主色 + 強調色 + 分類色 |
| GA4 ID | layout.tsx | GA_ID 常數 |
| 域名 | layout.tsx (metadataBase), sitemap.ts, robots.ts, blog/[slug] (JSON-LD) | 全域搜尋替換 |
| Logo | public/logo.svg, Header.tsx | 路徑引用 |
| Hero 素材 | public/, HeroVideo.tsx | 路徑引用 |
| 文章分類 | CategoryBadge.tsx, globals.css, blog frontmatter | 分類名稱 + 色系 + 圖標 |
| 首頁文案 | page.tsx | Hero 標題、Pillars、Brand Statement |
| OG 描述 | layout.tsx, page.tsx | SEO 文案 |
| Favicon | src/app/favicon.ico, src/app/apple-icon.png | 從 Logo 生成（見 Phase 1） |
| 深色 prose | globals.css (.prose-dark) | 深色背景頁面的文章/FAQ/條款渲染 |
時間分配（實測）
| Phase | 分鐘 | 佔比 |
|---|---|---|
| 0 — 初始化 | 5 | 6% |
| 1 — 素材就位 | 2 | 2% |
| 2 — 核心頁面 | 25 | 29% |
| 3 — SEO | 5 | 6% |
| 4 — 內容填充 | 15 | 18% |
| 5 — 部署 | 10 | 12% |
| 6 — 收尾文檔 | 5 | 6% |
| 溝通 + 微調 | 18 | 21% |
| 合計 | 85 | 100% |
最大的時間開銷是 Phase 2（核心頁面）和溝通微調。如果品牌素材和文案提前備齊，溝通時間可以壓到 5 分鐘以內，總時間有機會壓到 60 分鐘。
首次撰寫：2026-04-12，基於 VarianceLab 實戰案例。 v1.2 更新：2026-04-12，補充深色主題、半透明導航列、favicon 生成、prose-dark 樣式（基於 SetupBro 實作經驗）。 模板源：SetupBro（~/setupbro/）