開發工具 開源專案 · 第 3 / 18 篇

Cloud-Assets-Template:免費、快速、全自動的個人圖床解決方案

圖床管理總是亂糟糟?Cloud-Assets 範本專案幫你建立標準化的 CDN 流程!結合 GitHub Actions 自動化 WebP 轉換與 jsDelivr CDN 加速,讓你的部落格圖片管理變得既優雅又快速。

快速導覽 查看本文目錄

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 或是在下方留言告訴我!

下次見!🚀

系列:

讀完了!你覺得這篇如何?

你的回饋會決定下一篇要寫什麼。

還有疑問

Learning path

開源專案

這篇是系列中的第 3 / 18 篇。可以順著列表補完整脈絡,也可以直接跳到需要的段落。

  1. 01 [開源專案] 寫書不再被 Word 搞瘋!我開發了 BookPublisher MD2Docx —— 專為技術書作者打造的 Markdown 轉檔神器
  2. 02 既然要自幹,就要幹到極致!Word 排版救星 V1.0.0 重大更新 🔥
  3. 03 Cloud-Assets-Template:免費、快速、全自動的個人圖床解決方案 目前閱讀
  4. 04 PPT-Web 開源簡報工具:手機掃 QR Code 變簡報筆,看備忘稿、切黑幕,還保留 PPT 動畫
  5. 05 Side Project 不一定要做大:從 MD2DOC 約 460 位使用者與 49 顆 Star 看小產品的真實流量
  6. 06 SKILLS All-in-one 正式上線!我的 AI Agent 技能軍火庫功能大公開
  7. 07 【重磅發布】MD2PPT-Evolution:不只是轉檔,還是自帶「手機遙控器」的簡報神器!(完全開源/資料不落地)
  8. 08 【開發實戰】從 Vibe Coding 進化到 CDD!我如何用 Gemini CLI Conductor 打造 MD2PPT-Evolution 簡報神器
  9. 09 時隔四個月,我用 Codex 讓 MD2DOC-Evolution 變成更穩定的寫作工作台
  10. 10 MD2DOC-Evolution v2.0:把 Markdown 變成可交給出版社修訂的 Word 書稿
  11. 11 Codex PPT Skill 實測筆記:把文章與課程內容變成圖片式簡報的 AI Agent 工作流
  12. 12 Workflow Skill Router:面對 Agent sprawl,先管住 SKILL 選擇
  13. 13 Workflow Skill Router V2 正式版:把 SKILL 路由變成可驗證的 Codex 控制層
  14. 14 Workflow Skill Router v2.1.0 正式支援 Claude Code:同一份 Skill Tree,Claude Code 和 Codex 都能用
  15. 15 從模糊需求到 Code Review:拆解 Matt Pocock Skills 的工程 Workflow
  16. 16 Google EGM 是什麼?大象寫規格、金魚來找碴,讓 AI 先想清楚再寫 code
  17. 17 叫 AI「精簡一點」為什麼不夠?我用格萊斯四準則寫了 reply-with-gricean-maxims SKILL
  18. 18 我把 iThome 鐵人賽發文流程做成開源範本了

Further reading

我把 iThome 鐵人賽發文流程做成開源範本了 封面圖 2026-09-02 我把 iThome 鐵人賽發文流程做成開源範本了 Day 15: 【後端 #3】API 測試:用 Gemini CLI 輔助撰寫 Pytest 封面圖 2025-09-03 Day 15: 【後端 #3】API 測試:用 Gemini CLI 輔助撰寫 Pytest Workflow Skill Router v2.1.0 正式支援 Claude Code:同一份 Skill Tree,Claude Code 和 Codex 都能用 封面圖 2026-11-01 Workflow Skill Router v2.1.0 正式支援 Claude Code:同一份 Skill Tree,Claude Code 和 Codex 都能用

留言討論

用 GitHub 帳號留言,留言會同步到這個 Blog 的 GitHub Discussions。

閱讀導覽

約 4 分鐘

本文目錄

本篇所在系列 · 第 3 / 18 篇

開源專案

  1. [開源專案] 寫書不再被 Word 搞瘋!我開發了 BookPublisher MD2Docx —— 專為技術書作者打造的 Markdown 轉檔神器
  2. 既然要自幹,就要幹到極致!Word 排版救星 V1.0.0 重大更新 🔥
  3. Cloud-Assets-Template:免費、快速、全自動的個人圖床解決方案
  4. PPT-Web 開源簡報工具:手機掃 QR Code 變簡報筆,看備忘稿、切黑幕,還保留 PPT 動畫
  5. Side Project 不一定要做大:從 MD2DOC 約 460 位使用者與 49 顆 Star 看小產品的真實流量
  6. SKILLS All-in-one 正式上線!我的 AI Agent 技能軍火庫功能大公開
  7. 【重磅發布】MD2PPT-Evolution:不只是轉檔,還是自帶「手機遙控器」的簡報神器!(完全開源/資料不落地)
  8. 【開發實戰】從 Vibe Coding 進化到 CDD!我如何用 Gemini CLI Conductor 打造 MD2PPT-Evolution 簡報神器
  9. 時隔四個月,我用 Codex 讓 MD2DOC-Evolution 變成更穩定的寫作工作台
  10. MD2DOC-Evolution v2.0:把 Markdown 變成可交給出版社修訂的 Word 書稿
  11. Codex PPT Skill 實測筆記:把文章與課程內容變成圖片式簡報的 AI Agent 工作流
  12. Workflow Skill Router:面對 Agent sprawl,先管住 SKILL 選擇
  13. Workflow Skill Router V2 正式版:把 SKILL 路由變成可驗證的 Codex 控制層
  14. Workflow Skill Router v2.1.0 正式支援 Claude Code:同一份 Skill Tree,Claude Code 和 Codex 都能用
  15. 從模糊需求到 Code Review:拆解 Matt Pocock Skills 的工程 Workflow
  16. Google EGM 是什麼?大象寫規格、金魚來找碴,讓 AI 先想清楚再寫 code
  17. 叫 AI「精簡一點」為什麼不夠?我用格萊斯四準則寫了 reply-with-gricean-maxims SKILL
  18. 我把 iThome 鐵人賽發文流程做成開源範本了
看完整系列 18 篇