從零開始搭建你的免費圖床系統（Cloudflare R2 + WebP Cloud + PicGo）

前言#

在「2024 年了，我的博客有了什麼變化」一文中，我介紹了自己使用 Serverless 平台和一些開源項目搭建的博客系統，也開啟了這個系列教程來記錄搭建和部署過程。

本篇是關於圖床系統的解決方案。

圖床方案迭代#

其實在博客搭建之初因為內容並不多，也比較少有插圖，所以大部分的圖片都是直接放在我的 Hugo 博客倉庫的 static 目錄下，也沒覺得有什麼不便，直到有一段時間需要多平台發布，複製了博客的 markdown 源文件後，因為所有圖片都是博客的相對路徑，導致圖片全部無法顯示，需要把圖片一張張重新上傳，十分繁瑣。

那時才開始了解到圖床（Image hosting）這個概念，把圖片上傳到一個專用的存儲服務並通過公開鏈接使用，不但可以統一進行管理，還能有效減少博客倉庫文件的體積，提高網站的加載速度。

GitHub + jsDelivr CDN + PicGo#

一開始我是新建了一個 GitHub 倉庫「GitHub - image-hosting」，通過 PicGo 直接上傳到倉庫，並在 PicGo 返回時的圖片路徑改為 jsDelivr CDN 加速後的鏈接，其實倒也還算方便，還多了一份版本管理。

不過好景不長， jsDelivr 遭到了 DNS 污染，被大陸封鎖，以至於我的博客圖片在很長一段時間完全無法加載，也讓我對這種純依賴 CDN 的方式有了一些顧慮，再加上 GitHub 托管圖片是基於代碼倉庫，上傳圖片依賴的是代碼提交，容易污染 commit 記錄，且終究算是一種濫用，萬一帳號 / 倉庫訪問有問題也容易丟失所有圖片，於是開始尋找其他方案。

阿里雲 OSS + PicGo#

第二個想到的就是雲服務商提供的對象存儲了，像是 Amazon S3、阿里雲 OSS 等都是雲廠商提供的對象存儲服務，在提供可訪問的公開鏈接的基礎上還多了權限控制、數據備份、擴展性等優勢，在相對低成本的前提下提供了針對文件數據存儲和管理的較優解決方案。

由於是想針對中國大陸用戶進行訪問優化，最終我選擇了阿里雲 OSS，配置不算複雜，同樣是通過 PicGo 進行上傳並轉換為阿里雲 OSS 的鏈接，在訪問速度上有了明顯的提升。

aliyunoss_invoice

不過由於多是按量計費，持續增長的成本對於非盈利的個人博客來說也是需要考慮的。23 年初有一陣子博客流量較大，月賬單持續上漲，再加上阿里雲 OSS 如果需要自定義訪問域名則需要進行備案，我域名本身通過 Cloudflare 進行托管，並不考慮備案，所以在用了幾個月後，還是考慮更換圖床方案。

Chevereto + PicGo#

經過了一番調研，在我線路不錯的搬瓦工伺服器（CN2GIA DC6 機房）上使用 Docker 鏡像部署了 Chevereto 的免費自部署版本，並將圖片以 Docker Volume 的形式掛載在主機上。

Chevereto 的界面實話說風格有些老舊，還是古早的 php 服務，免費版也很久就不再維護升級，但勝在功能完備，同樣可以使用 PicGo 對接 Chevereto 的 API 進行圖片上傳等操作，穩定性也不錯，於是就這樣用了一年半。

但自己對於自部署服務的穩定性和數據的珍貴性還是有些大意，前幾天伺服器突然掛了，內核報錯直接無法重啟，服務掛了倒還好說，但是我這一年半多的圖片數據也無法導出，工單聯繫技術支持，一天只回覆了我兩次，一次讓我重啟，一次建議我聘請一個網絡管理員排查。

只能自力更生，翻遍了網上各種方案，折騰了一天終於算是解決了，但這一次的教訓讓我對有重要數據的服務備份和自部署穩定程度都有了全新的認識，再加上想要重新部署的時候發現免費版鏡像等已經下線，只剩一個按年付費的 License 版本，於是放棄了原方案。

