博客图片迁移至 Cloudflare R2 记录
2023-11-17 16:18:45 #Cloudflare #Blog

1、购买 R2 对象存储

进入主页，左侧菜单找到 R2 对象存储，购买计划，需要绑卡，送免费10GB额度

2、创建存储桶

image-20250417162347769

image-20250417162659227

3、绑定域名

点击刚创建好的存储桶，进入设置

image-20250417162810215

下拉找到 公开访问-自定义域名，点击 连接域

image-20250417162853800

填写自定义域，这里填写的顶级域名需要已经在CloudFlare上解析的，自定义一个二级域名，点击继续，再点击连接域，CloudFlare会在你的域名下添加一条新的DNS记录

image-20250417162945600

image-20250417163407556

4、设置防盗链

进入自己的域名设置页面，找到安全性-WAF，创建规则

image-20250417163518967

设置规则：只允许域名runnice.me 才可以访问image.runnice.me的内容，其他非法的请求都会被CloudFlare所屏蔽

image-20250417164029041

点击部署后等待生效。

image-20250417164238911

5、上传图片

进入之前新建好的存储桶，上传图片即可

image-20250417164519581

6、Hexo 博客图片加载动画

将所有博客的图片都上传到 R2 存储桶后，替换所有博客文章的图片为 R2 存储桶上的图片访问链接，即https://images.runnice.me/图片名，重新部署后，发现大图片加载有点慢，且没有加载动画。

6.1、安装hexo-lazyload-image模块

1
npm install hexo-lazyload-image --save

6.2、在配置文件_config.yml增加配置

1
2
3
4
lazyload:
  enable: true
  onlypost: false
  loadingImg:

ps:如需要自定义加载动画，可修改配置loadingImg: 图片地址，如果是本地图片，需要将图片上传报主题对应的source/images 文件夹下

7、缓存设置

进入域名页面，选择规则-页面规则-创建页面规则

浏览器缓存：访问后，所需文件储存在浏览器的本地目录，在一段时间内，再次访问优先访问本地文件
边缘缓存：访问后，缓存在最近的CDN存一份，在一段时间内，优先访问CDN中的文件

image-20250417222525708

image-20250417222606572

8、后记

使用PicGo 等第三方工具来方便上传图片；

R2对象存储，如上设置了，是否还可能存在被恶意盗刷产生账单的风险？

上一页
2023-11-17 16:18:45 #Cloudflare #Blog
下一页