Powei Lee

Life OS：Obsidian 知識庫整合專案

從 Strapi CMS 遷移到 Obsidian + Astro Content Collections，打造完整的個人知識管理與發布系統

角色 全端開發 + DevOps
時間 2025.10 - 2025.11
範圍 內容管理系統重構、工作流程自動化
AstroObsidianSlidevContent CollectionsSSGDevOps

專案簡介

Life OS 是一個整合式的個人知識管理與內容發布系統，透過將內容管理從 Strapi CMS 遷移到 Obsidian，打造了一個從筆記到發布的完整工作流程。

核心理念： Write Once, Publish Everywhere

專案連結： GitHub | 網站

專案背景

為什麼做這個專案？

過去使用 Strapi CMS 管理部落格內容，雖然功能完整，但面臨幾個問題：

  1. 工作流程斷裂： 在 Obsidian 寫筆記 → 複製到 Strapi → 手動設定 SEO → 發布
  2. 維護成本高： 需要維護獨立的 Strapi 伺服器、資料庫、API
  3. 內容不可攜： 內容鎖定在 Strapi 資料庫中，難以遷移或備份
  4. 開發體驗差： 每次修改內容都需要透過 CMS 介面，無法使用慣用的編輯器

目標

  • ✅ 統一寫作與發布流程（Obsidian 即是發布源）
  • ✅ 完全靜態化，零維護成本
  • ✅ 內容可攜性（純 Markdown，版本控制）
  • ✅ 自動化 SEO 與發布流程
  • ✅ 支援多種內容格式（Blog、Projects、Slidev）

技術架構

技術堆疊

  • 內容管理： Obsidian（雙 vault：blog + slides）
  • 靜態網站： Astro 5 + Content Collections
  • 簡報系統： Slidev + 客製化主題
  • 部署： Vercel（自動 build + CDN）
  • 工作流程： Claude Code Slash Commands

系統架構圖

┌─────────────────────────────────────────────────────┐
│                   Obsidian Vaults                   │
├─────────────────────────────────────────────────────┤
│  Blog Vault              │  Slides Vault            │
│  (site/src/content/blog) │  (slides/)               │
│  - 部落格文章            │  - 簡報內容              │
│  - 專案紀錄              │  - 演講資料              │
└──────────┬───────────────┴────────────┬─────────────┘
           │                            │
           ▼                            ▼
    ┌─────────────┐            ┌──────────────┐
    │   Astro 5   │            │    Slidev    │
    │  Content    │            │  Presentation│
    │ Collections │            │    System    │
    └──────┬──────┘            └──────┬───────┘
           │                          │
           │    Git Push              │
           └──────────┬───────────────┘
                      ▼
              ┌───────────────┐
              │    Vercel     │
              │  Auto Build   │
              │   + Deploy    │
              └───────┬───────┘
                      ▼
              ┌───────────────┐
              │  Production   │
              │ pwlee.dev     │
              │slides.pwlee.xyz│
              └───────────────┘

核心技術選擇

為什麼選擇 Obsidian？

  • 本地優先，完全掌控資料
  • Markdown 格式，內容可攜
  • 豐富的外掛生態系統
  • 已經是日常筆記工具

為什麼選擇 Astro Content Collections？

  • 原生支援 Markdown/MDX
  • Type-safe schema validation（Zod）
  • 零 runtime overhead（完全靜態）
  • 優秀的開發者體驗

為什麼選擇 Slidev？

  • Markdown-based，與 blog 工作流一致
  • 支援 Vue components
  • 客製化主題能力強
  • 可輸出 PDF/PPTX/SPA

開發過程

Sprint 1：Foundation & Blog Migration

挑戰： 從 Strapi SQLite 提取資料並轉換成 Astro Content Collections 格式

解決方式：

  1. 分析 Strapi 資料庫 schema
  2. 撰寫 SQL query 提取 posts 資料
  3. 建立 Content Collections schema（Zod）
  4. 手動轉換 6 篇文章到 Markdown
  5. 遷移圖片到 co-located folders

成果： 6 篇部落格文章成功遷移，SEO 完整保留

Sprint 2：Obsidian Setup & SEO Workflow

挑戰： 建立自動化的 SEO 生成與發布流程

解決方式：

  1. 配置 Obsidian vault 設定（image paste, templates）
  2. 建立 Claude Code Slash Commands：
    • /blog-generate-seo - AI 生成 SEO metadata
    • /blog-validate - 檢查 frontmatter 完整性
    • /blog-review - AI 內容品質審查
    • /blog-publish - 完整發布流程
  3. 整合 Context7 MCP 查詢最佳實踐

成果： 從寫作到發布只需 3 個指令，SEO 自動化生成

Sprint 3：Image Optimization & PostCard 重構

挑戰： Obsidian 貼上的圖片需要自動優化並正確顯示

解決方式：

  1. 配置 Obsidian image paste settings（auto-copy to current folder）
  2. 使用 Astro <Image /> component 自動優化
  3. Vercel 自動產生 WebP/AVIF
  4. 重構 PostCard 元件使用統一設計系統

成果： 圖片 paste → build → 自動優化，Lighthouse 95+ 分

Sprint 4：Slidev Integration

挑戰： 建立與 blog 一致的簡報工作流程

解決方式：

  1. 建立獨立的 slides/ Obsidian vault
  2. 開發 shared-theme matching brand design
  3. 實作 AutoScale Vue component 防止 overflow
  4. 建立 /slides-* 指令集（create, validate, review, build, publish）
  5. 整合 Context7 查詢 Slidev 最佳實踐

成果： Markdown → Slidev → 自動部署到 slides.pwlee.xyz

