最近发现一个非常厉害的项目——Rin，它是一个基于Cloudflare Pages + Workers + D1 + R2的个人博客系统。Cloudflare提供了大量的免费额度，因此使用Rin可以不花一分钱在Cloudflare上部署一个专属的个人博客。而且这可不是像Hexo那样需要本地编辑后生成静态页面导出的博客，而是支持在网页端在线编辑的动态博客。要知道我之前的动态博客可是需要在阿里云上买一台云服务器部署的。

但官方的部署文档编排比较模糊，很多前面用到的环境变量到后面才创建，而且遗漏了一些关键信息，必须得看最后的演示视频才行，而官方的演示视频没有声音讲解，没有字幕提示，观看体验也不好，因此部署过程可谓是磕磕绊绊。鉴于此，我重新整理了一下部署过程，尽量让大家跟着我的步骤一步步做就能成功部署Rin。

一、前提条件

前提条件仍然是有一个Github账号和Cloudflare账号，但官方文档中说Cloudflare账号需要绑定域名这并不是必须的。没有域名的同学也可以照着我的教程部署Rin。我会先讲解不使用域名的操作，最后再讲解绑定自己域名的方法。

二、fork rin项目到自己的Github账户

在Rin的Github项目页面点击 Fork 按钮 fork 出一个新仓库

什么选项都不要动，直接fork

三、环境变量准备

Rin需要用到很多的环境变量，而且需要填在三个不同的地方，建议大家专门准备一个文本文件填写需要用到的环境变量，而且分为三部分，初次部署时用到的环境变量具体如下（用<>代表需要在后面修改，不用的代表直接用这个值）：

1. Github Actions Repository secrets

CLOUDFLARE_ACCOUNT_ID=<>

CLOUDFLARE_API_TOKEN=<>

JWT_SECRET=<>

RIN_GITHUB_CLIENT_ID=<>

RIN_GITHUB_CLIENT_SECRET=<>

S3_ACCESS_KEY_ID=<>

S3_SECRET_ACCESS_KEY=<>

2. Github Actions Repository variables

DB_NAME=rin

FRONTEND_URL=<>

S3_ACCESS_HOST=<>

S3_BUCKET=image

S3_ENDPOINT=<>

S3_REGION=auto

WORKER_NAME=rin-server

3. Cloudflare pages设置

API_URL=<>

AVATAR=<>

DESCRIPTION=<>

NAME=<>

PAGE_SIZE=5

SKIP_DEPENDENCY_INSTALL=true

UNSTABLE_PRE_BUILD=asdf install bun latest &&

四、获取Cloudflare的账户id和Api token

Cloudflare的账户id获取方法：
点击左上角Cloudflare的logo回到控制台主页，看当前网址中位于https://dash.cloudflare.com/和/home/domains之间那一长串字符串就是账户id，复制这串字符串，填入到环境变量Github Actions Repository secrets部分的CLOUDFLARE_ACCOUNT_ID中

Cloudflare的Api token获取方法：
点击右上角头像 > 配置文件 > 我的个人资料 > API 令牌 > 创建令牌，模板选择编辑 Cloudflare Workers，选项示例如图：

id和token的用途是让 GitHub Actions 在部署的时候，有权限调用 Cloudflare 的 API部署代码到 Workers。因此该Token的TTL不需要太长时间，因为它只负责一开始的部署操作，只要部署成功，这个Token就没用了（除非后面还需要重新部署）。

生成API Token以后，把它填入到环境变量Github Actions Repository secrets部分的CLOUDFLARE_API_TOKEN中

五、创建R2存储桶（如果不使用Cloudflare R2则跳过）

1. 创建存储桶

Cloudflare 面板中点击 R2对象存储 > 创建存储桶，

填写名称，选择距离自己近的位置：

创建存储桶之后进入存储桶详情页 > 设置，复制 S3 API 地址，去除末尾的存储桶名称后填入环境变量Github Actions Repository variables部分的 S3_ENDPOINT，如

S3_ENDPOINT=https://8879900e5e1219fb745c9f69b086565a.r2.cloudflarestorage.com

注意末尾不要带上斜杠

2. 创建访问令牌

然后创建一个 API 令牌用于访问存储桶，具体来说，在R2管理面板点击管理API令牌

之后点击创建User API令牌

权限选择管理员读和写，TTL设置为永久

创建成功之后复制访问密钥ID填入到环境变量Github Actions Repository secrets部分的S3_ACCESS_KEY_ID中，复制机密访问密钥填入到环境变量Github Actions Repository secrets部分的S3_SECRET_ACCESS_KEY中

3. 设置公开访问地址

R2默认是无法通过公网访问的，必须绑定自定义域（针对自己有域名的用户）或者开启公共开发URL（针对自己没有域名的用户）。这里先讲解开启公共开发URL的方法。

进入创建的桶的管理面板，点击设置，找到公共开发URL，点击启用

输入“allow”确认开启：

然后把生成的URL填入环境变量Github Actions Repository variables部分的S3_ACCESS_HOST中

六、部署前端

登录 Cloudflare 控制台，进入 Workers 和 Pages 页面，点击创建应用程序，选择 Pages

