Hi~ 我是 Eric。 🚀

有一說一，身為一個寫部落格的人，最「阿雜」的事情之一除了寫文章本身，還有就是圖片託管。

以前我總是在找各式各樣的圖床，有的要收費、有的速度慢到哭、有的還要擔心哪天網站倒了圖片全滅。雖然也有人用 GitHub 當圖床，但手動上傳、自己改連結、圖片太大讀取超慢… 這些瑣事常常打斷節奏了。

當然如果今天部落格不是向我自架，而是使用部落格論壇諸如方格子、痞客邦或是點部落等等，不會有這問題，不過像我一樣，選擇自架部落格的人應該也不少，畢竟完整將部落格掌控在自己手裡的感覺真的不錯！而圖床絕對是要慎重考慮的因素，如果把圖片也放在部落格專案中，就怕經年累月累積，資料夾會越來越大，管理起來也麻煩，如果有多個專案想要用同一張圖片，也會很難管理多個位置。

所以，我乾脆自己擼了一個模板 —— Cloud-Assets-Template 。這是一個讓你「一鍵擁有」自動化圖床的開源專案！大幅提昇你管理圖片的效率，讓你專心寫作，不再為圖床煩惱。

🚀 為什麼你該試試 Cloud-Assets-Template？

這不只是一個單純的儲存庫，我把所有的自動化流程都塞進去了：

  1. 完全免費：基於 GitHub Repository，不花你半毛錢。
  2. 自動優化：你只要負責把 JPG/PNG 丟上去，GitHub Actions 會自動幫你轉成 WebP 格式，檔案變小畫質還不賴，讀取速度直接起飛。
  3. CDN 加速：整合了 jsDelivr CDN，全球存取都飛快，這才像話好ㄇ。
  4. 自動圖庫索引：它會自動生成一個漂亮的 index.html 網頁，讓你用樹狀結構瀏覽所有圖片，還能一鍵複製 Markdown 語法。

🛠️ 三分鐘快速上手

這是我開發時最在意的一點：一定要夠簡單。

第一步：建立你的圖床

直接到我的 GitHub 專案頁面 Cloud-Assets-Template ，點擊那個 fork 按鈕，把整個專案複製到你的帳號底下。這樣你就有一個專屬的圖床 Repo 了！也可以用其他方式複製專案，但我建議用 fork，這樣以後如果我有更新，你也可以輕鬆同步。

第二步：開啟自動化魔法 (GitHub Actions)

進入您新建立的 Repo，點選上方的 Actions 頁籤，如果看到警告，請點擊 “I understand my workflows, go ahead and enable them”。

第三步：設定 GitHub Pages

在 Repo 的 Settings > Pages 裡，將 Source 設定為 Deploy from a branch，選擇 main 分支和 / (root) 資料夾，然後 Save 即可。

第四步：上傳圖片，然後… 沒有然後了！

你可以直接用 GitHub 網頁上傳，或是用 Git Push。圖片丟進 Share/ 或 Blog/ 資料夾（或是你自己創一個自己要的資料夾結構），GitHub Actions 就會默默地幫你優化圖片、生成索引。

上傳後大約等個 1 分鐘，你的圖庫網頁就會更新完成，進去就能看到新圖片的連結啦！

最後一步：使用圖片連結

在GitHub Pages 設定頁面，你會看到一個類似 https://<你的帳號>.github.io/Cloud-Assets-Template/ 的網址，這就是你的圖庫首頁。 開啟後頁面會自動列出你上傳的圖片，並且支援資料夾瀏覽。 如下圖所示： Cloud-Assets-Template.webp 在圖庫網頁中，點擊你想要的圖片旁邊的「Copy Markdown」按鈕，就能複製到剪貼簿，直接貼到你的部落格文章裡面使用，非常方便！

💡 技術細節 (給想多了解一點的你)

這個專案的核心其實很單純，但組合起來威力驚人：

  • Python (Pillow)：負責圖片轉換與縮圖生成。
  • GitHub Actions：負責觸發自動化腳本，處理完後自動 Commit 回 Repo。
  • jsDelivr：提供穩定的 CDN 存取路徑。
  • GitHub Pages：提供免費的靜態網站託管，讓你可以輕鬆瀏覽圖片。

生成的圖片連結格式會長這樣，非常優雅： https://cdn.jsdelivr.net/gh/<你的帳號>/<Repo名稱>@main/<圖片路徑>.webp

沒了，整個流程就是這麼簡單，沒有什麼複雜的設定，完全開箱即用！你只要專注在寫作和創作上，圖片的部分就交給這個模板來搞定吧！

⚠️ 那些你可能會遇到的問題 (Gotchas)

雖然我很努力把它弄到「開箱即用」，但還是有些地方要注意：

1. 第一次部署的延遲： GitHub Pages 第一次生效可能需要幾分鐘。如果點進圖庫網頁看到 404，先去喝杯咖啡再回來看看。

2. 圖片路徑大小寫： Linux 系統（GitHub Actions 跑的環境）對大小寫是很敏感的。雖然我程式碼有處理一些，但建議資料夾跟檔案命名還是養成好習慣，盡量用小寫加連字號，而且最好都使用英文與數字，避免使用中文導致問題。

3. 右上角的 GitHub Repo 連結： 這個連結是指向原始碼的，預設會是我的 Repo，如果你 fork 了專案，記得把 index.html 裡的連結改成你自己的 Repo，這樣使用者點進去才不會看到我的頁面。

結語

如果你也受夠了那些又貴又難用的圖床，真的可以試試看這個 Cloud-Assets-Template。對我來說，它不只是個專案，更是我部落格寫作流程中最重要的那一塊拼圖。

大家有什麼想法或是想增加的功能嗎？歡迎到 GitHub 提 Issue 或是在下方留言告訴我！

下次見！🚀