image

永远年轻,永远热泪盈眶

预览:AIOVTUE’S blog

本博客根据开源博客Rin部署

Rin 是一个基于 Cloudflare Pages + Workers + D1 + R2 全家桶的博客,无需服务器无需备案,只需要一个解析到 Cloudflare 的域名即可部署

我选他的原因也很明显,他可以实现动态博客,不用像一般的静态博客一样,需要本地编译发表文章,他可以直接线上发布,很好用!(你说为什么不直接用动态博客,没有服务器呗),缺点就是,部署稍微麻烦点这里稍微介绍一下难点和大体部署思路:

后端

部署需要一系列变量,都可以在github设置,很方便

在自己 fork 的仓库中 > Settings > Secrets and Variables > Actions > Repository secrets 点击 New repository secret :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

CLOUDFLARE_ACCOUNT_ID=<你的用户ID>

CLOUDFLARE_API_TOKEN=<你的令牌>

RIN_GITHUB_CLIENT_ID=<你的GithubClientID>

RIN_GITHUB_CLIENT_SECRET=<你的GithubClientSecret>

JWT_SECRET=<JWT 认证所需密钥,可为常规格式的任意密码>

S3_ACCESS_KEY_ID=<你的S3AccessKeyID>

S3_SECRET_ACCESS_KEY=<你的S3SecretAccessKey>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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=<S3 存储桶名称>

S3_REGION=<S3 存储桶所在区域,如使用 Cloudflare R2 填写 auto 即可>

S3_ENDPOINT=<S3 存储桶接入点地址>

S3_ACCESS_HOST=<S3 存储桶访问地址,末尾无'/'>

难点也在这里,这里需要的一系列id可key包括Github OAuth,cloudflare api,cloudflare R2,获取倒是不难,难点需要交叉获取,例如·需要获取github oauth 需要前后端地址,但获取前后端地址需要先获取github oauth,这时候需要先填别的获取到id,部署完成拿到地址后再改回来,其他id类似,全部写完部署也就差不多了,写完之后回到github仓库的actions点击部署即可,后端到此部署完成。

前端

前端很简单,直接cloudflare page 选择仓库,填写变量:

1
2
3
4
5
6
7
8
9

框架预设:无

构建命令:bun b

构建输出目录:client/dist

路径:<留空>

环境变量:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

到此前端也好了,因为作者一直在更新,所以只写了大致思路,具体部署教程参考作者

如果你觉得我这篇教程看不懂1,我也推荐你去看这个大佬的教程:笨蛋小破站