前言#
之前看了一篇文章，关于介绍 Cloudflare R2 来搭建圖床的方案，主要是白嫖 Cloudflare 的空間和 cdn 服務。我現在博客 DevNow 的 CDN 使用的是七牛雲，偶爾還是有一點點的支出。
雖然不多，但是吧，看到有白嫖的方案，還是蠢蠢欲動，這不今天就來試著弄下看看。
1. 註冊 Cloudflare 帳號#
先簡單介紹下 Cloudflare 是一家提供網絡安全和性能優化服務的公司。它的主要功能包括內容分發網絡（CDN）、分佈式拒絕服務攻擊（DDoS）防護、互聯網安全和優化，以及域名系統（DNS）服務。
Cloudflare R2 是 Cloudflare 提供的對象存儲服務。它類似於亞馬遜的 S3（Simple Storage Service） ，但有一個顯著的區別：Cloudflare R2 不收取出站帶寬費用。這意味著用戶在從存儲中檢索數據時不會被額外收費，這對於需要大量傳輸數據的應用來說是一個很大的優勢。
R2 允許用戶存儲和管理大量的非結構化數據，比如圖片、視頻、備份文件等。它與 Cloudflare 的全球網絡集成，提供了快速、安全的內容交付，適合需要高效、可靠的存儲和分發解決方案的企業。R2 還支持與現有的 S3 API 兼容，方便那些已經在使用 S3 的用戶遷移或擴展到 Cloudflare R2 。
2. 綁定域和解析 DNS#
在左側網站面板中添加一個域名，由於我的 blog 域名已經在騰訊雲上買完了，這裡主要將 DNS 解析服務遷移到 Cloudflare 。
如果不是 DNS 解析不是 Cloudflare 的話，狀態這裡會顯示讓你去切換。我這裡用騰訊雲來舉例子，具體步驟如下：
2.1 在騰訊雲裡域名的菜單下點擊對應域名管理#
2.2 然後點擊修改 DNS 解析#
2.3 這裡我們把默認的 DNSPod 切換到 自定義 DNS，然後填寫對應的地址就好#
下邊這兩個地址可以在 Cloudflare 中找到，填上就好，然後等待，快的話幾分鐘就好，好了之後 Cloudflare 會發送郵件通知，如下，這個時候表示已經成功解析過來了。
2.4 這個時候再回到網站這裡發現狀態已經成功變成活動了#
3. 開通 R2 服務#
通過左側菜單導航進入到 R2 的服務，開通前需要綁定信用卡，支持 Visa 的都可以，方便後邊對於超出免費額度或者開啟一些收費服務。開通後即可創建存儲桶:
創建後可以進入到桶的詳情面板:
配置一個自定義域名，後邊可以通過這個訪問。到這裡基於 R2 的對象存儲服務就基本完事了。後續就可以在存儲桶中存儲對象了。
4. PicGo 配置 R2 上傳服務#
為了縮減上傳圖片的工作流，我使用的是基於 PicGo 的上傳方式，可以通過複製和 url 進行上傳。這裡主要記錄下如何配置上傳到 R2 服務的過程。
R2 是兼容 S3 的格式的，所以這裡直接配置 S3，插件裡搜索 s3 的插件，安裝即可：
在「插件設置」中選擇安裝，「圖床設置」中就新增了 Amazon S3 選項。點擊進入配置選項。
這裡有幾項配置需要尤其注意。
- 應用密鑰 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格式的域名或自定義域名，如我配置的https://r2.laughingzhu.cn
上邊的秘鑰信息在 Cloudflare R2 的服務中可以找到：
創建一個新的 API 令牌，完成創建後，即可看到相關秘鑰，安裝上邊的對應關係填入即可：
其他配置保持默認即可，確認參數無誤後點擊「確定」與「設置為默認圖床」即可。
5. PicGo 增加自動壓縮和轉 webp 插件#
我用的是 compress-next 有很多模式可以配置，我這裡選的是 webp-converter
我主要是希望通過轉換 webp 來優化圖片加載。安裝完記得進行默認配置：
然後啟用即可，上傳圖片即可轉換為 webp 格式 上傳到 R2 服務
到這裡我 blog 整體的靜態資源已經從七牛雲遷移到 Cloudflare R2 服務了，開始白嫖的日子了，舒服😊。