用 AI 打造全新技術部落格：從舊架構到 Next.js 15 的完整改版歷程

前言

這個部落格已經陪伴我將近五年，歷經了兩次重大改版。第一版是用 Gatsby + MDX 自建的靜態部落格；這一次，是第二次改版——目標更高，用現代化的 Next.js 15 重建，並整合完整的 AI 生成管線。

今年初，我決定動手了。而且我給自己一個挑戰目標：用 Claude Code AI 協作，一天之內完成全新部落格的核心架構。

結果？真的辦到了。這篇文章就是這次完整的改版紀錄，從舊網站的痛點、新架構的設計決策、AI 協作開發的實際體驗，到最後整合 Vertex AI Veo 3.1 生成展示影片的完整流程。

一、舊網站技術架構：痛在哪裡？

第一版部落格使用的是 Gatsby + gatsby-theme-flexiblog，文章以 MDX 格式撰寫，直接存放在 Git 倉庫中，透過 Gatsby 在 build time 靜態生成頁面。整體架構在當時算是相當現代，但運行幾年後，幾個問題越來越明顯：

主題客製化受限

gatsby-theme-flexiblog 是基於主題系統（Theme Shadowing）客製化的，雖然可以覆寫元件，但整體設計風格固定，想要大幅調整排版或加入新的互動元素，往往要跟主題的底層設計搏鬥。

Gatsby 生態系更新負擔

Gatsby 在 React 生態系中的地位逐漸被 Next.js 取代，plugin 版本衝突、GraphQL 資料層的複雜度、以及偶發的 build 失敗，讓維護成本越來越高。每次升級都是一場賭注。

MDX 支援度低

雖然 Gatsby 支援 MDX，但自訂元件的整合相對繁瑣，程式碼區塊的語法高亮依賴 plugin，配置複雜。想要在文章中嵌入互動式元件或影片播放器，需要大量額外設定。

AI 整合能力有限

舊架構雖然有基礎的 AI 摘要與 TTS 功能（透過 Vertex AI 生成），但整合深度不夠——只有文字摘要和語音，沒有 AI 生成封面圖、背景音樂、或是影片生成的能力。生成腳本也較為分散，缺乏統一的管線設計。

二、新網站技術架構：解決了什麼？

新網站選擇了以下技術組合，截至目前已累積 244 篇文章：

層面	技術選擇
框架	Next.js 15 + React 19
語言	TypeScript
樣式	Tailwind CSS 4
打包工具	Turbopack（預設）
內容格式	MDX（gray-matter 解析）
部署	Vercel
留言	Giscus（GitHub Discussions）
分析	Google Analytics 4

MDX 為核心的內容架構

每篇文章都是一個獨立目錄：

public/content/posts/{handle}/
├── index.mdx          # 文章本文 + frontmatter
├── summary.json       # AI 生成的摘要文字
├── audio/
│   └── summary.mp3   # TTS 語音摘要
├── images/
│   └── cover.webp    # AI 生成封面圖
└── videos/
    └── demo.mp4      # AI 生成展示影片

Frontmatter 欄位完整定義了文章的所有 metadata：標題、日期、分類、標籤、縮圖路徑，以及影片 URL、音頻 URL 等多媒體欄位。

SEO 301 Redirect 無縫遷移

改版最怕的就是舊網址失效，讓累積多年的 SEO 排名瞬間歸零。為此設計了一套完整的 301 redirect 機制：

舊 URL: /my-post-slug
    ↓  middleware.ts 攔截（Edge Runtime）
    ↓  查詢 redirect-map.json
新 URL: /post/my-post-slug  （HTTP 301）

每篇文章的 frontmatter 都有 oldSlug 欄位記錄舊路徑。build 前 generate-redirect-map.mjs 腳本會自動掃描所有文章，生成對照表 redirect-map.json：

{
  "/my-old-slug": "/post/my-new-handle"
}

middleware.ts 在 Next.js Edge Runtime 攔截請求，查表後回傳 301，還額外做了大小寫不敏感比對（舊平台部分 URL 有大小寫混用的問題）。246 篇遷移文章的舊連結全部無縫轉址，搜尋引擎累積的權重完整保留。

