快轉到主要內容

架設Cloudflare R2免費圖床,給Hugo靜態網站託管圖片

資訊科技 Hugo網站架設 Cloudflare
✍ 切換正體/簡體字
目錄

這篇文章示範架設Cloudflare R2當作圖床,再將自己的子網域連接到Cloudflare R2的過程,最後說明如何上傳圖片到R2,並在Hugo文章中嵌入。

1. 背景
#

使用Cloudflare R2的好處
#

撰文時我的Hugo網站是放在Cloudflare Page,文字檔跟圖片放在一起,可以用Hugo page bundle的方式插入圖片到文章內。

文章發表方式:在Linux電腦寫好makdown → 推送git儲存庫到Github → 自動部署到Cloudflare Page。

但這裡有個問題,中間傳遞的git儲存庫大小會隨時間越來越肥,都是圖片在佔空間,導致部署時間延長。

所以我有了將部份圖片資源另外存放的想法,正好Cloudflare自家有推出類似Amazon S3的「Cloudflare R2」的物件式儲存服務,適合存放大量資料,也可以當圖床(image hosting)。

Cloudflare官方宣稱R2跟S3的API相容,使用者可以使用現有工具上傳檔案。

R2跟S3同樣是以使用量收費,但不收傳輸流量(bandwidth)的費用,這點還挺佛的。

參照 Cloudflare R2收費標準,雖然說每月價格5美元起跳,但Cloudflare R2有提供免費額度,實際使用量沒到收費的閾值,其實是等同免費使用的。詳細價格可以先按 R2費用計算機試算看看。

並且如果將網域DNS給Cloudflare管的話,就能方便給R2的圖片網址加上HTTPS。另外將網域DNS移交給Cloudflare後,R2便會自動吃到Cloudflare全球CDN,讓圖片載入速度更快。

你說為何不把整個靜態網站檔案放R2?Cloudflare Page不用錢呀,R2一有讀寫都會計價的。

Cloudflare R2與Cloudflare Images的比較
#

Cloudflare除了物件式儲存服務的R2以外,還推出專為圖片準備的「Cloudflare Images」、針對串流影片準備的「Cloudflare Stream」產品,後二者都是建基在R2上的服務。

單就當圖床的用途,如果只是要單純放圖片,不需要傳輸優化、自動縮小圖片、轉檔操作,那麼用Cloudflare R2就可以了,什麼檔案類型都可以放。

我覺得不需要用到Cloudflare Images,算起來成本也比較貴。

反正我現在上傳圖片都會用webp壓縮一次,兼顧品質和大小,圖片通常不會大到哪裡去。

2. 新增Cloudflare R2 bucket
#

  1. 首先註冊Cloudflare帳號,進入 Cloudflare後台,點選新增網站,把你網域的DNS伺服器移交給Cloudflare(不用轉移整個網域,DNS就好)

  2. 點選左欄的R2

  3. 一開始得先輸入信用卡資訊才可以使用R2,用Paypal付也行。它會在你真的使用R2後才收費。

  4. 點選建立貯體(bucket)

  5. 取個全小寫的名字,並設定自動讓Cloudfalre選取區域最近的伺服器

  6. 建立之後點選設定,在公開存取下方設定自訂網域,點選連線網域

  7. 輸入你域名的子網域,取名可以取「cdn」或者「static」

  8. 由於DNS紀錄已移交給Cloudflare,它會自動新增CNAME規則,讓子網域指向R2 bucket

  9. 在那之後,用瀏覽器開啟剛剛新增的子網域,會看到404,這是正常的,表示子網域已經成功接上Cloudflare R2了

3. 以圖形程式上傳檔案到Cloudflare R2
#

Cloudfalre R2網頁是可以拖拉上傳啦,不過界面太陽春,我會另外用工具。

Cloufdlare R2跟Amazon S3的API相容的,可以沿用Amazon的命令行工具aws-cli來上傳,

圖形上傳工具有 PicGo,搭配Amazon S3外掛。

