Cloudflare R2 图床完整指南：与其他方案的对比及配置教程

核心要点

Cloudflare R2 是 2026 年个人博客图床的最佳选择之一：

• ✅ 完全免费：10GB 存储 + 无限制 CDN 流量
• ✅ 全球加速：300+ 边缘节点，自动 WebP/AVIF 优化
• ✅ Hugo 友好：自定义域名支持，短代码集成
• ⚠️ 配置稍复杂：需 Wrangler CLI 或 Web 界面上传

适合人群：使用 Hugo/Hexo/Jekyll 等静态博客、追求性能与成本的开发者。

什么是 Cloudflare R2？

Cloudflare R2 是 Cloudflare 推出的对象存储服务（Object Storage），名称中的 “R2” 代表 “Request 2”，强调其零出口流量费（Zero Egress）的核心优势。

根据 Cloudflare 官方文档，R2 的主要特点包括：

图床方案对比：R2 vs 其他选择

主流图床服务对比表

为什么选 R2 而不是其他方案？

1. 成本优势明显

根据 2026 年 4 月的官方定价：

结论：对于月流量 100GB 的博客，R2 可节省 ¥24-36/月。

2. 性能优于免费方案

根据 WebPageTest 实测数据（2026 年 4 月，全球多节点平均）：

3. 与静态博客完美配合

Hugo、Hexo、Jekyll 等静态生成器与 R2 的契合度极高：

• 通过 hugo server 本地预览时使用相对路径
• 部署后自动指向 R2 自定义域名
• 配合 Hugo Pipes 可实现图片自动压缩

R2 配置完整教程

步骤 1：创建 R2 Bucket

1. 登录 Cloudflare Dashboard

   Cloudflare Dashboard 首页

2. 点击左侧菜单 Storage & Databases，启用 R2 Object Storage 存储服务

3. 点击 Create bucket

   创建 Bucket 界面

4. 输入 Bucket 名称（如 myblog-images）

5. Location 选择 Automatic

   Location 设置为 Automatic

6. 点击 Create bucket

步骤 2：设置自定义域名（推荐）

为什么需要自定义域名？

• 默认的 R2 域名（*.r2.cloudflarestorage.com）在国内部分地区访问较慢
• 自定义域名可使用你的主域名（如 img.yourdomain.com）
• 利于 SEO（图片 URL 与站点同域）

配置步骤：

1. 进入刚创建的 bucket
2. 点击 Settings → Custom domains
3. 点击 Connect domain
4. 输入子域名（如 img.yourdomain.com）
5. Cloudflare 会自动添加 DNS 记录
6. 等待 SSL 证书签发（约 2-5 分钟）

步骤 3：上传图片的 3 种方式

方式 A：Web 界面（适合少量图片）

1. 进入 bucket → 点击 Upload
2. 拖拽或选择文件
3. 建议创建文件夹组织：/posts/2026/04/

方式 B：Wrangler CLI（推荐开发者）

# 安装 Wrangler
npm install -g wrangler

# 登录 Cloudflare
wrangler login

# 上传单个文件
wrangler r2 object put myblog-images/posts/featured.jpg --file=./featured.jpg

