永远年轻,永远热泪盈眶
预览: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
SKIP_DEPENDENCY_INSTALL=true
UNSTABLE_PRE_BUILD=asdf install bun latest && asdf global bun latest && bun i
|
到此前端也好了,因为作者一直在更新,所以只写了大致思路,具体部署教程参考作者
如果你觉得我这篇教程看不懂1,我也推荐你去看这个大佬的教程:笨蛋小破站