我使用Linux桌面,個人覺得最符合我工作流程的方法是用s3fs掛載Cloudflare R2成為本機目錄,方便用KDE或GNOME的檔案管理器直接存取檔案。

  1. 參見 Configure aws CLI for R2,到Cloudflare後台的R2頁面,點建立API權杖

  2. 權限設定為系統管理員

  3. 將該網頁全部的數值都記下來,日後不會再出現了。

  4. 用Linux套件管理器安裝 aws-cli s3fs

  5. 執行aws configure指令,把剛剛得到的S3金鑰識別碼(ID)和秘密存取金鑰(Secret)填進去,region填auto,output填json。這樣密碼和金鑰就會儲存到~/.aws/credentials

  6. aws s3api list-buckets --endpoint-url Cloudflare R2網址指令即可列出Cloudflare帳戶上的貯體。後面的Cloudflare R2網址為帳號ID.r2.cloudfalresotrage.com

  7. s3fs可以沿用aws-cli的credentials…但我們還是分開處理吧。用以下指令建立含有S3的金鑰識別碼的密碼檔案

echo "金鑰識別碼:秘密存取金鑰" > ${HOME}/.config/.passwd-s3fs
chmod 600 ${HOME}/.config/.passwd-s3fs
  1. 用以下指令,讀取剛剛建立的S3密碼檔案,掛載Cloudflare R2現有的貯體到/run/media/user/r2bucket-static,並開放給其他使用者寫入
sudo mkdir /run/media/user/r2bucket-static

echo "user_allow_other" | sudo tee -a /etc/fuse.conf

sudo s3fs "Cloudflare R2貯體名稱" \
"/run/media/user/r2bucket-static" \
-o passwd_file="/home/user/.config/.passwd-s3fs" \
-o url="Cloudflare R2網址" \
-o use_path_request_style \
-o nonempty \
-o allow_other \
-o umask=000
  1. 如此一來便可以用Linux的檔案管理器管理R2上的檔案了

  2. 因為是遠端目錄所以會有點延遲,如果嫌s3fs回應速度慢再改用aws-cli上傳:

aws s3 cp --recursive "目錄或檔案" "s3://R2貯體名稱/路徑" --endpoint-url "Cloudflare R2網址"

# 例如目錄對目錄,就要這樣寫:aws s3 cp --recursive "/home/user/Pictures/" "s3://static/pictures" --endpoint-url "Cloudflare R2網址"
  1. 可把s3fs的掛載規則新增到/etc/fstab,令其開機自動掛載:
"Cloudflare R2貯體名稱" "/run/media/user/r2bucket-static" fuse.s3fs _netdev,nonempty,allow_other,use_path_request_style,url="Cloudflare R2網址" 0 0
  1. 取消掛載R2的指令:
sudo s3fs "Cloudflare R2貯體名稱" "/run/media/user/r2bucket-static" -o passwd_file="/home/user/.config/.passwd-s3fs"

4. 在Hugo文章嵌入R2的圖片
#

沒什麼特別的,因為已經把R2連到我的子網域,用markdown貼網址就行。

假設上傳一張test.webp到R2根目錄,圖片網址就是子網域+檔案名稱:

![](https://static.ivonblog.com/test.webp)

不過我有給圖片建立目錄,對應Hugo網站下的page bundle結構,這樣我比較知道這張圖片隸屬於哪篇文章。下面的例子,圖片網址會變成https://static.ivonblog.com/posts/testpage/test.webp

參考資料
#

相關文章

自訂Hugo的RSS訂閱,過濾特定文章不讓其出現在RSS列表
資訊科技 Hugo網站架設 Hugo RSS Feed
如何修改自訂Hugo主題:程式碼覆寫(override)
資訊科技 Hugo網站架設 Hugo Theme
將Hugo靜態網站部署到Amazon S3 + Cloudfront + Route 53
資訊科技 Hugo網站架設 Amazon Web Services

留言板

此處提供二種留言板。點選按鈕,選擇您覺得方便的留言板。要討論程式碼請用Giscus,匿名討論請用Disqus。

這是Giscus留言板,需要Github帳號才能留言。支援markdown語法,若要上傳圖片請貼Imgur連結。您的留言會在Github Discussions向所有人公開。

這是Disqus留言板,您可能會看到Disqus強制投放的廣告。有時留言可能會被系統判定需審核,導致延遲顯示,請見諒。