白嫖就是香啊！无需服务器搭建博客网站：Rin

没有服务器想要搭建属于自己的博客网站，可以利用 GitHub、Notion 然后通过管理软件来部署管理，例如之前分享过的：Gridea、Hexo、NotionNext、Publii 等。

今天要分享的一款是可直接部署在 Cloudflare 的博客程序「Rin」不需要服务器，只需要你有个域名可以解析就行了。据介绍程序基于 Cloudflare Pages + Workers + D1 + R2 全家桶。

充分利用了 Cloudflare 强大的边缘网络和无服务器架构，为用我们提供了一个高性能、高可用性和易于维护的博客。

图片

功能特色

• 支持 Github OAuth 登录，默认第一个登录的用户拥有管理权限，其他用户均为普通用户

• 支持文章的写作与编辑

• 支持本地实时保存对任意文章的修改/编辑且多篇文章互不干扰

• 支持设置为仅自己可见，可以充当云端同步的草稿箱或者记录隐私性较强的内容

• 支持拖拽/粘贴上传图片到支持 S3 协议的存储桶并生成链接

• 支持设置文章别名

• 支持文章不列出在首页列表中

• 支持添加友链，同时后端每间隔 20 分钟定期检查更新友链可访问状态

• 支持回复评论文章/删除评论

• 支持通过 Webhook 发送评论通知

• 支持自动识别文章中的第一张图片并作为头图展示在文章列表中

• 支持输入形如"#博客 #部署 #Cloudflare"之类的标签文本并自动解析为标签

准备工作

• 一个 GitHub 账号

• 一个 Cloudflare 账号，同时已经解析自己的域名

正式部署

首先打开 Rin 项目地址，点击 Fork 按钮

• 项目地址：
  https://github.com/OXeu/Rin

图片

由于 Rin 是一个前后端分离的项目，我们需要分别部署前端和后端

前端设置

打开 Cloudflare 控制台，进入侧边栏的 Workers 和 Pages，然后点击 创建

• 控制台：
  https://dash.cloudflare.com

图片

转到 Pages 选项卡，点击 连接到 Git

图片

如果你之前没有使用过 Cloudflare Pages，那么这里会让你进行授权。授权之后，选择你所 Fork 的存储库，然后点击 下方的 开始设置

图片

进入设置页后，填写以下内容

构建命令：bun b构建输出目录：client/dist

没有提到的项目保持默认值

填写之后点开环境变量（高级），添加以下变量（注意不要有多余的空格）

NAME=Xeu # 昵称，显示在左上角DESCRIPTION=杂食动物 # 个人描述，显示在左上角昵称下方AVATAR=https://avatars.githubusercontent.com/u/36541432 # 头像地址，显示在左上角API_URL=https://rin.xeu.life # 服务端域名，可以先使用默认值查看效果，后续部署服务端后再修改PAGE_SIZE=5 # 默认分页大小，推荐 5SKIP_DEPENDENCY_INSTALL=trueUNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i

最后两行环境变量 SKIP_DEPENDENCY_INSTALL 和 UNSTABLE_PRE_BUILD 不要修改，按原样添加即可

图片

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

图片

回到 Pages 管理页，转到 自定义域，点击 设置自定义域，绑定自己的前端域名

图片

等待状态变为 有效，打开域名即可看见前端页面

图片

后端设置

这里并不需要自行去 Cloudflare Workers 新建项目，后端采用 GitHub Actions 部署，你只需要配置好 GitHub 这边就行。

配置 Cloudflare R2 存储桶

新建存储桶

进入 Cloudflare 控制台，转到侧边栏的 R2，点击 新建存储桶

• 控制台：
  https://dash.cloudflare.com

图片

随意填入名称，然后点击 创建存储桶，提供位置提示 可不选，选择亚太地区也许能获得一部分速度提升。

图片

存储桶配置

进入存储桶，点击设置，复制 S3 API

图片

在下方 公开访问 中绑定一个域名

图片

下方 CORS 策略，点击 添加 CORS 策略

注：这一步可能并不需要，但为了避免问题还是建议提前配置跨域

将下方的域名自行替换为自己的前端域名

[ { "AllowedOrigins": [ "https://blog.obdo.cc" ], "AllowedMethods": [ "GET", "DELETE", "HEAD", "POST", "PUT" ], "AllowedHeaders": [ "Content-Type" ] }]

回到 概述，点击 管理 R2 API 令牌

图片

