AI 驅動的個人部落格

專案簡介

核心理念：降低「想法 → 作品」之間的摩擦力

這個專案探索 AI 如何成為內容創作者的真正夥伴，而非只能回話，無法操作工具的「瓶中小人」。透過客製化的 Claude Code Skills，將重複性判斷工作（SEO meta 補全、格式檢查、圖片處理）自動化，讓人專注在真正重要的事：思考與創作。

完整工作流程：

階段	工具	價值主張
內容創作	Markdown 文件	僅操作文字，且可與 LLM 共同編輯
品質優化	Claude Code Skills	AI 自動處理 SEO、圖片、格式檢查等重複性工作
發布部署	Astro + Vercel	靜態生成零成本部署，Git push 即上線

設計哲學：

LLM 友善出發，避開複雜的後台與資料庫。所有內容以 Markdown 格式儲存，方便版本控制，也方便 LLM 理解與處理。目標是建立「能與 AI 協作」的內容生產流程。

專案連結：

• 就是現在這個網站。

---

專案背景

克服選擇障礙：不讓工具研究取代真正創作

因為知道工具都有優缺點，所以每次在想寫部落格時，都想找到「最好」的那一個，嘗試過多種內容平台，但卻遲遲沒有真的累積作品。發現每次都把該拿來創作的能量拿去研究工具。

每次想寫作時都花很多時間在查詢最好的排版方法，想辦法把圖檔大小優化等等，很難切換情境的我，常常一切換，就迷失在研究工具，而忘掉創作本身。因此我想建立一個可以隨著過程一起迭代，不擔心在初學時候選錯，之後搬家成本很高，同時又可以讓我只面對一個簡單介面就可以完成創作的統一工具。

三個核心問題與解決方向：

問題	現況痛點	解決策略	預期效益
想法到作品的摩擦	需要切換多個工具、學習新介面	使用本地 Markdown 檔案，任何編輯器都能用	降低發文門檻，提升創作意願
AI 瓶中小人困境	AI 只能回答問題，無法主動執行	客製化 Skills 讓 AI 執行完整工作流程	AI 成為協作夥伴而非諮詢對象
重複性判斷消耗精力	SEO 補全、文章排版、圖片優化需要人工檢查	自動化所有可流程化的工作	創作者專注在內容策略與思考，流程工作只需審核和修改

這個專案不是要打造「更好的 WordPress」，而是探索「AI 原生」的內容管理方式。實驗 AI 驅動的創作，是否能夠成為這個時代的內容基礎設施。

---

設計決策

技術選擇的實際考量

每個技術決策都基於「降低摩擦力」與「長期不被鎖死」兩大原則：

技術選擇	背後考量	為什麼重要
本地 Markdown 檔案	純文字格式，任何編輯器都能編輯	Coding agents 可直接讀寫，真正的 AI 協作
Astro SSG	靜態生成 = 零運行成本	個人部落格不需要伺服器費用
Vercel 免費方案	自動部署 + Preview 環境	Git push 即上線，草稿可預覽後再發布
Claude Code Skills	用自然語言定義工作流程	非技術背景也能客製化自動化流程
Git 版本控制	本地儲存 + 完整歷史記錄	內容永遠在自己手上，不被平台綁架

核心技術堆疊：

• 內容格式：Markdown（本地檔案 + Git 版本控制）
• 編輯環境：VS Code / Terminal / Obsidian（任何編輯器皆可）
• 框架：Astro v5（SSG 靜態網站生成，SEO 友善）
• 樣式：自訂 CSS Variables（Flow/Drain 雙主題系統）
• 部署：Vercel（免費方案 + 自動部署 + Preview 環境）
• AI 協作：Claude Code + Custom Skills（工作流程自動化）

擴充性設計：

Astro 支援 Vue 和 React 組件，未來可依需求逐步擴充互動功能，而不需要整個系統重寫。彈性策略確保專案能隨著需求成長，同時也讓自己不會有選擇障礙，畢竟這方向是「我全都要」。

---

關鍵成果

完整的自動化工作流程

已實作的 Claude Code Skills 系統：

