這篇文章示範架設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#
首先註冊Cloudflare帳號，進入 Cloudflare後台，點選新增網站，把你網域的DNS伺服器移交給Cloudflare（不用轉移整個網域，DNS就好）
點選左欄的R2
一開始得先輸入信用卡資訊才可以使用R2，用Paypal付也行。它會在你真的使用R2後才收費。
點選建立貯體(bucket)
取個全小寫的名字，並設定自動讓Cloudfalre選取區域最近的伺服器
建立之後點選設定，在公開存取下方設定自訂網域，點選連線網域
輸入你域名的子網域，取名可以取「cdn」或者「static」
由於DNS紀錄已移交給Cloudflare，它會自動新增CNAME規則，讓子網域指向R2 bucket
在那之後，用瀏覽器開啟剛剛新增的子網域，會看到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的檔案管理器直接存取檔案。
參見 Configure aws CLI for R2，到Cloudflare後台的R2頁面，點建立API權杖
權限設定為系統管理員
將該網頁全部的數值都記下來，日後不會再出現了。
執行
aws configure指令，把剛剛得到的S3金鑰識別碼(ID)和秘密存取金鑰(Secret)填進去，region填auto，output填json。這樣密碼和金鑰就會儲存到~/.aws/credentials用
aws s3api list-buckets --endpoint-url Cloudflare R2網址指令即可列出Cloudflare帳戶上的貯體。後面的Cloudflare R2網址為帳號ID.r2.cloudfalresotrage.coms3fs可以沿用aws-cli的credentials…但我們還是分開處理吧。用以下指令建立含有S3的金鑰識別碼的密碼檔案
echo "金鑰識別碼:秘密存取金鑰" > ${HOME}/.config/.passwd-s3fs
chmod 600 ${HOME}/.config/.passwd-s3fs
- 用以下指令，讀取剛剛建立的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
如此一來便可以用Linux的檔案管理器管理R2上的檔案了
因為是遠端目錄所以會有點延遲，如果嫌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網址"
- 可把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
- 取消掛載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根目錄，圖片網址就是子網域＋檔案名稱：
不過我有給圖片建立目錄，對應Hugo網站下的page bundle結構，這樣我比較知道這張圖片隸屬於哪篇文章。下面的例子，圖片網址會變成https://static.ivonblog.com/posts/testpage/test.webp