🗒️使用Cloudflare R2搭建静态网站

2024-6-12|2025-10-10
菜鸡的自我修养
菜鸡的自我修养
type
status
date
slug
summary
tags
category
icon
password
使用R2搭建一个静态网页顺便藏些自用小脚本还可以当作图床,实现一桶多用。
只要是由HTML、CSS和JavaScript组成的静态页面均可
R2对象存储有极高的免费额度,个人使用很难产生费用。
 

正常开通R2存储桶并上传文件

比如上传到 桶名/www/各种文件 ,这里“www”为对象名称,强烈建议不要直接放到根路径下而是建一个专用“文件夹”如“www”
 

绑定自定义域

在存储桶设置—连接域,绑定一个域名即可,R2.dev子域不要允许访问
 

域名设置规则

此处是重点,进入绑定了存储桶的域名里
 
  • 规则 — Configuration Rules
创建一个规则,名称随意,内容如下,域名换成绑定R2的域名

当传入请求匹配时—自定义筛选表达式—编辑表达式 “(http.host contains "你的域名")
自动HTTPS重写— 打开
SSL— 完全
放置位置— 第一个

 
  • 规则 — 转换规则
此处创建两个重写url规则以及一个修改响应头规则
 
第一个重写url规则,名称随意,域名换成绑定R2的域名:

当传入请求匹配时—自定义筛选表达式—编辑表达式 “(http.host eq "你的域名" and http.request.uri.path eq "/")
路径—重写到 Static www/index.html
选择顺序 第一个

这里的重写路径中,假设了静态网站为index.html并放在了“www”的对象里,如果不是需自行修改
 
第二个重写url规则,名称随意,域名换成绑定R2的域名:

自定义筛选表达式—自定义筛选表达式—编辑表达式 “(http.host contains "你的域名")
路径—重写到 Dynamic concat("/www", http.request.uri.path)
选择顺序 最后一个

这个重写路径中,假设了网站相关文件都放在了“www”的对象里,如果不是需自行修改
 
这两个规则的目的是为了隐藏“www”的对象名,原本访问应该是 “https://你的域名/www/index.html”,添加了这两条规则后就变成了 “https://你的域名” 从而保护存储桶并返回了一个静态页面
 
添加一个响应头规则
这个规则的目的是为了能正常在网页查看包含中文的脚本和txt文件
 
修改响应头规则,名称随意,域名换成绑定R2的域名:

自定义筛选表达式—编辑表达式 “(http.host eq "你的域名" and http.request.uri.path contains ".sh") or (http.request.uri.path contains ".txt")
修改响应头—设置静态— 标头名称“Content-Type” 值“text/plain; charset=utf-8
选择顺序 第一个

 
 
到此基本的设置已经完成,可以测试使用绑定R2的域名来访问静态页面了,随后只需要按个人需求设置缓存规则WAF规则即可
这样就相当于拥有了一个不会宕机的静态网站,之后用alist等支持对象存储的工具即可非常方便地管理文件(上传至www对象,任何文件均可)
例如:
要调用脚本时可以bash <(wget -qO- https://你的域名/your_scripts.sh)
要调用图片时可以https://你的域名/your_pic.png
 

本文网站效果:https://serv.forfree.eu.org
查看脚本效果:https://serv.forfree.eu.org/sb.sh
Loading...