将博客图片从仓库迁移到 Cloudflare R2

---

---

2025-10-02-migrating-blog-images-from-repository-to-cloudflare-r2

Migrating Blog Images from Repository to Cloudflare R2

🚀

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

og_image: /assets/img/blog/ordinary-stars.svg thumbnail: /assets/img/blog/ordinary-stars.svg

这种方式对小站点没问题，但随着图片增多，会带来几个麻烦：

• 仓库越来越重（几百张图片 push 很慢）
• GitHub Pages/CDN 缓存有限，全球访问速度不稳定
• 无法在线处理图片（缩放、WebP 转换等）

更优解是把图片迁移到 Cloudflare R2，并绑定自定义域名：

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

下面就是完整迁移指南。

🔹 一、创建 R2 存储桶

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

🔹 二、绑定自定义域名

默认的 R2 域名是 https://.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.svg

🔹 三、修改博客配置

原来文章 front matter 写法：

og_image: /assets/img/blog/ordinary-stars.svg thumbnail: /assets/img/blog/ordinary-stars.svg

迁移到 R2 后，改成：

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

⚠️ 注意：

• Open Graph (og_image) 要求必须用绝对 URL，否则 Facebook/Twitter 等不会抓取。
• 建议用 https://，保证 TLS 加密。

🔹 四、TLS 版本设置（安全性）

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

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

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

✅ 一句话 
用 R2 + 自定义域替代仓库存图，让静态站点更快、更轻、更安全。