# 批量上传
for file in ./images/*; do
  wrangler r2 object put myblog-images/posts/$(basename "$file") --file="$file"
done

方式 C：rclone（适合迁移）

# 配置 rclone
rclone config
# 选择 n) New remote
# name: r2
# type: s3
# provider: Cloudflare
# 填入 Access Key ID 和 Secret Access Key

# 同步整个目录
rclone sync ./my-images r2:myblog-images/posts/2026/04/

步骤 4：在 Hugo 中引用

✅ 注意：以下 URL 使用的是已绑定的自定义域名 img.d5n.xyz。

基础 Markdown 语法：

![测试图片](https://img.d5n.xyz/posts/test-image-final.jpg)

实际效果：

图1：通过 R2 自定义域名加载的测试图片

Frontmatter 封面图：

---
title: "文章标题"
date: 2026-04-13
cover:
    image: "https://img.d5n.xyz/posts/test-image-final.jpg"
    alt: "R2 测试图片"
    caption: "图片来源：R2 图床"
---

使用 Hugo 短代码（高级）：

创建 layouts/shortcodes/r2-img.html：

{{ $src := .Get "src" }}
{{ $alt := .Get "alt" | default "" }}
{{ $domain := "img.d5n.xyz" }}

<figure>
  <img src="https://img.d5n.xyz/{{ $src }}" alt="{{ $alt }}" loading="lazy"/>
  {{ with .Get "caption" }}
  <figcaption>{{ . }}</figcaption>
  {{ end }}
</figure>

使用方式：

实际效果：

R2 + Hugo 工作流程图：

graph LR
    A[本地 Markdown 文章] -->|hugo build| B[Hugo 生成 HTML]
    B -->|引用图片 URL| C[Cloudflare R2]
    C -->|零流量费 CDN| D[全球读者]
    
    style C fill:#f96,stroke:#333,stroke-width:2px
    style D fill:#9f6,stroke:#333,stroke-width:2px

graph TB
    subgraph 本地开发环境
        H1[Hugo 文章]
        H2[本地图片]
    end
    
    subgraph 部署与存储
        V1[Vercel 自动部署]
        R1[R2 Bucket]
        R2[自定义域名 img.xxx]
    end
    
    subgraph 内容分发
        C1[Cloudflare Edge 节点]
        C2[读者浏览器]
    end
    
    H1 --> V1
    H2 -->|Wrangler/rclone 上传| R1
    R1 --> R2
    R2 --> C1
    V1 --> C1
    C1 --> C2

性能优化技巧

1. 图片格式选择

建议：上传前将 JPG/PNG 转换为 WebP，可使用：

# 使用 cwebp
cwebp -q 85 input.jpg -o output.webp

# 或使用 squoosh-cli
npx @squoosh/cli --webp '{"quality":85}' input.jpg

2. 响应式图片

Hugo 配合 R2 实现响应式图片：

<picture>
  <source srcset="https://img.d5n.xyz/posts/test-image-final.avif" type="image/avif">
  <source srcset="https://img.d5n.xyz/posts/test-image-final.webp" type="image/webp">
  <img src="https://img.d5n.xyz/posts/test-image-final.jpg" alt="R2 响应式图片测试">
</picture>

3. 懒加载

Hugo 默认支持图片懒加载，确保在 config.yaml 中开启：

params:
  images:
    lazy: true

常见问题 FAQ

Q1: R2 真的完全免费吗？

答：在免费额度内（10GB 存储 + 100 万次 Class A 操作/月）完全免费。超出后：

• 存储：$0.015/GB/月（约 ¥0.11/GB）
• 流量：始终免费（这是 R2 最大优势）

Q2: 国内访问速度如何？

答：Cloudflare 在中国大陆有多个节点（北京、上海、广州等），访问速度与阿里云 OSS 相当。但建议绑定国内已备案域名以获得最佳体验。

Q3: 可以配合其他静态博客使用吗？

答：可以。R2 是通用对象存储，支持：

• Hugo / Hexo / Jekyll / Gatsby / Next.js 等静态博客
• WordPress（通过插件）
• 任何支持自定义图片 URL 的平台

Q4: 图片会被压缩或修改吗？

答：默认不会。R2 只存储原始文件。如需自动压缩，可：

1. 上传前本地压缩
2. 使用 Cloudflare Images（额外付费服务）
3. 使用 Hugo Pipes 构建时处理

Q5: 如何备份 R2 中的图片？

答：多种方式：

# 使用 rclone 同步到本地
rclone sync r2:myblog-images ./r2-backup

# 或同步到另一个存储
rclone sync r2:myblog-images s3:backup-bucket

参考资源

• Cloudflare R2 官方文档
• Wrangler CLI 文档
• Hugo 图片处理文档

本文遵循 CC BY-SA 4.0 协议，转载请注明出处。