【Rin】基于 Cloudflare Pages + Workers + D1 + R2 全家桶

Laosia2025-04-092025-04-09

【Rin】基于 Cloudflare Pages + Workers + D1 + R2 全家桶
介绍

Rin 是一个基于 Cloudflare Pages + Workers + D1 + R2 全家桶，无需服务器无需备案，只需要一个解析到 Cloudfla

openRin/Rin: ⚡Dynamic blog based on Cloudflare Pages + Workers + D1 + R2

演示地址

Laosia(爆笑)的博客

特性

支持 Github OAuth 登录，默认第一个登录的用户拥有管理权限，其他用户均为普通用户
支持文章的写作与编辑
支持本地实时保存对任意文章的修改/编辑且多篇文章互不干扰
支持设置为仅自己可见，可以充当云端同步的草稿箱或者记录隐私性较强的内容
支持拖拽/粘贴上传图片到支持 S3 协议的存储桶并生成链接
支持设置文章别名，可通过形如 https://xeu.life/about 链接访问文章
支持文章不列出在首页列表中
支持添加友链，同时后端每间隔 20 分钟定期检查更新友链可访问状态
支持回复评论文章/删除评论
支持通过 Webhook 发送评论通知
支持自动识别文章中的第一张图片并作为头图展示在文章列表中
支持输入形如” #博客 #部署 #Cloudflare”之类的标签文本并自动解析为标签
更多特性请参考 https://xeu.life

准备工作

CloudFalre账号 [[【Rin】相关参数]]
1. Cloudflare 的账户ID（账户主页，点击一个域名，找到账户ID）
2. Cloudflare 用户 API 令牌 (账户ID找到API令牌进去，编辑 Cloudflare Workers模板，添加一个账户，D1,编辑)
3. S3存储桶（R2对象存储，创建存储桶，返回找到api）
Github账号
1. GitHub OAuth（https://github.com/settings/developers，注册一个应用。获取`Client ID和Client secret`
域名(前端和后端，用不同二级域名)
1. xyz后缀大概11.18美元
2. link后缀大概7.18美元

部署

NOTE

介绍项目分为前端和后端，前端部署到CloudFlare Pages。后端部署到CloudFlare Workers

一、Github fork项目

1.1，找到项目 https://github.com/openRin/Rin 点击fork到自己的仓库。名字可以自定义。

二、部署前端，pages

2.1，登录 Cloudflare 控制台，进入 Workers 和 Pages 页面，点击创建应用程序，选择 Pages 2.2，点击连接到 Git 连接自己的 GitHub 账号并选择 Fork 的存储库 2.3，点击 开始设置 进入配置页面，构建设置按照填入以下内容：

框架预设：无
构建命令：bun b
构建输出目录：client/dist
路径：<留空>

2.4，环境变量复制以下内容，根据自身情况修改变量值：

NOTE

重要提示最后两行环境变量 SKIP_DEPENDENCY_INSTALL 和 UNSTABLE_PRE_BUILD 为配置 Cloudflare 使用 Bun 进行构建的参数，不要修改

NAME=Laoisa # 昵称，显示在左上角
DESCRIPTION=laosia博客 #个人描述，显示在左上角昵称下方
AVATAR=https://avatars.githubusercontent.com/u/36541432 # 头像地址，显示在左上角
API_URL=https://blog-server.diggoo.xyz #服务端域名，可以先使用默认值查看效果，后续部署服务端后再修改
PAGE_SIZE=5 #默认分页大小，推荐 5
RSS_ENABLE=true #默认false
SKIP_DEPENDENCY_INSTALL=true
UNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i

2.5，点击保存并部署，等待构建部署，不出意外的话约 30s 后即可部署完成

2.6，==故障排除==

如遇以下错误，请检查环境变量中是否存在空格等无关内容

2024-06-07T02:24:04.979145Z	Using v2 root directory strategy
2024-06-07T02:24:05.003931Z	Success: Finished cloning repository files
2024-06-07T02:24:06.568608Z	Checking for configuration in a wrangler.toml configuration file (BETA)
2024-06-07T02:24:06.56923Z	
2024-06-07T02:24:06.667468Z	No wrangler.toml file found. Continuing.
2024-06-07T02:24:07.542274Z	Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

