從零打造 AI 賦能的個人部落格：起源與架構
有一個記錄學習歷程的部落格一直是我的目標。這篇文章將分享我如何使用 Next.js、Vercel 以及 Google Gemini API，打造一個不僅僅是靜態頁面，而是擁有「大腦」的個人網站。
起源：Hello, World! 與 AI 助手
這個網站的誕生，其實源自於我與 AI 的一次次的對話。
在 2024 年 8 月底，我決定把舊的使用Hugo+Git Page的網頁砍掉重練 從新開始建立部落格。為了讓開發過程更順利，我並沒有直接開始寫 Code，而是先花時間設定了一個的 AI 助手。
幕後功臣：AI 助手的「創始 Prompt」
要讓 AI 成為可靠的助手，最重要的就是給它一個清楚的角色定位。以下是我當時寫下的 Prompt，它奠定了這個專案的基礎：
角色定位 你是一位 經驗豐富的全端網站架設教練 和 內容策劃顧問，擅長從零帶領使用者完成網站製作，並協助規劃部落格、作品集與個人品牌內容策略。 特別專注於 免費或低成本架站 及 免費 AI 技術串接，並能將技術細節轉換成 簡單明瞭、可立即執行的步驟。
這個 Prompt 幫助我釐清了要使用的技術（Next.js + Tailwind CSS），並確立了網站簡約明亮的風格。
為什麼選擇這個架構？
在開始動手之前，我設定了幾個目標：
- 效能優先：必須是靜態生成的 (SSG)，載入速度要快。
- 開發體驗：使用我曾寫過的 React 生態系，並且用習慣的 Markdown 語法寫作。
- AI 整合：這是我最想嘗試的部分，我希望訪客可以直接「問」我的部落格，而不是只能用關鍵字搜尋。
基於這些目標，我選擇了 Next.js 14 (App Router) 作為框架，搭配 Tailwind CSS 處理樣式，並部署在 Vercel 上。而 AI 的部分，則選用了 Google Gemini 2.0 Flash 模型搭配 RAG 技術。
系統架構圖
這張圖展示了整個部落格的運作流程，從訪客進入網站，到 AI 如何檢索並回答問題：
架構更新中，請稍後...
核心技術解析
1. RAG (Retrieval-Augmented Generation)
為了讓 AI 能夠回答關於我部落格內容的問題（例如：「作者的技術棧有哪些？」），我實作了一個輕量級的 RAG 系統。
- Indexing：在 Build time 或透過 API 觸發，將所有 Markdown 文章轉換成向量 (Embeddings)。
- Retrieval：當使用者提問時，系統會先計算問題的向量，並在資料庫中尋找最相似的文章段落。
- Generation：將找到的段落作為「上下文 (Context)」餵給 Gemini，讓它根據這些資訊生成準確的回答。
2. 優化的閱讀體驗
除了 AI，我也花了些心思在閱讀體驗上：
- 文章目錄 (TOC)：自動解析 H1-H3 標題，生成懸浮的目錄側邊欄，並解決了導覽列遮擋的問題 (
scroll-margin-top)。 - 更新日誌 (Changelog)：建立了一個獨立的時間軸頁面，記錄專案的每一次迭代，保持開發透明度。
如果你對這個部落格感興趣，歡迎直接在右下角的聊天視窗跟我的AI助手聊聊天！