階段	Skill 指令	自動化內容	預計時間
草稿建立	/blog-draft /project-draft	自動建立 frontmatter 結構、設定預設值	5 分鐘 → 30 秒
內容優化	/blog-generate-seo	根據文章類型生成 SEO metadata（標題、描述、關鍵字）	15 分鐘 → 1 分鐘
品質審核	/blog-review	檢查可讀性、文章結構、內容完整性	10 分鐘人工檢查 → AI 自動審核
技術驗證	/blog-validate	驗證 frontmatter 格式、標題階層、必填欄位	避免發布後才發現錯誤
圖片處理	/blog-images	優化、壓縮、生成 alt text	10 分鐘 → 1 分鐘
FAQ 生成	/blog-add-faq	自動生成常見問題（提升 SEO）	30 分鐘 → 2 分鐘
發布檢查	/blog-publish	執行完整發布前檢查清單、Git commit	確保發布品質一致

就像有一個編輯在身邊，從想法到發布，時間大幅縮短，且我只要專注在內容本身。

AI 搜尋時代的基礎建設

LLM 友善語意層：

組件	功能	商業價值
llms.txt	網站結構索引	AI agents 能理解網站內容組織方式
llms-full.txt	完整內容清單	提供所有文章與專案的完整索引
Atom 1.0 RSS	包含完整 HTML 內容的 Feed	AI 能直接讀取文章內容而非僅摘要
Schema.org JSON-LD	結構化資料標記	提升搜尋引擎理解度，為 AI 搜尋做準備

當 AI 搜尋成為主流，具備語意層的網站將更容易被發現與引用。

品牌視覺系統

Flow/Drain 雙主題設計系統：

• 淺色模式（Flow）：流動藍 - 代表資訊的流動
• 深色模式（Drain）：螢光綠 - 代表能量的釋放
• 品牌字體：Noto Serif TC（中文）+ Libre Baskerville（英文）
• 組件化設計：Button, Callout, GridLayout 等可重用組件

現階段限制與取捨

限制	原因	未來規劃
無後端互動	靜態網站架構，降低成本與複雜度，也方便 LLM 操作	待流量成長後再評估是否需要
SEO 功能初階	目前僅填入 metadata，未做關鍵字研究	累積內容後再進行 相關分析
JSON-LD 部分完成	BlogPosting 已實作，FAQ/BreadcrumbList 優化中	持續優化結構化資料

取捨原則： 先建立 MVP 驗證核心價值（AI 協作工作流程），再根據需求決定優化方向。避免過度優化後面會被改掉的功能。

---

未來發展方向

由於是個人網站，並無一個確切的時限，而是隨者自己的成長，慢慢把新學到的觀念建置進來，在 AI 快速發展的時代，不斷迭代。

短期目標

充實內容，完善功能

項目	目標	預期效益
專案整理上線	將手邊已完成的專案整理發布，充實內容	建立完整的 Portfolio，展示實戰經驗
JSON-LD 結構化資料	實作 FAQ、BreadcrumbList 等進階 schema	提升搜尋引擎理解度，為 AI 搜尋做準備
簡報生成系統	整合 Canva MCP + 預設模板	快速將成果轉換為簡報格式，方便隨時分享

中期目標

數據驅動的內容優化

項目	目標	預期效益
Analytics 整合	了解讀者行為、熱門內容、流量來源	數據驅動的內容策略，提升內容品質
站內搜尋優化	改善搜尋體驗（目前僅客戶端 filter）	降低使用者尋找內容的摩擦力
SEO 深化研究	關鍵字搜尋量分析、SERP 競品研究	建立 SEO 最佳實踐，提升自然流量

長期願景

從靜態網站到互動式數位助理

核心概念： 將部落格轉變為「能互動的履歷」，讓訪客透過 AI 助理了解我的專案經驗、預約面談、查詢特定主題文章。

實作策略：

功能	技術方向	預期效益
文章 RAG 索引	每篇文章建立向量索引	AI 助理能精準回答訪客提問，撰寫文章時也可以隨時透過 AI 整合過去內容
行事曆整合	串接 Google Calendar API	訪客可直接預約面談時間
個人化互動	根據訪客興趣推薦相關內容	提升使用者體驗，建立專業形象

階段式推進： 先完成內容累積與基礎建設，再逐步加入更多功能。避免過早優化，確保每個功能都有明確的使用場景。