Hugo on Wayne X.Y. Blog

在 Hugo 部落格中加入互動式旅行地圖 (Leaflet + JSON)

Tue, 10 Mar 2026 00:00:00 +0000

在 Hugo 部落格中加入互動式旅行地圖 (Leaflet + JSON)

最近想在部落格的 Travel 頁面頂部加上一個可以標記去過哪些地方的互動式地圖，幾經思考後決定使用開源且輕量的 Leaflet.js，搭配自訂的 JSON 檔案來管理景點和顏色。

🗺️ 實作目標

在 /life/travel 的頂部固定一個地圖，顯示去過的國家與地點。
透過 JSON 檔案集中管理景點資料 (包含中英文名稱、經緯度、以及專屬顏色)。
使用 Leaflet.js 渲染地圖，並根據 JSON 自動計算邊界縮放 (fitBounds) 以容納所有標記。
將地圖封裝成 Hugo Shortcode 方便在不同語系頁面重複使用。

💾 建立資料檔 (Data Layer)

首先，在 Hugo 專案的 data/ 目錄下建立一個 travel.json，之後如果有新增旅程，只要修改這裡就可以，不用動到程式碼：

Hugo 圖片管理比較：GitHub vs Cloudflare R2

Tue, 03 Feb 2026 00:00:00 +0000

Hugo 圖片管理比較：GitHub vs Cloudflare R2

在架設 Hugo 部落格後，也註冊了自己的網域，便開始開心的透過 git push 更新網站。但稍微看了 repository 存放的內容，想想卻覺得圖片一起 push 好像怪怪的XD。之後如果持續更新維護，圖片勢必會增加，到時候會佔用太多空間。而且假如換個開發環境，在 pull 下來時，就要重新下載一堆圖片在 local。

決定稍微研究一下，並比較原本 GitHub page 的做法，以及目前透過 Cloudflare R2 的做法。

原：存放在 static/ 資料夾（與網站同步部署）

這是 Hugo 的傳統標準作法，圖片會隨著你的程式碼一起推送到 GitHub。

1. 運作原理

Hugo 會將 static/ 資料夾內的所有內容，在編譯時原封不動地搬移到網站根目錄。

2. 實作方式

檔案路徑：將圖片放在 /static/images/test.jpg。
Markdown 語法： ![圖片描述](/images/test.jpg) （路徑開頭的 / 代表網站根目錄）。

3. 優缺點分析

優點：
- 離線寫作：不需要網路就能預覽圖片，圖片與文章內容生命週期一致。
- 版本控制：圖片的異動也會紀錄在 Git 歷史中。
缺點：
- 儲存庫肥大：隨著圖片增加，GitHub Repository 的體積會迅速增長，長期下來會影響效能。

現：使用 Cloudflare R2

為了避免 GitHub 儲存庫容量被圖片佔用太多，決定使用 Cloudflare R2，並且提供了 10GB 免費儲存空間，以目前來說非常足夠。

⚠️ 注意：雖然說有免費額度，但還是需要先填寫付款資訊才能啟用。

使用 Hugo + Cloudflare Pages 打造個人自動化部落格

Sun, 01 Feb 2026 00:00:00 +0000

使用 Hugo + Cloudflare Pages 打造個人自動化部落格

想要建立一個速度極快、且每次寫完文章只要 git push 就能自動更新的網站嗎？這篇文章將帶你利用 Hugo 靜態網站產生器，搭配 Cloudflare Pages 的自動化部署服務，建構個人部落格。

🛠 為什麼選擇這個組合？

原本使用 github page 進行架設，但由於 repo 必須公開，因此決定改用 cloudflare pages 連接 github repo，設定上也比想像中簡單，並且在每次git push 後會自動執行 gtihub actions 以及更新網站，確保網頁運作正常。

第一步：在本地端架設 Hugo 站點

首先，我們要在你的電腦上建立網站的雛型，並挑選一個主題。

1. 安裝 Hugo

請根據你的作業系統執行安裝指令：

macOS (Homebrew): brew install hugo
Windows (PowerShell): winget install Hugo.Hugo.Extended
驗證安裝: 開啟終端機輸入 hugo version，確認看到版本號。

2. 建立新專案

開啟終端機，輸入以下指令建立網站資料夾：

hugo new site my-blog
cd my-blog

3. 加入網站主題 (Theme)

前往 Hugo Themes 挑選主題。這裡以本站使用的 Clean White 為例：