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 語法：
（路徑開頭的/代表網站根目錄）。
3. 優缺點分析
- 優點：
- 離線寫作：不需要網路就能預覽圖片，圖片與文章內容生命週期一致。
- 版本控制：圖片的異動也會紀錄在 Git 歷史中。
- 缺點：
- 儲存庫肥大：隨著圖片增加，GitHub Repository 的體積會迅速增長，長期下來會影響效能。
現：使用 Cloudflare R2
為了避免 GitHub 儲存庫容量被圖片佔用太多，決定使用 Cloudflare R2，並且提供了 10GB 免費儲存空間，以目前來說非常足夠。
⚠️ 注意：雖然說有免費額度，但還是需要先填寫付款資訊才能啟用。
1. 啟用 Cloudflare R2 儲存桶
- 登入 Cloudflare 儀表板，點擊左側選單的 Storage & Database > R2 Storage。
- 點擊 Create bucket。
- 命名你的儲存桶（例如
my-blog-assets），並點擊 Create bucket 完成建立。
2. 設定公開存取（讓圖片能被看見）
預設情況下，R2 的內容是私有的，我們需要將它與你的網域串接才能在網路上顯示圖片。
- 進入剛建立好的 Bucket，點擊上方標籤的 Settings。
- 找到 Custom Domains 區塊。
- 推薦做法：使用自定義網域
- 點擊 Connect Domain。
- 輸入一個子網域（例如
xxx.yourdomain.com）。 - Cloudflare 會自動幫你處理 DNS 紀錄，之後你的圖片網址就會變成
https://xxx.yourdomain.com/photo.jpg。
3. 上傳圖片與並在 Hugo 文章中引用
-
在 Bucket 頁面點擊 Upload，直接將圖片拖進去。
-
上傳後點擊該圖片，會看到 URL，在撰寫 markdown 文章是，直接引用即可。
