笨蛋ovo

笨蛋ovo

主页归档

Rin 博客简易部署教程

268
AI 生成的摘要
Rin是基于Cloudflare Pages + Workers + D1 + R2的博客，适合不想架设服务器、喜欢轻量化和云原生的人。需要准备GitHub和Cloudflare账号，配置前端和后端。前端部署在Cloudflare Pages，后端通过GitHub Actions配置Cloudflare R2存储桶。注意Rin功能和稳定性尚不完善，需要做好心理准备。

image.png

写在前面#

  • Rin 是什么
    一款基于 Cloudflare Pages + Workers + D1 + R2 全家桶的博客
    说人话：前端纯静态页面，后端提供 API 给前端拉取文章和配置信息，一切都在 Cloudflare 上完成

  • 为什么应该选择它
    无需服务器无需备案，只需要一个解析到 Cloudflare 的域名，且在一定的用量内完全免费（对于小型个人博客绰绰有余）

它适合哪些人#

  • 不想架设服务器、维护动态博客的人
  • 追求轻量化的人
  • 喜欢云原生的人
  • 希望一切皆可白嫖的人

它可能不适合的人#

  • 追求高大全的人
  • 既要又要事多的人
  • 已有较多博客文章需要迁移的人
    目前 Rin 仅支持从 Wordpress 批量导入文章，其他博客的数据迁移可能会较为繁琐

注意#

目前 Rin 属于刚起步阶段，功能还是稳定性上都稍不尽人意，请在部署前做好心理准备
如果在使用中遇到问题，先去 Issues 看看有没有人已经提出过

Cloudflare 需要绑定支付方式才可启用 R2 功能，你可以绑定 Paypal 或银行卡来激活 （料卡也不是不行，它不验卡的）

本文所使用的 Rin 为 官方版本，而本站所使用的为 个人修改版，由于 99% 的代码都来自 ChatGPT 而且实现方式都是依托答辩， 不会考虑将自己的版本提交官方。如果有需要可以自行部署
如果使用我的修改版遇到了问题，请先行联系我而不是官方仓库以免造成困扰

准备工作#

你需要先准备以下内容

  • 一个 GitHub 账号
  • 一个 Cloudflare 账号，同时已经解析自己的域名
  • 带上脑子和手还有耐心

正式部署#

首先打开 Rin 项目地址，点击 Fork 按钮
image.png
由于 Rin 是一个前后端分离的项目，我们需要分别部署前端和后端

前端#

打开 Cloudflare 控制台，进入侧边栏的 Workers 和 Pages，然后点击 创建
image.png
转到 Pages 选项卡，点击 连接到 Git
image.png
如果你之前没有使用过 Cloudflare Pages，那么这里会让你进行授权
授权之后，选择你所 Fork 的存储库，然后点击 下方的 开始设置
image.png
进入设置页后，填写以下内容

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

没有提到的项目保持默认值
填写之后点开环境变量（高级），添加以下变量（注意不要有多余的空格）

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

最后两行环境变量 SKIP_DEPENDENCY_INSTALL 和 UNSTABLE_PRE_BUILD 不要修改，按原样添加即可
image.png
点击 保存并部署，等待构建部署，不出意外的话约 30s 后即可部署完成
image.png
回到 Pages 管理页，转到 自定义域，点击 设置自定义域，绑定自己的前端域名
image.png
等待状态变为 有效，打开域名即可看见前端页面
image.png
至此，恭喜你，已经完成了一半的操作
其实真正复杂的是后端的部署

后端#

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

配置 Cloudflare R2 存储桶#

新建存储桶#

进入 Cloudflare 控制台，转到侧边栏的 R2，点击 新建存储桶
image.png
随意填入名称，然后点击 创建存储桶
提供位置提示 可不选，选择亚太地区也许能获得一部分速度提升（？
image.png

存储桶配置#

进入存储桶，点击设置，复制 S3 API
image.png
在下方 公开访问 中绑定一个域名
image.png
下方 CORS 策略，点击 添加 CORS 策略
注：这一步可能并不需要，但为了避免问题还是建议提前配置跨域
将下方的 https://blog.obdo.cc 自行替换为自己的前端域名

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

