[{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/hugo/","section":"Tags","summary":"","title":"Hugo","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/markdown/","section":"Tags","summary":"","title":"Markdown","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/obsidian/","section":"Tags","summary":"","title":"Obsidian","type":"tags"},{"content":"Obsidian 是一款強大的個人知識管理（PKM）與雙鏈筆記軟體，而 Hugo 則是極速的靜態網站生成器。將兩者結合，能讓你直接在 Obsidian 舒適的編輯器中撰寫草稿，完成後輕鬆發布至個人部落格！\n本文將一步步帶你了解如何設定 Obsidian 搭配 Hugo，並妥善管理圖片與背景音樂等靜態資源路徑。\n1. Obsidian 與 Hugo 搭配核心概念 # Hugo 預設從 content/ 目錄讀取文章，而 static 靜態檔案（圖片、音樂、影片）則存放在 static/ 或文章同級的 Page Bundles 中。\n為了確保在 Obsidian 預覽時能正確顯示圖片與播放音樂，且發布到 Hugo 後路徑不失效，建議採用以下兩種路徑管理模式之一：\n模式 A：Page Bundles（頁面包裹模式，最推薦 👍） # 將每篇文章建立獨立資料夾：\ncontent/posts/my-cool-article/ ├── index.md \u0026lt;-- 文章內容 ├── header.jpg \u0026lt;-- 文章封面/圖片 └── bg-music.mp3 \u0026lt;-- 背景音樂 在文章中直接使用相對路徑引用：\n![圖片描述](header.jpg) 模式 B：全局靜態資源（Global Static Folder） # 將資源統一存放在 Hugo 的 static/ 資料夾中：\nstatic/ ├── images/ │ └── 2026/ │ └── photo.jpg └── media/ └── bg-music.mp3 在文章中統一使用全域絕對路徑 / 引用（Hugo 生成時會自動去掉 static 前綴）：\n![照片](/images/2026/photo.jpg) 2. Obsidian 關鍵設定步驟 # 為了讓 Obsidian 生成的連結格式相容於 Hugo，請在 Obsidian 中進行以下設定：\n關閉 WikiLinks 格式：\n前往 Settings (設定) -\u0026gt; Files and links (檔案與連結)。 關閉 Use [[Wikilinks]] 選項（確保 Obsidian 自動插入標準 Markdown 格式 [Text](link.md)）。 設定附件存放目錄 (Attachment Folder)：\n於 Files and links -\u0026gt; Default location for new attachments 中： 若採用 Page Bundles 模式：選擇 In the subfolder specified below 並設定為 ./ 或與文章同目錄。 若採用 全局靜態資源 模式：選擇 In the folder specified below 並指向 Hugo 的 static/images 資料夾。 連點相對路徑 (New Link Format)：\n選擇 Relative path to file（相對於檔案的相對路徑）。 3. 圖片與背景音樂（多媒體）路徑管理實戰 # 🖼 圖片管理 # 在 Obsidian 插入圖片時，語法如下：\n\u0026lt;!-- 標準 Markdown 圖片語法 --\u0026gt; ![Obsidian 搭配 Hugo 架構圖](/images/obsidian-hugo-arch.png) \u0026lt;!-- 若需調整圖片尺寸或樣式 (HTML 標籤) --\u0026gt; \u0026lt;img src=\u0026#34;/images/obsidian-hugo-arch.png\u0026#34; alt=\u0026#34;架構圖\u0026#34; width=\u0026#34;80%\u0026#34; style=\u0026#34;border-radius: 8px;\u0026#34; /\u0026gt; 🎵 背景音樂與音訊檔管理 # 若想在特定文章中加入背景音樂或語音旁白，可將 .mp3 或 .ogg 檔案放入 static/media/ 或文章同級目錄下。\n方法 1：標準 HTML5 Audio 標籤 # 直接在 Markdown 文章中嵌入以下代碼：\n\u0026lt;div class=\u0026#34;audio-player\u0026#34; style=\u0026#34;margin: 20px 0;\u0026#34;\u0026gt; \u0026lt;p\u0026gt;🎧 \u0026lt;strong\u0026gt;背景音樂試聽：\u0026lt;/strong\u0026gt;\u0026lt;/p\u0026gt; \u0026lt;audio controls preload=\u0026#34;metadata\u0026#34; style=\u0026#34;width: 100%;\u0026#34;\u0026gt; \u0026lt;source src=\u0026#34;/media/bg-music.mp3\u0026#34; type=\u0026#34;audio/mpeg\u0026#34;\u0026gt; 您的瀏覽器不支援 HTML5 音訊播放。 \u0026lt;/audio\u0026gt; \u0026lt;/div\u0026gt; 方法 2：使用 Hugo Shortcode (可自訂美化) # 在 Hugo 專案中的 layouts/shortcodes/audio.html 建立自訂元件：\n\u0026lt;!-- layouts/shortcodes/audio.html --\u0026gt; \u0026lt;figure class=\u0026#34;custom-audio\u0026#34;\u0026gt; \u0026lt;audio controls src=\u0026#34;{{ .Get \u0026#34;src\u0026#34; }}\u0026#34;\u0026gt;\u0026lt;/audio\u0026gt; {{ with .Get \u0026#34;caption\u0026#34; }}\u0026lt;figcaption\u0026gt;{{ . }}\u0026lt;/figcaption\u0026gt;{{ end }} \u0026lt;/figure\u0026gt; 在 Obsidian 撰寫 Markdown 時，只需調用 Shortcode：\n您的瀏覽器不支援 HTML5 音訊播放器。 聽聽這首放鬆的背景音樂 4. Obsidian Front Matter 範本 # 可以在 Obsidian 中安裝 Templater 插件，點擊快捷鍵自動產生符合 Hugo 規格的 Front Matter 頁首：\n--- title: \u0026#39;{{title}}\u0026#39; date: {{date}}T{{time}}:00+08:00 draft: true summary: \u0026#39;\u0026#39; categories: [\u0026#39;技術\u0026#39;] tags: [\u0026#39;Obsidian\u0026#39;, \u0026#39;Hugo\u0026#39;] showToc: true --- 5. 發布自動化工作流總結 # 完成了上述設定後，未來的寫作與發布工作流程將變得極度簡潔：\ngraph LR A[Obsidian 撰寫筆記與插入圖片/音樂] --\u0026gt; B[檢查 Front Matter draft: false] B --\u0026gt; C[Git Commit \u0026amp; Push 到 GitHub] C --\u0026gt; D[GitHub Actions 自動編譯與發布] 在 Obsidian 中無壓力撰寫草稿、加入圖片與背景音樂音訊。 將 draft: true 改為 draft: false。 送出 git push 指令，Hugo 與 GitHub Actions 將在 1 分鐘內自動完成全網站更新！ ","date":"2026年08月03日","externalUrl":null,"permalink":"/posts/obsidian-hugo-workflow/","section":"Posts","summary":"詳細介紹如何結合 Obsidian 雙鏈筆記與 Hugo 靜態網站生成器，實現無縫 Markdown 文章發布，以及圖片、背景音樂等靜態資源的路徑管理技巧。","title":"Obsidian 搭配 Hugo：個人知識庫與部落格寫作發布實戰指南","type":"posts"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/posts/","section":"Posts","summary":"","title":"Posts","type":"posts"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/categories/%E5%B7%A5%E4%BD%9C%E6%B5%81/","section":"Categories","summary":"","title":"工作流","type":"categories"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/categories/%E6%8A%80%E8%A1%93/","section":"Categories","summary":"","title":"技術","type":"categories"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/%E6%95%99%E5%AD%B8/","section":"Tags","summary":"","title":"教學","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/","section":"靜夜思維 | Blowfish Blog","summary":"","title":"靜夜思維 | Blowfish Blog","type":"page"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/%E9%9D%9C%E6%85%8B%E8%B3%87%E6%BA%90/","section":"Tags","summary":"","title":"靜態資源","type":"tags"},{"content":"本篇文章旨在示範常選用的 Markdown 排版元素與效果。\n1. 標題與段落 # Markdown 支援從 H1 到 H6 的標題格式。在 Hugo 文章中，建議由 H2 (##) 開始使用。\n2. 程式碼高亮 (Code Highlighting) # Hugo 內建 Chroma 程式碼高亮引擎，支援各種語法高亮與複製按鈕：\ndef greet(name: str) -\u0026gt; str: \u0026#34;\u0026#34;\u0026#34;向訪客打招呼\u0026#34;\u0026#34;\u0026#34; return f\u0026#34;Hello, {name}! 歡迎來到 Hugo 部落格。\u0026#34; if __name__ == \u0026#34;__main__\u0026#34;: print(greet(\u0026#34;讀者\u0026#34;)) 3. 引用與清單 (Blockquotes \u0026amp; Lists) # 「知識不在於保存，而在於分享與應用。」\n待辦事項清單 # 安裝 Hugo Extended 配置 PaperMod 主題 撰寫第一篇測試文章 部署至 GitHub Pages 4. 表格排版 (Tables) # 功能 Hugo WordPress Hexo 生成速度 ⚡️ 極快 (Go) 🐢 一般 (PHP) 🚀 中等 (Node.js) 動態數據庫 ❌ 不需要 ✅ 需要 (MySQL) ❌ 不需要 學習曲線 🟢 低~中 🟢 低 🟢 低 祝您寫作愉快！\n","date":"2026年08月03日","externalUrl":null,"permalink":"/posts/hugo-markdown-guide/","section":"Posts","summary":"示範 Markdown 語法排版，包含程式碼高亮、引用、表格與清單效果。","title":"Hugo 與 Markdown 寫作排版指南","type":"posts"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/blog/","section":"Tags","summary":"","title":"Blog","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/jamstack/","section":"Tags","summary":"","title":"Jamstack","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/tags/papermod/","section":"Tags","summary":"","title":"PaperMod","type":"tags"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/categories/%E7%B6%B2%E7%AB%99%E6%9E%B6%E8%A8%AD/","section":"Categories","summary":"","title":"網站架設","type":"categories"},{"content":"","date":"2026年08月03日","externalUrl":null,"permalink":"/categories/%E9%9A%A8%E7%AD%86/","section":"Categories","summary":"","title":"隨筆","type":"categories"},{"content":" 🎉 網站正式上線！ # 這是我的第一篇部落格文章。經過一番規劃與設置，這個基於 Hugo 與 PaperMod 主題 的個人網站正式開張了！\n💡 為什麼選擇 Hugo？ # 在評估多個部落格建置方案（包括 WordPress、Ghost、Medium、Hexo 等）之後，我最終選擇了 Hugo，主要原因有以下幾點：\n極致的速度：Hugo 使用 Go 語言編寫，編譯速度極快（毫秒級別），能瞬時生成數百篇文章的靜態頁面。 無需數據庫：純靜態 HTML/CSS/JS，安全性高、維護成本極低。 Markdown 原生支援：內容與程式碼分離，文字資料隨時可以方便備份與版本控制。 現代化主題生態：PaperMod 主題簡潔美觀，原生支援深色模式切換與全文搜尋。 # 本地啟動預覽命令 hugo server -D 🚀 未來規劃 # 未來我會在部落格中分享：\n👨‍💻 軟體開發經驗與踩坑紀錄 📖 讀書心得與思維導圖 🛠 實用工具推薦與自動化工作流 感謝你的造訪，歡迎持續關注！\n","date":"2026年08月03日","externalUrl":null,"permalink":"/posts/welcome-to-hugo/","section":"Posts","summary":"第一篇部落格文章：介紹為什麼選擇 Hugo 靜態網站生成器以及網站建置的過程。","title":"歡迎來到我的 Hugo 個人部落格！","type":"posts"},{"content":" 👋 你好，歡迎來到我的部落格！ # 我是這個部落格的主人。這裡是我記錄軟體技術、讀書筆記與思考隨筆的私人空間。\n💻 關注領域 # 靜態網站生成 (Hugo, Jamstack) 軟體架構與程式開發 知識管理與個人成長 📫 聯絡方式 # GitHub: My GitHub Profile Email: contact@example.com ","date":"2026年08月03日","externalUrl":null,"permalink":"/about/","section":"靜夜思維 | Blowfish Blog","summary":"關於本站創辦人與部落格成立宗旨","title":"關於我 (About Me)","type":"page"},{"content":"","externalUrl":null,"permalink":"/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"","externalUrl":null,"permalink":"/search/","section":"靜夜思維 | Blowfish Blog","summary":"搜尋網站內的所有文章","title":"站內搜尋","type":"page"}]