App Router + 靜態生成

Next.js 15 的 App Router 讓路由組織更直覺，generateStaticParams 在 build time 預生成所有文章頁面，首屏載入速度遠超舊平台的動態渲染。

Turbopack 帶來飛速開發體驗

舊的 Webpack 在大型專案下啟動 dev server 要等好幾秒。Turbopack 讓本地開發的 Fast Refresh 快了近 10 倍，修改元件後幾乎是即時看到結果。

三、Claude Code AI 協作：一天打造新網站

這是這次改版最有趣的部分。我用 Claude Code（Anthropic 的 AI 開發助手）作為主要協作工具，從設計到實作，幾乎全程 pair programming。

實際的協作流程

早上：定義架構需求

我用自然語言描述需求，例如：「我需要一個支援深色模式的部落格首頁，左邊顯示最新文章列表，右邊有作者卡片和分類側欄」，Claude 直接輸出完整的 React 元件。

下午：功能迭代

深色模式切換、分類篩選、全文搜尋、Giscus 留言整合……每個功能都是一輪對話完成，不需要我手動查文件或調試基礎語法錯誤。

晚上：AI 生成腳本

最耗時的反而是 AI 生成腳本的設計與調試。生成圖片、音頻、音樂的腳本都用 Claude 協作完成，Claude 熟悉 LangChain、Vertex AI 的 API 格式，能直接給出可用的程式碼。

CLAUDE.md：AI 的說明書

為了讓 Claude 在整個開發週期都能理解專案結構，我維護了一份 CLAUDE.md 文件，記錄：

專案架構與關鍵路徑
文章 frontmatter 的完整欄位說明
各 AI 生成腳本的用法與 persona 定義
環境變數清單

這份文件讓 Claude 在每次對話中都能快速進入狀況，不需要每次重新解釋專案結構。

心得：AI 協作放大了什麼？

AI 協作不是取代開發者，而是消除了重複性的認知負擔。

以前花時間在：查 API 文件、調試基礎 TypeScript 錯誤、寫樣板程式碼。現在這些都由 Claude 處理，我的注意力可以專注在：架構決策、使用者體驗設計、AI 生成流程的設計。

一天完成核心架構，不是因為工作量少，而是因為每個環節的執行速度都快了 3-5 倍。

四、AI 自動化內容生成管線

新部落格最大的差異化特點，就是完整的 AI 媒體生成管線，所有生成腳本都在本地離線執行（節省 API 費用、避免 Vercel timeout），生成結果作為靜態資源提交到 Git。

封面圖生成（Gemini Image）

npm run generate-post-cover -- --handle migrate-blog-with-ai

腳本讀取文章標題與分類，讓 gemini-2.5-flash 生成圖片提示詞，再由 gemini-3.1-flash-image-preview 生成 16:9 技術風格封面圖。每個分類有對應的色系（AI 用紫色、Frontend 用藍色、DevOps 用綠色）。

AI 語音摘要（Gemini + TTS 小雅）

npm run generate-audio -- --handle migrate-blog-with-ai

「小雅」是這個部落格的 AI 主持人 persona——一位甜美的資工系大學生。她會用輕鬆的口吻，為每篇文章生成 350-500 字的繁體中文摘要，再由 Google Cloud TTS 的 cmn-TW-Wavenet-A 聲線合成音頻。

背景音樂（Google Lyria）

npm run generate-music

使用 Google 的 Lyria 音樂生成模型，為部落格生成適合技術閱讀情境的背景音樂，由 AI 音樂策展人 persona「Melody」設計音樂描述。

分類圖示與橫幅（Gemini）

22 個文章分類各有一張 iOS 風格的分類圖示和橫幅，全部由 Gemini 圖像模型生成，保持視覺風格一致性。

五、Vertex AI Veo 3.1：用 AI 生成技術展示影片

這是這篇文章的重點新技術：使用 Google Vertex AI 的 veo-3.1-generate-001 模型，從文字 prompt 生成影片。

為什麼要用 AI 生成影片？