如错误提示为以下内容，请点击重试部署再次尝试：

16:30:39.855	Using v2 root directory strategy
16:30:39.881	Success: Finished cloning repository files
16:30:40.746	Failed: unable to read wrangler.toml file with code: -11
16:30:41.587	Failed: an internal error occurred. If this continues, contact support: https://cfl.re/3WgEyrH

三、部署后端

3.1，配置 GitHub Action

3.1.1，在自己 fork 的仓库中 > Settings > Secrets and Variables > Actions > Repository secrets 点击 New repository secret 创建以下两个密钥：

NOTE

密钥生成器秘钥生成器地址： https://www.avast.com/random-password-generator

CLOUDFLARE_ACCOUNT_ID=6c33ae6fdf9f9a25c97d41f96a190a65
CLOUDFLARE_API_TOKEN=Ipdv41FWlu3-H0bWjdqz2bDWASMt5XOaDCwGvfzY
RIN_GITHUB_CLIENT_ID=Ov23liSWRAQdp8V2KhcB
RIN_GITHUB_CLIENT_SECRET=707504c5aaf9ad09e1ff5b318a53585dcc9eeea8
JWT_SECRET=N9lk82S4tBvIQ4y
S3_ACCESS_KEY_ID=3d5a133110aa89da68bf27f69ff03deb
S3_SECRET_ACCESS_KEY=0c506ffb48ee7c05b5a6e053dcf489a1154bf7f205906c84533c232a584bd04a

3.1.2，同时你可以在Actions secrets and variables的 Variables 中创建以下变量：

DB_NAME=<数据库名称，默认rin>
WORKER_NAME=<Cloudflare Worker 名称，默认rin-server>
FRONTEND_URL=<前端地址，用于Webhook通知时拼接地址，可不填>
SEO_BASE_URL=<SEO 基础地址，用于 SEO 索引，默认为 FRONTEND_URL>
SEO_CONTAINS_KEY=<SEO 索引时只索引以 SEO_BASE_URL 开头或包含SEO_CONTAINS_KEY 关键字的链接，默认为空>
S3_FOLDER=<S3 图片资源存储的文件夹，默认为 'images/'>
S3_CACHE_FOLDER=<S3 缓存文件夹（用于 SEO、高频请求缓存），默认为 'cache/'>
S3_BUCKET=rinbucket
S3_REGION=<S3 存储桶所在区域，如使用 Cloudflare R2 填写 auto 即可>
S3_ENDPOINT=https://6c33ae6fdf9f9a25c97d41f96a190a65.r2.cloudflarestorage.com
S3_ACCESS_HOST=https://rinbucket.lsao.me

3.2，接入 GitHub OAuth

3.2.1，打开 https://github.com/settings/developers ，选择 New OAuth App 创建一个新的 Oauth App，填入自己的应用名称与主页地址(带http://或https://)，Authorization callback URL 填写:https://<你的后端地址>/user/github/callback

3.3，创建存储桶

3.3.1，Cloudflare 面板中点击 R2 > 创建存储桶，填写名称，选择距离自己近的位置： 3.3.2，创建存储桶之后进入存储桶详情页 > 设置，复制 S3 API 地址，去除末尾的存储桶名称后填入 S3_ENDPOINT，如：

1
2
3

S3_BUCKET=rinbucket # 桶名称
S3_REGION=auto # 地区 auto 不用修改
S3_ENDPOINT=https://bb8536e0b3a96c7e495e25685f5836a7.r2.cloudflarestorage.com

3.3.3，然后在公开访问处绑定一个域名用于访问资源，绑定的域名对应于S3_ACCESS_HOST环境变量：

1	S3_ACCESS_HOST=https://rinbucket.diggoo.xyz

3.4，运行action 点击actions，Deploy，run workflow。 3.5，cloudflare就会创建一个works。

介绍

演示地址

特性

准备工作

部署

一、Github fork项目

二、部署前端，pages

2.6，==故障排除==

三、部署后端

3.1，配置 GitHub Action

3.2， 接入 GitHub OAuth

3.3，创建存储桶

3.2，接入 GitHub OAuth