选择 创建 API 令牌

图片

名称随便填，权限选择 管理员读和写，然后点击 创建 API 令牌

图片

记录下下方的 访问密钥 ID 和 机密访问密钥 获得令牌的人会获得账户的控制权，请不要将令牌随意发送给他人或公开

图片

前往 Cloudflare 获取 账户 ID 和 API 令牌

进入 Cloudflare 控制台，随意进入一个域名，记录下方的 账户 ID

• 控制台：
  https://dash.cloudflare.com

图片

进入右上角的 我的个人资料

图片

进入侧边栏的 API 令牌，点击 创建令牌

图片

点击最下方 编辑自定义令牌 右侧的 开始使用

图片

为令牌授予 Workers R2 存储 D1 Workers 脚本 的 编辑 权限

TTL 可以留空以永久生效，也可以设置一个时间（过期前需要重新生成令牌）

如下图所示，然后点击 继续以显示摘要

图片

点击 创建令牌

图片

记录下生成的令牌以便后续使用

获得令牌的人会获得账户的控制权，请不要将令牌随意发送给他人或公开

图片

接入 GitHub OAuth

Rin 的登录系统采用的是 GitHub 授权，因此你需要先去申请一个 GitHub OAuth App

进入 GitHub OAuth Apps，点击 New OAuth App

• OAuth：
  https://github.com/settings/developers

按照以下参数进行填写

Homepage URL：填写上面的前端地址

Authorization callback URL：填写https://<你的后端地址>/user/github/callback

这里的后端地址即后面你的 Cloudflare Workers 需要绑定的域名

图片

点击 Register application

然后点击 Generate a new client secret，这里可能会需要进行二步验证

记录下生成的 Client ID 和 Client secret

图片

配置 GitHub Actions

打开自己 Fork 的 GitHub 仓库，依次转到 Settings、Secrets and variables、Actions、Variables

图片

将以下的值，依次点击 New repository variables 并添加

FRONTEND_URL=前端地址，填写上文前端所绑定的域名，如 https://blog.obdo.ccS3_BUCKET=R2 存储桶名称，如上文示例中的 rin-storageS3_REGION=autoS3_ENDPOINT=R2 的 S3 API，去掉域名后面的路径，如 https://1234567890abcdef1234567890abcd.r2.cloudflarestorage.comS3_ACCESS_HOST=R2 公开访问域名，如上文示例中的 https://rin-storage.obdo.cc

添加好之后应该是这样的

图片

然后转到 Secrets

图片

将以下的值，依次点击 New repository secret 并添加

• 密码生成器：
  https://www.avast.com/random-password-generator

CLOUDFLARE_ACCOUNT_ID=Cloudflare 的 账户IDCLOUDFLARE_API_TOKEN=Cloudflare 的 用户API令牌 值RIN_GITHUB_CLIENT_ID=上文生成的 Github Client IDRIN_GITHUB_CLIENT_SECRET=上文生成的 Github Client SecretJWT_SECRET=加密用的密钥，你可以使用密码生成器随机生成一个S3_ACCESS_KEY_ID=存储桶API的 访问密钥IDS3_SECRET_ACCESS_KEY=存储桶API的 机密访问密钥

添加好之后应该是这样的

由于是 Secrets 所以不会显示值，添加时务必确认添加正确

图片

进入你 Fork 仓库的 Actions 界面

第一次进入时页面上只会显示一个按钮，点击之后开启 Actions 功能

进入 Deploy 菜单，点击 Run workflow

图片

静待约一分钟左右，等待出现绿勾代表部署完成，如果显示的是叉请检查环境变量的配置是否有误。

图片

对接前后端

首先，提前祝贺下自己，你已经完成了前端与后端的部署，接下来只差最后一步，就是对接前后端了

进入 Cloudflare 控制台，转到侧边栏的 Workers 和 Pages

如果前面部署的一切顺利，这里你应该会看到一个名为 rin-server 的 Worker

进入 rin-server 的设置，转到 触发器

点击 添加自定义域，绑定自己的后端域名

点击 添加路由，依次加入 前端域名/sub/* 前端域名/seo/*

如下图所示

图片

回到前面创建的前端 Pages 设置

将 制作 与 预览 的 APL_URL 均修改为后端域名

图片

进入部署页，点击 重试部署。等待一到两分钟部署完成，打开你的前端域名，点击右上角的 GitHub 登录，第一个登录的人会成为站点的管理员。

图片