技術文章配上影片能大幅提升讀者理解效率，但錄製、剪輯影片的成本很高。Veo 3.1 讓我可以用一段文字描述，就生成一段高品質的技術架構展示影片——不需要螢幕錄製，不需要剪輯軟體。

Veo 3.1 API 呼叫方式

Veo 3.1 使用 Vertex AI 的 Long-running Operation 模式，因為影片生成需要較長時間：

// 1. 發起生成請求
const response = await fetch(
  `https://us-central1-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/us-central1/publishers/google/models/veo-3.1-generate-001:predictLongRunning`,
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      instances: [{
        prompt: "A cinematic visualization of a modern Next.js 15 blog architecture: data flowing from MDX files through gray-matter parsing, through React Server Components, rendered as a beautiful dark-themed blog. Indigo and teal color scheme, technical diagram style with glowing nodes and connecting lines."
      }],
      parameters: {
        aspectRatio: "16:9",
        sampleCount: 1,
        durationSeconds: 8,
        generateAudio: false,
      }
    })
  }
)

// 2. 取得 operation name
const { name: operationName } = await response.json()

// 3. 輪詢等待完成
let result
while (true) {
  const pollResponse = await fetch(
    `https://us-central1-aiplatform.googleapis.com/v1/${operationName}`,
    { headers: { 'Authorization': `Bearer ${accessToken}` } }
  )
  result = await pollResponse.json()
  if (result.done) break
  await sleep(10000) // 每 10 秒輪詢一次
}

// 4. 取出影片 base64 並存檔
const videoBase64 = result.response.videos[0].bytesBase64Encoded
fs.writeFileSync(outputPath, Buffer.from(videoBase64, 'base64'))

generate-video.mjs 腳本

新增的 scripts/generate-video.mjs 腳本整合了完整的生成流程：

# 為指定文章生成展示影片（從文章標題與描述自動生成 prompt）
npm run generate-video -- --handle migrate-blog-with-ai

# 指定自訂 prompt
npm run generate-video -- --handle migrate-blog-with-ai --prompt "Modern blog architecture visualization"

# 強制重新生成
npm run generate-video -- --handle migrate-blog-with-ai --force

腳本會：

讀取文章的 title 和 description
用 Gemini 將中文標題轉換成適合 Veo 的英文視覺 prompt
呼叫 veo-3.1-generate-001 API 並輪詢等待
將生成的 .mp4 存到 public/content/posts/{handle}/videos/architecture-demo.mp4

影片嵌入文章

在文章 frontmatter 加上 videoUrl，指向生成的影片路徑：

videoUrl: "./videos/architecture-demo.mp4"
scrollAutoPlay: false

部落格的影片元件會自動處理相對路徑解析，支援本地 .mp4 和外部 YouTube URL 兩種格式。

六、成果對比與未來規劃

流量從一年一萬成長到六萬，增長了 6 倍。這不只是網站改版帶來的效果，更反映了 SEO 結構改善、載入速度提升後，搜尋引擎給予更高排名的直接結果。

這次改版的最大收穫

不只是一個更好的部落格，而是一套可重複使用的 AI 內容生成基礎設施。每篇新文章的封面圖、語音摘要、展示影片都可以一鍵生成，大幅降低了高品質技術文章的製作門檻。

未來規劃

整合更多 Veo 3.1 生成場景（教學流程動畫、架構圖動態展示）
探索 Gemini 多模態能力（截圖 → 自動生成說明文字）
RAG 知識庫：讓讀者能直接問部落格文章的問題

用一天打造這個新部落格，不是終點，而是一個新起點。

AI 工具讓我把過去需要一週的工作壓縮到一天，而省下來的時間，可以用來思考更有價值的問題：下一篇要寫什麼？

前言

今年初，我決定動手了。而且我給自己一個挑戰目標：用 Claude Code AI 協作，一天之內完成全新部落格的核心架構。

一、舊網站技術架構：痛在哪裡？

主題客製化受限

Gatsby 生態系更新負擔

MDX 支援度低

AI 整合能力有限

二、新網站技術架構：解決了什麼？

新網站選擇了以下技術組合，截至目前已累積 244 篇文章：

