/tags/cloudflare-r2/ Recent content in Cloudflare R2 on Wayne X.Y. Blog Hugo zh-TW Tue, 03 Feb 2026 00:00:00 +0000 /zh/2026/02/03/storing-asset/ Tue, 03 Feb 2026 00:00:00 +0000 /zh/2026/02/03/storing-asset/ <h1 id="hugo-圖片管理比較github-vs-cloudflare-r2">Hugo 圖片管理比較：GitHub vs Cloudflare R2</h1> <p><a href="/zh/2026/02/01/setup-hugo-blog/">在架設 Hugo 部落格後</a>，也註冊了自己的網域，便開始開心的透過 <code>git push</code> 更新網站。但稍微看了 repository 存放的內容，想想卻覺得圖片一起 push 好像怪怪的XD。之後如果持續更新維護，圖片勢必會增加，到時候會佔用太多空間。而且假如換個開發環境，在 pull 下來時，就要重新下載一堆圖片在 local。</p> <p>決定稍微研究一下，並比較原本 GitHub page 的做法，以及目前透過 Cloudflare R2 的做法。</p> <hr> <h2 id="原存放在-static-資料夾與網站同步部署">原：存放在 static/ 資料夾（與網站同步部署）</h2> <p>這是 Hugo 的傳統標準作法，圖片會隨著你的程式碼一起推送到 GitHub。</p> <h3 id="1-運作原理">1. 運作原理</h3> <p>Hugo 會將 <code>static/</code> 資料夾內的所有內容，在編譯時原封不動地搬移到網站根目錄。</p> <h3 id="2-實作方式">2. 實作方式</h3> <ul> <li><strong>檔案路徑</strong>：將圖片放在 <code>/static/images/test.jpg</code>。</li> <li><strong>Markdown 語法</strong>： <code></code> （路徑開頭的 <code>/</code> 代表網站根目錄）。</li> </ul> <h3 id="3-優缺點分析">3. 優缺點分析</h3> <ul> <li><strong>優點</strong>： <ul> <li><strong>離線寫作</strong>：不需要網路就能預覽圖片，圖片與文章內容生命週期一致。</li> <li><strong>版本控制</strong>：圖片的異動也會紀錄在 Git 歷史中。</li> </ul> </li> <li><strong>缺點</strong>： <ul> <li><strong>儲存庫肥大</strong>：隨著圖片增加，GitHub Repository 的體積會迅速增長，長期下來會影響效能。</li> </ul> </li> </ul> <hr> <h2 id="現使用-cloudflare-r2">現：使用 Cloudflare R2</h2> <p>為了避免 GitHub 儲存庫容量被圖片佔用太多，決定使用 Cloudflare R2，並且提供了 10GB 免費儲存空間，以目前來說非常足夠。</p> <p>⚠️ 注意：雖然說有免費額度，但還是需要先填寫付款資訊才能啟用。</p>