Sprint 5：Projects & Strapi Removal

挑戰： 完全移除 Strapi 依賴，建立 Projects 系統

解決方式：

  1. 建立 Projects Content Collection schema
  2. 新增 projects/ Obsidian vault
  3. 建立 /projects 頁面與 detail page
  4. 刪除整個 cms/ 目錄
  5. 移除所有 Strapi 相關程式碼
  6. 建立 site-settings.ts 取代 Strapi Site Settings

成果： 完全靜態化，零依賴外部服務

成果展示

核心功能

  1. 雙 Obsidian Vault 系統

    • Blog vault: site/src/content/blog/
    • Slides vault: slides/
    • 各自獨立的模板與設定

  2. 自動化 SEO 工作流程

    • AI 生成 meta title/description/keywords
    • 自動產生 canonical URLs
    • 完整的 structured data (JSON-LD)

  3. 完整的 Slash Commands

    • 10 個 /blog-* 指令
    • 6 個 /slides-* 指令
    • 支援 human-in-the-loop 審查

  4. 三位一體的內容系統

    • Blog: 部落格文章與教學
    • Projects: 專案紀錄
    • Slidev: 簡報與演講

效能數據

  • Build Time: ~3-4 秒（完全靜態）
  • Lighthouse Score: 95+ (Performance, SEO, Accessibility)
  • Bundle Size: ~50KB (gzipped)
  • Deploy Time: ~1 分鐘（Vercel 自動部署）

開發體驗提升

Before (Strapi):

寫作 → 複製到 Strapi → 設定 SEO → 上傳圖片 → 發布
⏱️ ~15-20 分鐘

After (Obsidian + Astro):

寫作 → /blog-generate-seo → /blog-publish
⏱️ ~2-3 分鐘

學習心得

技術收穫

  1. Astro Content Collections 深入理解

    • Glob loader pattern
    • Zod schema validation
    • Type-safe content queries

  2. MCP (Model Context Protocol) 整合

    • Context7 for documentation lookup
    • Zeabur for deployment management
    • 提升 AI 輔助開發效率

  3. Slidev 客製化

    • Vue component 開發
    • Theme 系統設計
    • Auto-resize 解決方案

  4. 工作流程自動化

    • Claude Code Slash Commands
    • Human-in-the-loop AI workflow
    • Git-based deployment pipeline

專案管理心得

  • 逐步遷移策略： 分 5 個 Sprint，每個 Sprint 都有可驗證的成果
  • 保持向後相容： Sprint 1-3 完成前，Strapi 仍可使用
  • 文檔先行： 每個 Sprint 都更新 CLAUDE.md 與技術文檔
  • AI 協作模式： 善用 Claude Code 加速開發，但保持人工審查

如果重來會怎麼做？

  1. 提早規劃 Projects 系統： Sprint 1 就應該一起設計 Blog + Projects schema
  2. 更早測試 AutoScale： Slidev overflow 問題花了較多時間 debug
  3. 建立更完整的測試： 目前主要靠手動測試，應該加入 E2E tests

未來規劃

接下來想要加入的功能或改進方向：

  • 完成 Strapi 遷移
  • 建立 Projects 系統
  • Slidev 整合
  • NLWeb 語意層實作（2025.11.22 完成）
    • llms.txt 入口檔案
    • llms-full.txt 自動生成
    • Atom 1.0 RSS feed with full content
    • Enhanced Schema.org JSON-LD
  • Daily Notes Collection（每日筆記發布）
  • Tags 系統改用 Content Collections
  • RAG Chatbot（語義搜尋）
  • AI Agent Analytics（追蹤 agents 存取）
  • Analytics 整合（Umami）
  • Newsletter 系統（Email subscription）
  • 中英雙語支援

Sprint 6: NLWeb 語意層（2025.11.22）

目標： 實作完整的 NLWeb 語意層，讓 AI agents 能夠發現與存取內容

成果：

  1. llms.txt 靜態入口檔案

    • 位置: site/public/llms.txt
    • 提供網站結構導覽
    • 遵循 NLWeb 規範

  2. llms-full.txt 自動生成系統

    • Build script: site/scripts/generate-llms-full.ts
    • 自動索引所有文章與專案
    • 整合到 npm run prebuild

  3. Atom 1.0 RSS Feed 升級

    • 從 RSS 2.0 升級到 Atom 1.0
    • 包含完整 HTML 內容（使用 marked 解析）
    • 支援 author, tags, updated time
    • 增加到 50 篇文章

  4. Schema.org JSON-LD 優化

    • WebSite schema: 加入 SearchAction, inLanguage
    • Organization schema: 加入 founder, foundingDate
    • BlogPosting schema: 加入 inLanguage, wordCount, 完整作者資訊

技術細節：

  • 新增依賴: gray-matter, marked
  • 實作 markdown to HTML 轉換
  • 更新 site/src/lib/site-settings.ts 完整 organization 資訊
  • Build time 自動化生成 llms-full.txt

參考標準：

  • 符合 NLWeb 規範（12+ 企業採用：Shopify, Snowflake, O’Reilly 等）
  • W3C Feed Validator 驗證通過
  • Google Rich Results Test 驗證通過

相關文章： 實作 NLWeb 語意層

專案統計：

  • ⏱️ 開發時間：~3 週（6 個 Sprint）
  • 📝 程式碼變更：~4000+ lines added, ~5000+ lines removed
  • 🎯 完成度：100% (All Sprints 完成 + NLWeb enhancement)
  • 🚀 部署狀態：Production (pwlee.dev, slides.pwlee.xyz)
  • 🤖 AI Agents 友善：完整 NLWeb 語意層支援
← 返回專案列表