回到 概述，点击 管理 R2 API 令牌
image.png
选择 创建 API 令牌
image.png
名称随便填，权限选择 管理员读和写，然后点击 创建 API 令牌
image.png
记录下下方的 访问密钥 ID 和 机密访问密钥
获得令牌的人会获得账户的控制权，请不要将令牌随意发送给他人或公开
image.png

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

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

进入右上角的 我的个人资料
image.png
进入侧边栏的 API 令牌，点击 创建令牌
image.png
点击最下方 编辑自定义令牌 右侧的 开始使用
image.png
为令牌授予 Workers R2 存储 D1 Workers 脚本 的 编辑 权限
TTL 可以留空以永久生效，也可以设置一个时间（过期前需要重新生成令牌）
如下图所示，然后点击 继续以显示摘要
image.png
点击 创建令牌
image.png
记录下生成的令牌以便后续使用
获得令牌的人会获得账户的控制权，请不要将令牌随意发送给他人或公开
image.png

接入 GitHub OAuth#

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

进入 GitHub OAuth Apps，点击 New OAuth App
按照以下参数进行填写
Homepage URL 填写上面的前端地址
Authorization callback URL 填写 https://<你的后端地址>/user/github/callback
这里的后端地址即后面你的 Cloudflare Workers 需要绑定的域名，我这里以 https://rin.obdo.cc/user/github/callback 为例
image.png
点击 Register application
然后点击 Generate a new client secret，这里可能会需要进行二步验证
记录下生成的 Client ID 和 Client secret
image.png

配置 GitHub Actions#

打开自己 Fork 的 GitHub 仓库，依次转到 Settings、Secrets and variables、Actions、Variables
image.png
将以下的值，依次点击 New repository variables 并添加

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

添加好之后应该是这样的
image.png
然后转到 Secrets
image.png
将以下的值，依次点击 New repository secret 并添加
密码生成器

CLOUDFLARE_ACCOUNT_ID=Cloudflare 的 账户ID
CLOUDFLARE_API_TOKEN=Cloudflare 的 用户API令牌 值
RIN_GITHUB_CLIENT_ID=上文生成的 Github Client ID
RIN_GITHUB_CLIENT_SECRET=上文生成的 Github Client Secret
JWT_SECRET=加密用的密钥，你可以使用密码生成器随机生成一个
S3_ACCESS_KEY_ID=存储桶API的 访问密钥ID
S3_SECRET_ACCESS_KEY=存储桶API的 机密访问密钥

添加好之后应该是这样的
由于是 Secrets 所以不会显示值，添加时务必确认添加正确
image.png
进入你 Fork 仓库的 Actions 界面
第一次进入时页面上只会显示一个按钮，点击之后开启 Actions 功能
进入 Deploy 菜单，点击 Run workflow
image.png
静待约一分钟左右，等待出现绿勾代表部署完成
如果显示的是叉请检查环境变量的配置是否有误
image.png

对接前后端#

首先，提前祝贺下自己，你已经完成了前端与后端的部署，接下来只差最后一步，就是对接前后端了
进入 Cloudflare 控制台，转到侧边栏的 Workers 和 Pages
如果前面部署的一切顺利，这里你应该会看到一个名为 rin-server 的 Worker
进入 rin-server 的设置，转到 触发器
点击 添加自定义域，绑定自己的后端域名
点击 添加路由，依次加入 前端域名/sub/* 前端域名/seo/*
如下图所示
image.png
回到前面创建的前端 Pages 设置
将 制作 与 预览 的 APL_URL 均修改为后端域名
image.png
进入部署页，点击 重试部署
image.png
等待一到两分钟部署完成
打开你的前端域名，点击右上角的 GitHub 登录
第一个登录的人会成为站点的管理员
image.png
至此，大功告成，恭喜你拥有了一个 Rin 博客 🎉

此文由 Mix Space 同步更新至 xLog
原始链接为 https://blog.baka.plus/posts/tech/rin-blog-deployment-tutorial

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。