Cloudflare R2 + WebP Cloud + PicGo#

cloudflare_r2_free_tier

於是重新轉向了雲服務廠商的對象存儲，發現了賽博菩薩 Cloudflare 提供的 R2 對象存儲這一服務，免費計劃中有每月 10 GB 的存儲容量，對於個人使用來說完全夠用，大廠的服務與數據安全也有保障。

為了優化用戶的訪問，又使用了一個「WebP Cloud」服務對 R2 的圖片進行代理，在代理層面進一步減小圖片體積，雖然對於國內用戶來說速度肯定還是比不上阿里雲 OSS 這種線路，但是在不用備案、穩定且免費的綜合條件下，這是我能想到的最好的方案了。

在電腦端同樣是通過 PicGo 客戶端幾乎一鍵上傳並生成博客直接可用的 markdown 圖片鏈接，配置完成後使用起來很順滑。

圖床搭建說明#

Cloudflare R2 + WebP + PicGo 的方案儘管牽扯到了多個組件和平台，但所有操作都在 Free Plan 中，也是我最終選定的方案，下面將從零開始介紹如何搭建這個免費圖床系統。

Cloudflare R2#

R2 是 Cloudflare 推出的免費對象存儲服務，需要免費註冊一個 Cloudflare 帳號才能使用，註冊登錄後，點擊左側邊欄的 R2 訪問服務，但需要注意的是開通 R2 服務需要綁定信用卡（國內外主流信用卡皆可），但並不會扣費，主要是為了驗證用戶身份使用。

創建圖床 Bucket#

cloudflare_r2_interview

開通 R2 服務後，點擊右上角「創建存儲桶」按鈕進行創建。

cloudflare_r2_create_bucket

進入創建配置界面後，需要填寫存儲桶（Bucket）名稱，建議有一些辨識度，後續在配置上傳時會用到。

位置則選擇「自動」，但可以額外多配置一個位置提示，由於我後續還將使用「WebP Cloud」服務的美西機房進行圖片代理優化，所以在此處選擇的是「北美洲西部（WNAM）」，根據需求選其他區域也可以，但 Cloudflare 並不保證一定會分配到所指定的區域。

cloudflare_r2_create_done

點擊「創建存儲桶」按鈕即完成創建，此時我們已經可以向我們的「yu-r2-test」存儲桶上傳文件了，可以選擇在網頁直接上傳文件或文件夾。

也可以使用 S3 API 進行上傳，我們後續使用 PicGo 客戶端進行上傳就依賴這種方式，但需要進行一些額外配置，點擊導航欄「設置」選項進行配置。

cloudflare_r2_config

首先我們需要打開「R2.dev 子域」，這是為了後續訪問圖片時需要的公網地址，點擊「允許訪問」，並按照提示輸入「allow」即可開啟。

r2_dev_domain_allow

完成後會顯示一個以 r2.dev 結尾的公網網址，即我們後續訪問圖片的網址。

自定義圖床域名（可選）#

但是分配的網址比較長，不易於記憶，我們可以通過「自定義域」來綁定我們的專屬域名，點擊「連接域」按鈕。

r2_custom_domain_setup

輸入自己想綁定的域名，如 yu-r2-test.pseudoyu.com，點擊繼續。

cloudflare_r2_custom_domain

r2_custom_domain_dns_wait

連接域，並等待 DNS 解析生效即可。

r2_bucket_status

完成後 bucket 狀態處「公共 URL 訪問」顯示 “已允許”，且「域」顯示為我們剛自定義的域名即配置成功。

配置 Bucket 訪問 API#

yu_bucket_preview

當我們完成上述配置後，可以回到存儲桶「對象」界面，上傳一張示例圖片，點開詳情則會顯示該圖片的訪問地址，此時我們就擁有了一個可訪問的圖床服務了。

