簡單來說
今天花了一整個下午與晚上的時間，用 Vibe coding 的方式做出了一個 Zola 部落格的 GUI 管理工具 —— Yanami。這是一個結合了 Rust 強大後端與 React 靈活前端的嘗試，記錄一下過程中遇到的技術挑戰與解決方案。
為什麼要打造 Yanami？
雖然靜態網站產生器（SSG）如 Astro 或 Zola 非常強大且快速，但對於日常寫作來說，頻繁地在終端機輸入 zola serve、手動建立 Markdown 檔案、處理 YAML Front-matter，有時候還是略顯繁瑣。
尤其是當我想更換主題或調整配置時，往往需要直接修改 config.toml。為了提升寫作體驗，我決定趁著今天有一整段空檔，挑戰用 Tauri v2 搭配 React 19 打造一個專屬的桌面端 GUI 工具 —— Yanami。
技術架構介紹
這次開發的核心技術棧如下：
- 桌面框架: Tauri v2。選擇 Tauri 是因為它極致的輕量化，且後端可以使用 Rust 處理檔案系統與行程管理，非常適合與 Rust 撰寫的 Zola 整合。
- 前端 UI: React 19 + TypeScript + CSS Modules。利用 React 的元件化開發 Editor、Sidebar 等介面。
- 狀態管理: Zustand。處理專案路徑、文章列表與伺服器狀態。
- 後端引擎: Zola。利用 Tauri 的
externalBin(Sidecar) 機制直接封裝 Zola 二進位檔。
遇到的困難與解決方案
雖然是「Vibe Coding」（靠著直覺與 AI 快速推進），但在處理系統底層與 Zola 特有的邏輯時，還是遇到了不少坑。
1. 主題優先權問題 (Template Priority)
困難: Zola 的渲染邏輯中，根目錄標籤夾 templates/ 的優先權高於主題內部的 templates/。當使用者想切換新主題時，如果以前在根目錄留有舊樣式，新主題會完全失效。
解決方案: 我撰寫了一套自動備份機制。當切換到非預設主題時，Yanami 會自動將根目錄的 templates/ 重命名為 templates_bak/；當使用者切換回預設（或空）主題時，再自動還原。這確保了 GUI 能真正實現場景化的「一鍵換膚」。
2. Git 子模組與嵌套目錄衝突
困難: 當從 GitHub URL 安裝主題時，通常會直接 git clone 到 themes/ 下。這會導致在主題資料夾內留下一個 .git 隱藏資料夾。如果主專案也是 Git 倉庫，這會產生 nested repository 的問題，導致 Vercel 或 GitHub Pages 部署時無法抓取到主題檔案。
解決方案: 在 Tauri 後端安裝主題後，新增一個遞迴刪除機制，強制移除主題目錄下的所有 .git 相關檔案。雖然粗暴但極其有效，讓使用者可以在不具備 Git 深度知識的情況下順利部署。
3. 即時預覽伺服器的生命週期管理
困難: Zola server 是持久性的行程。如果使用者關閉應用程式或切換專案，後台的 Zola 行程如果不殺掉，會導致端口 (Port 1111) 被佔用。
解決方案: 利用 Tauri 提供的 Command API，在 Rust 端維護一個單例的 Child Process 句柄。在切換專案或 restart_preview_server 時，先發送訊號強制終止現有行程，並監聽應用程式結束事件 (Exit event) 來確保不留下孤兒行程。
結語
這次 Vibe Coding 的體驗非常特別。在短短不到 10 小時內，從一個空的資料夾，到現在擁有一個具備文章編輯、主題一鍵替換、即時預覽與部署功能的工具。
雖然 Yanami 目前還在初期階段，但它已經成功解決了我寫作時最大的痛點。
如果你也喜歡 Zola 的簡潔，但又渴望桌面應用的便利性，歡迎跟我一起探索 Tauri 的開發世界！
最後感謝專案名稱與主Icon視覺的靈感來源：敗北女角的八奈見杏菜(Yanami Anna)
