BLOG · Obsidian

Obsidian + Astro:我終於找到順手的寫作與發布組合

Obsidian Astro 工作流程 AI 協作 個人成長
粉紅頭髮主角坐在沙發上拿著筆記本沉思,左側浮現 Obsidian 樣式的結構化筆記,右側是 Astro 樣式的發布網站,中間有粉紅色流線連接,標語「寫在本地,發佈到世界」

從工具焦慮到找到「命定組合」

過去幾年,我在 Notion、HackMD、WordPress、Ghost、各種 CMS 之間來回切換。每次想寫作,都先花時間研究工具:「這個後台好不好用?」「格式會不會跑掉?」「圖片要怎麼處理?」

最後發現問題不是工具好不好用,而是太容易沈迷在研究工具,卻遲遲不動手

直到接觸 Obsidian + Astro 的組合,我終於找到讓自己「忘記工具存在」的寫作流程。這篇文章不是教學指南,而是使用心得分享——如果你也有類似困擾,歡迎一起討論。


為什麼選擇 Obsidian?

純文字寫作的自由感

Notion 有複雜的 block 結構,WordPress 有一堆設定要填,HackMD 又太陽春。Obsidian 就是純 Markdown,打開就寫。

沒有格式干擾,沒有複雜介面,就是你和文字。

本地檔案 + Git 的安全感

所有內容以 Markdown 存放在本機和 Git 倉庫裡,不受任何平台綁定。想搬家就搬家,想備份就備份。

但最重要的是:文件直接就在 repo 裡面

這帶來一個意外的好處:

在雲端請 AI 準備文章

因為內容在 Git repo,我可以用 Claude Code Web(雲端版)在任何地方請 AI 幫忙準備文章。

回家路上突然有想法?打開手機瀏覽器,透過 Claude Code Web 建立草稿。

AI 會建立 Pull Request,我回家後在電腦上檢查、合併、最後修改。

真的像是一個「可以被交代」的助手。

不需要在電腦前才能工作,也不需要複製貼上。AI 直接在 repo 裡操作,我只需要檢查和決策。

雙向連結建立的知識網絡

寫一篇文章時,可以用 [[雙向連結]] 快速引用其他筆記。

Obsidian 會自動建立關聯,讓文章之間有機連結。回顧時會發現意想不到的概念關聯。

Graph View 的療癒感

Obsidian 有一個很療癒的功能:Graph View(知識圖譜)

它會把所有筆記和連結視覺化成一張網絡圖,讓你看到知識是如何相互連結的。

人工建立這個很麻煩:需要好好想標籤、手動建立連結、維護一致性。

但有能夠理解語意的 LLM 後?

我可以請 AI 幫我:

  • 自動建立相關標籤
  • 找出文章之間的語意關聯
  • 自動建立雙向連結
  • 優化知識圖譜的結構

結果是:漂亮的 Graph View 自動完成

看著這張不斷生長的知識網絡,有種「我的想法正在變成系統」的滿足感。


為什麼選擇 Astro?

Content Collections 的結構化管理

Astro Content Collections 讓我可以用 TypeScript 定義文章結構:

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    publishedAt: z.date(),
    tags: z.array(z.string()),
    // ... 其他欄位
  }),
});

當我在 Obsidian 完成文章、推上 Git 後,Astro 會:

  1. 自動讀取 Markdown
  2. 驗證 frontmatter(metadata 打錯會報錯)
  3. 渲染成靜態頁面

再也不用擔心 metadata 格式問題。

SSG 的速度與可靠性

Git push 就自動部署。

不需要管理伺服器,不需要擔心資料庫,不需要處理快取。Vercel 免費方案就足夠個人使用。

靜態生成的頁面速度極快,SEO 友善,而且幾乎不會壞掉。

可擴充性

現在用 Markdown + SSG 就夠了。

未來需要互動功能時,可以加 React/Vue 組件。需要後端時,可以加 Serverless Functions。

夠用就好,需要再擴充。 不用一開始就過度工程化。


實際工作流程體驗

日常寫作

  1. 在 Obsidian 中開啟 blogs/ 資料夾
  2. 直接寫作,不用管格式
  3. 需要引用其他筆記時,用 [[雙向連結]] 快速插入
  4. 完成後 Git commit

發布流程(AI 協作)

  1. 在雲端請 AI 準備草稿
    • 用 Claude Code Web 建立 Pull Request
    • AI 自動處理 SEO、圖片、格式檢查
    • 回家後在電腦上檢查和合併
  2. 最後修改
    • 在 Obsidian 中潤飾內容
    • AI 自動生成 metadata
    • Git commit
  3. 自動部署
    • Git push
    • Vercel 自動部署
    • 5 分鐘後文章上線

圖片處理

  • 直接貼上圖片到 Obsidian
  • AI 自動優化壓縮、生成 alt text
  • Astro 自動處理響應式圖片

不需要手動處理圖片,AI 全部搞定。

Graph View 維護

  • AI 自動建立標籤
  • AI 找出文章之間的語意關聯
  • AI 自動建立雙向連結
  • 知識網絡自動生長

我只需要寫作,知識圖譜自己長出來。


意外的收穫

思緒流動更順暢

寫作時不需要切換工具,注意力完全放在內容本身。

Obsidian 的雙向連結讓我在寫作時自然串起過去的筆記,思緒流動得更順。

知識網絡自然形成

原本只是寫文章,但透過雙向連結和 AI 協助,文章之間自然形成網絡。

回顧時會發現:原來這個概念和那個概念有關聯。

AI 協作更流暢

Claude Code 直接在本地檔案上操作,不需要切換視窗、不需要複製貼上。

AI 能看到我的專案結構、理解我的內容脈絡,真正成為協作夥伴而非「瓶中小人」。

更棒的是:在雲端也能請 AI 幫忙

通勤時有想法?用手機瀏覽器打開 Claude Code Web,請 AI 準備草稿。回家後檢查合併,完全無縫接軌。


目前的挑戰

學習曲線:

  • 需要熟悉 Git、Markdown、Astro
  • 非技術背景的人可能覺得門檻高

圖片管理:

  • 還在優化自動化流程
  • 目前需要手動調整圖片路徑

知識圖譜的品質:

  • AI 自動建立的連結還不夠精準
  • 需要人工檢查和調整

未來規劃

語音輸入工作流程:

  • 探索語音 → Markdown 的流程
  • 讓創作更接近「說話」本身

優化 AI 協作:

  • 改善自動標籤的準確度
  • 優化知識圖譜的生成邏輯

探索 Obsidian 插件:

  • Dataview(資料查詢)
  • Templater(範本系統)
  • 更多自動化可能性

歡迎討論

這個工作流程對我來說很順手,但不一定適合所有人。

如果你:

  • 也有工具選擇焦慮
  • 想要完全掌控自己的內容
  • 希望用 AI 協作而非被 AI 取代
  • 喜歡純文字寫作
  • 想建立自己的知識網絡

歡迎透過聯絡頁面與我討論。

我很樂意分享更多細節,或幫助你建立適合自己的工作流程。不一定要用我的技術組合,重點是找到讓你忘記工具存在的那個組合。

先有,再迭代。 不要被完美主義困住。

PW Lee 的卡通頭像

PW Lee · 李柏緯

@pwlee.xyz

在飛機上也要用 Edge AI 對話的重度成癮者,想像有一天能只用對話就完成工作。
分享 AI 應用、workflow、組織導入的實際經驗。

Related Posts

All posts →