点击连接到 Git 连接自己的 GitHub 账号并选择 Fork 的存储库

点击 开始设置 进入配置页面：

构建设置按照填入以下内容：

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

之后根据自身情况修改环境变量中Cloudflare pages设置的以下内容：

NAME=Xeu # 昵称，显示在左上角
DESCRIPTION=杂食动物 # 个人描述，显示在左上角昵称下方
AVATAR=https://avatars.githubusercontent.com/u/36541432 # 头像地址，显示在左上角，可以复制github的头像链接

这时候环境变量Cloudflare pages设置中应该只剩API_URL还没设置，随便填一个值，或者不填也行，等到后面后端部署完成了再改成真正的值。将Cloudflare pages设置里的所有内容一股脑复制到Cloudflare Pages的构建设置中：

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

点击显示的链接打开即可看见前端页面：

复制下这个链接，填入到环境变量Github Actions Repository variables部分的FRONTEND_URL中

到此为止，环境变量Github Actions Repository variables部分全部准备完毕

七、接入 GitHub OAuth

Rin通过Github OAuth实现登录，因此需要在Github新建一个OAuth应用。

打开 https://github.com/settings/developers ，选择 New OAuth App 创建一个新的 Oauth App，填入自己的应用名称（自己想填什么就填什么）与主页地址(和环境变量Github Actions Repository variables部分的FRONTEND_URL一致)，Authorization callback URL 这里先随便填一个https:// 开头的有效的网址即可（甚至可以是百度），后面等到后端部署完成之后会改成真实的地址

创建好之后会有Client ID信息和Client secrets信息

点击Generate a new client secret来创建一个client secret

之后，把Client ID复制下来填入环境变量Github Actions Repository secrets部分的RIN_GITHUB_CLIENT_ID中，把新生成的Client secret复制下来填入环境变量Github Actions Repository secrets部分的RIN_GITHUB_CLIENT_SECRET中

这时候其实环境变量Github Actions Repository secrets部分只剩下JWT_SECRET没填了，这个值没什么特别的要求，随便设置一个你喜欢的密码就行，这样环境变量Github Actions Repository secrets部分也全部准备完毕了。

八、部署后端

后端部署在Cloudflare Workers上面，但实际部署操作全部都在Github上进行，由Github Actions这个CI/CD工具调用Cloudflare Workers的API直接推送上去，完全不用在Cloudflare Workers的管理页面中操作。

配置 GitHub Action

通过在自己 fork 的仓库中 > Settings > Secrets and Variables > Actions > Repository secrets 点击 New repository secret可以添加一个新的Repository secret

将已经全部准备好的环境变量Github Actions Repository secrets部分的所有值一个个地全部添加到这里

设置完成后点击隔壁的Variables，相同的操作把Github Actions Repository variables部分的所有值也一个个地全部添加到这里

执行部署操作

在Github项目的Actions > Deploy > Run workflow点击Run Workflow按钮触发部署操作

部署操作完成后，在部署日志中可以找到后端地址：

也可以回到Cloudflare Worker管理面板，找到rin-server

进入设置，workers.dev的值也就是后端地址，但要记得在前面加上https://

把这个后端地址复制下来，填入到Cloudflare pages设置的API_URL中。注意：地址最后的斜杠要删掉

回到pages的部署页面，重新部署一次：

另外，这个后端地址在Github OAuth中也有用，记得我们一开始设置为百度地址的那个变量吗？从https://github.com/settings/developers 回到Github OAuth应用的设置页面，把Authorization call back URL改成后端地址/user/github/callback：,

到此为止，Rin就部署完成了，访问刚才的前端地址进入博客页面，使用Github账号登录，就可以编写文章了

九、绑定自己的域名

刚才的操作是针对没有自己域名的用户，现在讲一讲如何绑定自己的域名。首先，域名不一定非得在Cloudflare购买，在阿里云或者其他地方购买的域名都能用，但需要转移到Cloudflare下管理。转移域名到Cloudflare的方法不是这篇文章的主题，请自己网上查阅。

域名绑定到R2

在R2的设置中增加一个自定义域，推荐命名为image.你的域名这种格式

然后修改Github Actions Repository variables中的S3_ACCESS_HOST为该地址

域名绑定到后端服务

在Cloudflare Workers管理页面的rin-server的设置 > 域和路由 中添加自定义域，推荐命名为api.你的域名这种格式

然后用新的自定义域替换Cloudflare pages设置的API_URL。同时也别忘了替换Github OAuth中的Authorization call back URL（最后还是要保留/user/github/callback）。

域名绑定到前端服务

在Cloudflare Page管理页面的rin中 自定义域，点击设置自定义域

推荐命名为blog.你的域名这种格式

之后用新的自定义域替换Github Actions Repository variables中的FRONTEND_URL，同时替换Github OAuth中的主页地址。

以上域名绑定操作全部完成后，重新在Github Actions执行一下部署操作即可生效

之后就可以直接访问blog.你的域名来访问你的Rin博客啦

出现错误的情况

检查一下自己是否在配置的地址后面多加了斜杠