前言

最近終於把自己 blog 的 image hosting workflow 又重新整理了一輪。

某種程度上，這件事其實也算折騰蠻久了(

以前一開始寫 blog 時，其實最早是直接用 Imgur，也算紅集一時或是最大宗的圖床

但後來不知道從什麼時候開始，大概去年開始 Imgur 在台灣常常會有一些連線問題，有時甚至直接被擋，要開 VPN 才能正常上傳

後來有轉去用別的 image hosting，其中一段時間我是用 imgpoi
那時候其實覺得還不錯，介面也還算完整，也有點簡易攝影用途的感覺

但好景不常，才短暫開始用一陣子後，imgpo 發生的主機 storage 故障的問題，圖片 link 直接整批消失，也救不回來，還好我慣性脫稿還沒有開始寫太多

所以那次後就在找尋一些替代方案

如果有自己的 image hosting 總還是比較好，但是又要足夠信任，或是能盡量免費((

後來陸續看了一些文章和分享，發現越來越多人開始用 Cloudflare R2 來當自己的 image hosting

研究一下後覺得其實蠻適合個人 blog 的：

• 免費額度其實蠻夠、可綁自己的 domain、CDN、Infra Cloudflare 就幫你做了，維護成本低

就決定慢慢把未來 blog image workflow 全部搬到 R2

不過也不是完全沒缺點，畢竟本質上還是綁在自己的 Cloudflare 帳號底下
如果之後、帳號出問題、信用卡 BALALA

長遠保存性理論上還是不如一些真正專門 archival 用途的 image storage

至少目前看起來目前對我小小玩家來說也夠用了

這篇文章就簡單記錄一下一些申請操作

和分享自己對應寫 blog 傳圖片很麻煩，額外設計做的一個小工具 Cloudflare R2 Image Uploader，能一鍵整理上傳圖片到 R2，還兼壓縮功能，讓我的節省蠻多步驟再傳圖片這個操作 (當然慣性脫稿還是orz)。這個 APP 其實也有些額外烏龍緣起，但就後面再說吧XD

先從 Host Cloudflare R2 Storage 開始吧

建立 Cloudflare R2 Image Hosting

1. 建立 Cloudflare 帳號 & 啟用 R2 Object Storage 服務

先到 Cloudflare 註冊帳號
如果本來就有在用一些相關服務 Cloudflare DNS、CDN、Tunnel .etc 應該早就有了
Cloudflare 還是很佛的

登入後左側找到：

第一次進去會需要啟用服務，基本上照著流程點就好

3. 建立 Bucket & 綁定 Custom Domains

照畫面點擊創建，建立一個 Bucket (aka. storage container)，名稱可以取類似好記的類似 (img, cdn...)，並且這邊可以配合設定 Custom Domain 當作 production 用途

後點往設定，這邊就會看到 r2 基本的設定，也會有自己 S3 API 的位置，這邊帶會會用到

4. 綁定自己的 Custom Domains（optional but recommended）

這步我蠻推薦做，不然預設網址通常會長這樣： https://pub-xxxx.r2.dev/xxx.png
能用是能用，但自己的 domain 還是舒服很多，例如：image.setsal.dev

具體操作如下

進入創立的 bucket -> 點選設定 -> Custom Domains

配合綁定自己的 Custom Domain 當作 production 用途，都很單純，照著設定就好

之後圖片網址就能變成 https://image.setsal.dev/xxx.png

如果一切順利，其實這時候就可訪問你的 buckets，直接用 cloudflare 內建頁面建立上傳新增檔案了，而後前往綁定的 domain 後面加上傳的檔案名稱，即可以存取

這邊可以先試著嘗試上傳看看，而後 url 訪問測試一下

但如果想進一步自動化，並用我小開發的 r2-uploader 上傳，可以再參考以下

5. 建立 API Token

想當然要串接也是要建立 API Token

回到 R2 首頁概觀，在下方應該會看到詳細資訊，點選 API 令牌進入創建：

點選建立 Account API 權杖，權限可以設物件寫入和讀取，指定貯體其實就是 bucket 的意思，可以決定要這個 token 是否要綁在特定 bucket 上

設定完後即會取得

• Access Key ID (存取金鑰識別碼)
• Secret Access Key (秘密存取金鑰)

這幾個值只會這時候出現一次，記得妥善保存，等等 r2-uploader 會用到

特定端點 url 那個也可以記下來，那個其實就是 S3 的 Endpoint，但這個還好，可以再回首頁找
Upload 就會從這個 endpoint 上傳

7. 利用 Cloudflare R2 Image Uploader App 上傳圖片

接著就能開始用 uploader 了

前往 cloud-flare r2 image uploader Github release 頁面

下載對應平台的安裝檔案裝，打開 APP 後，點擊 Settings Tab

照著填入剛剛的資訊

S3 Endpoint, Access Key ID, Secret Access Key, Bucket Name, Public URL Base (就是你綁定的 Custom Domain 全名)

最後點擊一下下方 Test Connection，測試連線成功後基本就大功告成了

Happy Uploading? :)

接下來就稍微介紹一下設計的 APP 更多功能吧，主要也是想加速整個寫 blog 上傳圖片的流程

Cloud Flare R2 Image Uploader 圖片上傳壓縮小工具

這邊很想直接貼 Github README，有興趣可以前往 https://github.com/setsal/cloudflare-r2-image-uploader 查看

主要開發這工具主要是以前在寫 blog，我都要做一些很繁瑣的步驟

1. 整理照片、小調色、甚至要再儲存
2. Resize + 壓縮 (畢竟要放在 blog 不能太大...不然現在圖片拍出來真的很大。之前我主要是用免費的 caesium-image-compressor)
3. Rename
4. 選擇壓縮的檔案上傳到一些 image hosting 網站 (e.g imgur)
5. 右鍵複製取得圖片 url，貼回 blog

就真的挺煩的，加上我可能邊寫想邊貼圖片，所以這個步驟就會 * N

透過 Cloud Flare R2 Image Uploader 就可以把這些步驟直接省掉

工作流程

在前面 APP Connection Setting 設定好後

選擇好圖片，直接拖曳 OR Paste From ClipBoard

就這樣，一切就好了。

有開啟功能的話，圖片的 url 也會直接被複製到剪貼簿中，後面直接就可以切到 blog 上了

APP 功能介紹

基本上把我想到的，個人需求想用的都做了，這邊就稍微條列一下

下載地址

前往 Github Release Page 抓就好

https://github.com/setsal/cloudflare-r2-image-uploader/releases

其他趣事 & 緣起

其實之前轉到 R2 後也是想過有沒有一些類似的 APP 幫忙，最早我也是看到也算是社群蠻有名的

• PicGo
• PicGo plugin s3

兩者配合可以做到，PicGo 本身比較像一個 framework，也支援一些客製化插件來做到更多事情

最一開始我也使用 PicGo，基本使用是還沒問題，但大概有以下我覺得仍苦手

• 壓縮/Resize 這點我還是手動做，然後我也要兩步驟 (先壓縮，再選壓縮的檔案)
• 原本壓縮用的 caesium-image-compressor windows 又有 bug 沒辦法 % 數 resize
• PicGo 有提示使用會追蹤，就覺得有點毛毛的
• 其他一些小功能設定不便 (上傳目錄指定、格式、s3 plugin 設定有點不直觀)

勉強用了一段時間後，後面因為電腦 SSD 爆了，換好新的後原本想來繼續用，但不知道為啥我一些 R2 設定都填對了，就是傳不上去，然後想辦法 debug PicGo/plugin s3 又 de 不出來

索性自己做一個了，也得益於 AI 加速開發
加入一些我自己理解最需要的功能，也不需要像 PicGo 做的那麼龐大

至於趣事嗎
全部做完後才發現是我誤會 PicGo s3 plugin 某些要填 access key 的值...哈

不過總歸還是幫助我做到一個我想要所有功能的 APP 了，也算因禍得福吧XD

結語

總之大概這樣，也分享紀錄一下

那這邊文章大概到到這裡了，有緣下篇文章見