層面	技術選擇
框架	Next.js 15 + React 19
語言	TypeScript
樣式	Tailwind CSS 4
打包工具	Turbopack（預設）
內容格式	MDX（gray-matter 解析）
部署	Vercel
留言	Giscus（GitHub Discussions）
分析	Google Analytics 4

MDX 為核心的內容架構

每篇文章都是一個獨立目錄：

public/content/posts/{handle}/
├── index.mdx          # 文章本文 + frontmatter
├── summary.json       # AI 生成的摘要文字
├── audio/
│   └── summary.mp3   # TTS 語音摘要
├── images/
│   └── cover.webp    # AI 生成封面圖
└── videos/
    └── demo.mp4      # AI 生成展示影片

Frontmatter 欄位完整定義了文章的所有 metadata：標題、日期、分類、標籤、縮圖路徑，以及影片 URL、音頻 URL 等多媒體欄位。

SEO 301 Redirect 無縫遷移

改版最怕的就是舊網址失效，讓累積多年的 SEO 排名瞬間歸零。為此設計了一套完整的 301 redirect 機制：

舊 URL: /my-post-slug
    ↓  middleware.ts 攔截（Edge Runtime）
    ↓  查詢 redirect-map.json
新 URL: /post/my-post-slug  （HTTP 301）

每篇文章的 frontmatter 都有 oldSlug 欄位記錄舊路徑。build 前 generate-redirect-map.mjs 腳本會自動掃描所有文章，生成對照表 redirect-map.json：

{
  "/my-old-slug": "/post/my-new-handle"
}

App Router + 靜態生成

Next.js 15 的 App Router 讓路由組織更直覺，generateStaticParams 在 build time 預生成所有文章頁面，首屏載入速度遠超舊平台的動態渲染。

Turbopack 帶來飛速開發體驗

舊的 Webpack 在大型專案下啟動 dev server 要等好幾秒。Turbopack 讓本地開發的 Fast Refresh 快了近 10 倍，修改元件後幾乎是即時看到結果。

三、Claude Code AI 協作：一天打造新網站

這是這次改版最有趣的部分。我用 Claude Code（Anthropic 的 AI 開發助手）作為主要協作工具，從設計到實作，幾乎全程 pair programming。

實際的協作流程

早上：定義架構需求

下午：功能迭代

深色模式切換、分類篩選、全文搜尋、Giscus 留言整合……每個功能都是一輪對話完成，不需要我手動查文件或調試基礎語法錯誤。

晚上：AI 生成腳本

CLAUDE.md：AI 的說明書

為了讓 Claude 在整個開發週期都能理解專案結構，我維護了一份 CLAUDE.md 文件，記錄：

專案架構與關鍵路徑
文章 frontmatter 的完整欄位說明
各 AI 生成腳本的用法與 persona 定義
環境變數清單

這份文件讓 Claude 在每次對話中都能快速進入狀況，不需要每次重新解釋專案結構。

心得：AI 協作放大了什麼？

AI 協作不是取代開發者，而是消除了重複性的認知負擔。

一天完成核心架構，不是因為工作量少，而是因為每個環節的執行速度都快了 3-5 倍。

四、AI 自動化內容生成管線

封面圖生成（Gemini Image）

npm run generate-post-cover -- --handle migrate-blog-with-ai

AI 語音摘要（Gemini + TTS 小雅）

npm run generate-audio -- --handle migrate-blog-with-ai

背景音樂（Google Lyria）

npm run generate-music

使用 Google 的 Lyria 音樂生成模型，為部落格生成適合技術閱讀情境的背景音樂，由 AI 音樂策展人 persona「Melody」設計音樂描述。

分類圖示與橫幅（Gemini）

22 個文章分類各有一張 iOS 風格的分類圖示和橫幅，全部由 Gemini 圖像模型生成，保持視覺風格一致性。

五、Vertex AI Veo 3.1：用 AI 生成技術展示影片

這是這篇文章的重點新技術：使用 Google Vertex AI 的 veo-3.1-generate-001 模型，從文字 prompt 生成影片。

為什麼要用 AI 生成影片？

Veo 3.1 API 呼叫方式

Veo 3.1 使用 Vertex AI 的 Long-running Operation 模式，因為影片生成需要較長時間：

