很多人在搭建静态博客（Hexo / Hugo / Jekyll / Next.js）时，习惯直接把图片放在仓库的 /assets/img/... 目录下，然后在文章的 front matter 中引用：

  • og_image: /assets/img/...
  • thumbnail: /assets/img/...

这种方式对小型站点来说问题不大，但随着图片数量的增加，就会出现一些麻烦：

  • 仓库体积不断膨胀（推送几百张图片非常慢）
  • GitHub Pages / CDN 缓存有限，全球访问速度不稳定
  • 无法在线处理图片（例如缩放、WebP 转换等）

更优的方案是将图片迁移到 Cloudflare R2，并绑定自定义域名：

  • 存储更便宜（10GB 免费额度）
  • 出口流量经由 Cloudflare CDN，基本免流量费
  • 可叠加 Image Resizing 实现自动缩放与优化
  • 与静态站点解耦，让代码库更轻便

一句话：用 R2 + 自定义域名替代仓库存图，可以让静态站点更快、更轻、更安全。以下是完整的迁移指南。

1. 创建 R2 存储桶

  1. 登录 Cloudflare → R2 → Create bucket
    • 名称：img（可自定义）
    • 其他设置保持默认
  2. 上传测试图片
    • 在控制台上传 blog/ 文件夹
    • 记录路径，例如：blog/ordinary-stars.png

2. 绑定自定义域名

R2 默认域名是 https://<bucket>.r2.cloudflarestorage.com，这种直链会计入公网出口流量。 为了让流量走 Cloudflare 内网（免费且带 CDN 加速），需要绑定自定义域名。

  1. 进入 Bucket → Settings → Custom Domains
  2. 添加自定义域名，如 img.example.com（加上 img 前缀可避免与 cf-pages 自定义域 example.com 冲突）
  3. 在 Cloudflare DNS 中添加对应记录（CNAME 或 AAAA，控制台会提示）
  4. 等待生效后访问：https://img.example.com/blog/ordinary-stars.png

3. 修改博客配置

迁移前，文章的 front matter 写法可能是：

  • og_image: /assets/img/blog/ordinary-stars.png
  • thumbnail: /assets/img/blog/ordinary-stars.png

迁移到 R2 后应改为：

  • og_image: https://img.example.com/blog/ordinary-stars.png
  • thumbnail: https://img.example.com/blog/ordinary-stars.png

注意事项：

  • Open Graph (og_image) 必须使用绝对 URL，否则 Facebook / Twitter 等平台不会抓取图片。
  • 建议使用 https://，确保 TLS 加密安全。

4. TLS 版本设置（安全性）

在 Cloudflare → SSL/TLS → 边缘证书中设置：

  • Minimum TLS Version → 1.2
  • TLS 1.3 → 启用（默认支持）

这样既能兼顾兼容性（老设备至少还能用 1.2），又保证安全性与性能。