但每次都要打開 Cloudflare 頁面手動上傳圖片的方式顯然不夠便捷。R2 提供了 S3 兼容的 API，可以方便地使用一些客戶端 / 命令行工具進行上傳、刪除等操作。

create_r2_api_token

create_r2_api_key

回到 R2 主頁面，點擊右上角「管理 R2 API 令牌」，進入後點擊「創建 API 令牌」。

r2_apikey_conifg

輸入令牌名稱，「權限」選擇 “對象讀和寫” 並將此 API 指定之前所創建的 Bucket，這樣最小化權限也保障數據安全，其餘選項保持默認即可。

api_key_config_details

完成創建後會顯示所有密鑰，我們使用 PicGo 需要的是下面三個信息，不過因為只會顯示一次，建議在密碼管理軟件或其他地方妥善保管好這些參數信息。

至此，我們需要在 Cloudflare R2 上配置的部分就完成了，接下來我們需要配置 PicGo 客戶端。

PicGo#

PicGo 是一個用於快速上傳並獲取圖片 URL 的工具軟件，有著較為豐富的插件生態，支持多種圖床服務，其 GitHub 倉庫為「GitHub - Molunerfinn/PicGo」，可以下載對應平台客戶端使用。

配置 R2 圖床#

PicGo 本體並不包括 S3 圖床，但可以通過「GitHub - wayjam/picgo-plugin-s3」插件來支持。

picgo_s3_plugin

在「插件設置」中選擇安裝，「圖床設置」中就新增了 Amazon S3 選項。點擊進入配置選項。

r2_picgo_s3_config

這裡有幾項配置需要尤其注意。

應用密鑰 ID，填寫 R2 API 中的 Access Key ID（訪問密鑰 ID）
應用密鑰，填寫 R2 API 中的 Secret Access Key（機密訪問密鑰）
桶名，填寫 R2 中創建的 Bucket 名稱，如我上文的 yu-r2-test
文件路徑，上傳到 R2 中的文件路徑，我選擇使用 {fileName}.{extName} 來保留原文件的文件名和擴展名。
自定義節點，填寫 R2 API 中的「為 S3 客戶端使用管轄權地特定的終結點」，即 xxx.r2.cloudflarestorage.com 格式的 S3 Endpoint
自定義域名，填寫上文生成的 xxx.r2.dev 格式的域名或自定義域名，如我配置的 yu-r2-test.pseudoyu.com

其他配置保持默認即可，確認參數無誤後點擊「確定」與「設置為默認圖床」即可。

圖片上傳#

upload_r2_with_picgo

完成上述配置後，我們就可以在「上傳區」直接拖入文件進行圖片上傳了，如上傳後顯示無誤則為配置成功，生成的鏈接會自動在系統剪貼板中，直接在需要的地方粘貼即可。

picgo_custom_url_format

並且可以在鏈接格式處選擇對應格式，如 URL 或是博客可用的 Markdown 格式鏈接等。這裡我還做了一個小的配置，在左側「PicGo 設置」 - 「自定義鏈接格式」中修改為 ![$fileName]($url)，並在上傳區的鏈接格式處選擇了「Custom」，這樣我上傳後就會根據文件名生成以文件名為 Alt 文本的 Markdown 圖片鏈接。

WebP Cloud 圖片優化#

至此我們已經完成了整個圖床的搭建、配置和上傳，但通常我們本地截圖或是相機拍攝的圖片體積較大，對於訪客來說加載時間會較長，並不直接適合互聯網發布。

tiny_png_compress

我在很長的一段時間都用了非常笨的方法，即「TinyPNG」這一在線網站的 api 配合一個開源的 macOS 客戶端應用，將圖片拖入其中進行壓縮後再通過 PicGo 上傳到圖床，通常能夠在圖片質量損失較小的前提下減少圖片 50% 以上的體積，繁瑣卻有效。

這次更換圖床方案後也開始尋找更智能的圖片優化服務，想到了「WebP Cloud」。