// 1. 發起生成請求
const response = await fetch(
  `https://us-central1-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/us-central1/publishers/google/models/veo-3.1-generate-001:predictLongRunning`,
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${accessToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      instances: [{
        prompt: "A cinematic visualization of a modern Next.js 15 blog architecture: data flowing from MDX files through gray-matter parsing, through React Server Components, rendered as a beautiful dark-themed blog. Indigo and teal color scheme, technical diagram style with glowing nodes and connecting lines."
      }],
      parameters: {
        aspectRatio: "16:9",
        sampleCount: 1,
        durationSeconds: 8,
        generateAudio: false,
      }
    })
  }
)

// 2. 取得 operation name
const { name: operationName } = await response.json()

// 3. 輪詢等待完成
let result
while (true) {
  const pollResponse = await fetch(
    `https://us-central1-aiplatform.googleapis.com/v1/${operationName}`,
    { headers: { 'Authorization': `Bearer ${accessToken}` } }
  )
  result = await pollResponse.json()
  if (result.done) break
  await sleep(10000) // 每 10 秒輪詢一次
}

// 4. 取出影片 base64 並存檔
const videoBase64 = result.response.videos[0].bytesBase64Encoded
fs.writeFileSync(outputPath, Buffer.from(videoBase64, 'base64'))

generate-video.mjs 腳本

新增的 scripts/generate-video.mjs 腳本整合了完整的生成流程：

# 為指定文章生成展示影片（從文章標題與描述自動生成 prompt）
npm run generate-video -- --handle migrate-blog-with-ai

# 指定自訂 prompt
npm run generate-video -- --handle migrate-blog-with-ai --prompt "Modern blog architecture visualization"

# 強制重新生成
npm run generate-video -- --handle migrate-blog-with-ai --force

腳本會：

讀取文章的 title 和 description
用 Gemini 將中文標題轉換成適合 Veo 的英文視覺 prompt
呼叫 veo-3.1-generate-001 API 並輪詢等待
將生成的 .mp4 存到 public/content/posts/{handle}/videos/architecture-demo.mp4

影片嵌入文章

在文章 frontmatter 加上 videoUrl，指向生成的影片路徑：

videoUrl: "./videos/architecture-demo.mp4"
scrollAutoPlay: false

部落格的影片元件會自動處理相對路徑解析，支援本地 .mp4 和外部 YouTube URL 兩種格式。

六、成果對比與未來規劃

這次改版的最大收穫

未來規劃

整合更多 Veo 3.1 生成場景（教學流程動畫、架構圖動態展示）
探索 Gemini 多模態能力（截圖 → 自動生成說明文字）
RAG 知識庫：讓讀者能直接問部落格文章的問題

用一天打造這個新部落格，不是終點，而是一個新起點。

AI 工具讓我把過去需要一週的工作壓縮到一天，而省下來的時間，可以用來思考更有價值的問題：下一篇要寫什麼？

用 AI 打造全新技術部落格：從舊架構到 Next.js 15 的完整改版歷程

前言

一、舊網站技術架構：痛在哪裡？

主題客製化受限

Gatsby 生態系更新負擔

MDX 支援度低

AI 整合能力有限

二、新網站技術架構：解決了什麼？

MDX 為核心的內容架構

SEO 301 Redirect 無縫遷移

App Router + 靜態生成

Turbopack 帶來飛速開發體驗

三、Claude Code AI 協作：一天打造新網站

實際的協作流程

CLAUDE.md：AI 的說明書

心得：AI 協作放大了什麼？

四、AI 自動化內容生成管線

封面圖生成（Gemini Image）

AI 語音摘要（Gemini + TTS 小雅）

背景音樂（Google Lyria）

分類圖示與橫幅（Gemini）

五、Vertex AI Veo 3.1：用 AI 生成技術展示影片

為什麼要用 AI 生成影片？

Veo 3.1 API 呼叫方式

generate-video.mjs 腳本

影片嵌入文章

六、成果對比與未來規劃

這次改版的最大收穫

未來規劃

留言

推薦標籤

推薦分類

AI

DevOps

Frontend

Management

Infra

PowerShell

熱門文章