其實了解到這一服務是去年的一個晚上和 STRRL 正在杭州一個商城的电玩城裡看人打音遊，他給我看了 Nova Kwok 的一篇博客上了 hacker news 榜首的消息，一起圍觀了半天，不過當時大概只知道是優化圖片的服務，並沒有詳細了解。

於是又去打開了官網「webp.se」看了一下更為詳細的介紹。

webp_se_intro

簡單來說這是一個類 CDN 的圖片代理 SaaS 服務，可以在幾乎不改變畫質的情況下大幅縮小圖片體積，加快整體站點加載速度。發展到現在除了圖片體積減少外，還提供了緩存、添加水印、圖片濾鏡等更多實用的功能，並提供了自定義 Header 等配置選項。

看了一圈，覺得能很好滿足我的博客圖片優化需求，開始折騰配置。

配置 WebP Cloud#

webp_cloud_login

首先通過 GitHub 授權登錄 WebP Cloud 平台。

webp_cloud_overview

頁面非常直觀，主要顯示了當前 Plan 下的 Free Quota 和額外 Quota 的數據，以及一些用量統計。

點擊「Create Proxy」按鈕可以添加配置。

webp_cloud_config

為了優化國內訪問，我「Proxy Region」選擇的是美西「Hillsboro, OR」區域
「Proxy Name」填寫一個自定義名稱即可
「Proxy Origin URL」，比較重要，需要填寫上文我們配置好的 R2 自定義域名，如我填寫的是 yu-r2-test.pseudoyu.com，如果沒配置自定義域名則填寫 R2 提供的 xxx.r2.dev 格式的域名

yu_webp_test

圖中 Basic info 部分「Visitor」下顯示的以 xxx.webp.li 格式即為我們的代理地址。

例如我們之前通過 PicGo 上傳到 R2 的文件 yu-r2-test.pseudoyu.com/new_mbp_setup.jpg 則可以用 dc84642.webp.li/new_mbp_setup.jpg 這一鏈接進行訪問。

如果不喜歡默認的代理地址，則可以右下角 Chat 或是郵箱聯繫開發者進行自定義域名修改，之後或許也會有更自動化的配置流程。

下面可以通過滑動條來調整圖片壓縮比率，默認為 80%，5M 的 jpg 圖片壓縮後的 webp 大小通常小於 1M，基本滿足了網絡傳播需求，其他配置保持默認即可，如有需要可以根據文檔進行配置。

更改 PicGo 配置#

change_pic_go_config

需要注意的是，由於我們最終需要放在博客中的圖片是經過 WebP Cloud 代理過的鏈接，所以需要回到 PicGo 的「圖床設置」中，將「自定義域名」改為我們剛配置的 WebP Cloud 代理地址，即格式為 xxx.webp.li 的代理鏈接或其他自定義域名。

WebP Cloud 用量#

免費用戶每天有 2000 Free Quota，即能夠代理 2000 次圖片訪問請求，並提供 100M 的圖片緩存，對於一般用戶來說完全夠用，如有一些流量較大的特定時期也可以購買額外 Quota，價格很便宜。

如超過了 Quota，訪問則會被 301 轉發到源站圖片地址，不經 WebP Cloud 服務壓縮，但依然可用；超過 100M 的緩存則會按照 LRU 算法清理，所以依然能夠保障一些高頻請求的圖片能夠有較好的訪問體驗。

yu_webp_uasge

我博客的日訪問量大概在 300-500 visits 左右，再加上一些 RSS 訂閱和爬蟲的流量，根據 WebP Cloud 統計測算來看，平日的請求大概在 4000-5000 次，發博文當天會有 10000+。

webp_cloud_price

所以目前先選擇了 Lite 計劃，配合一些額外用量來 Cover 高峰流量，打算再觀察一陣子看看。

總結#

以上就是我的圖床系統搭建方案，本文的所有圖片也都使用 PicGo 上傳、Cloudflare R2 存儲並經 WebP Cloud 代理優化。

這是我的博客搭建部署系列教程之一，如對評論系統、數據統計系統等搭建感興趣，請持續關注，希望能對大家有所參考。