Xeu
4 分钟阅读

Rin - 全栈 Cloudflare 的个人博客项目

# 博客
文章目录

958bc2c1-1703-4127-920c-853291495bdc.jpg

介绍

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

唯一的缺点便是减速CDN特有的国内很慢了，不过对于博客来说也是能够勉强接受的

特性

  1. 支持 Github OAuth 登录，默认第一个登录的用户拥有管理权限，其他用户均为普通用户
  2. 支持文章的写作与编辑
  3. 支持本地实时保存对任意文章的修改/编辑且多篇文章互不干扰
  4. 支持设置为仅自己可见，可以充当云端同步的草稿箱或者记录隐私性较强的内容
  5. 支持拖拽/粘贴上传图片到支持 S3 协议的存储桶并生成链接
  6. 支持设置文章别名，可通过形如 https://xeu.life/about 链接访问文章
  7. 支持文章不列出在首页列表中
  8. 支持添加友链，同时后端每间隔 20 分钟定期检查更新友链可访问状态
  9. 支持回复评论文章/删除评论
  10. 支持通过 Webhook 发送评论通知
  11. 支持自动识别文章中的第一张图片并作为头图展示在文章列表中
  12. 支持输入形如"#博客 #部署 #Cloudflare"之类的标签文本并自动解析为标签
  13. 支持日夜间模式

部署

回头重新看了下部署文档，确实有很多地方写的很模糊，后续会抽空重新出一篇部署文档

仓库页面：https://github.com/openRin/Rin

回复

@xialaup

cdn优选呢?

  1. cdn优选已经有了：针对国内配置 CDN 加速 Cloudflare Pages 访问

评论还要登陆然而却没有引导我找半天原来用github登陆。。不够私密

  1. 目前确实缺少足够的引导，免登录直接输入信息回复也有在计划中，只是目前待完善的地方还很多暂时还没有开始做

@sundys

要是能支持像右边显示段落大小标题就完美了

2024.6.9更新：最新分支已经支持 TOC 了

@Cigar

什么时候可以推出英文版本呢

目前已经将支持 i18n 放入下一个大版本的计划之中了

后记

项目起因

自已之前的博客用的是静态站点生成器那一套东西

好处就是不需要服务器，随便找个静态站点托管就能搞定

坏处也很明显：由于自己频繁的杀系统，一些不重要的/云端有的数据我都不会保存，以至于绝大部分时间我的本地其实根本没有博客的仓库

要写新博客的话还要克隆下来，安装环境 ，久而久之懒得折腾博客就基本不更新了

谁还没有一个手搓博客的梦想呢

前段时间稍微空闲了一阵，于是又动起了搓博客的心思

当时想的是试吃一下据说很快~~~的 Bun ，看了一圈 Bun 生态中的 Web 框架，选择了 ElysiaJs

当时选择他的原因很简单：它的官网比隔壁 Hono 好看

741c7f099e5e18ed2207d71b236260ad.jpg

现在看来，当初选择 Bun 并使用 ElysiaJS 真的为我节省了很多时间

项目最开始也是中规中矩的一个普通的带前后端的全栈项目，后端托管在自己的服务器上

后面发现自己用的后端框架可以迁移到 Cloudflare Workers 上面

本着有羊毛不薅不是人的精神，于是花了几天时间把后端代码基本全部翻新了一遍

再之后就是索性全扔 Cloudflare 上面了，使用 D1 替代之前的 sqlite ，R2 替代 S3 用来存储图片。

好处就是 Cloudflare 提供的免费资源完全足够托管个人博客，不需要掏一分钱

坏处就是国内访问可能比较慢，

目前的解决方案是针对前端国内再接一个 CDN ，将国内的流量全部重定向到国内的 CDN 上，能够一定程度改善访问速度。同时国内的 CDN 做区域白名单只允许大陆访问，减少被打爆的风险。

话说我最开始是奔着试吃 Bun 来着？

后记2

前两天觉得项目已经基本能看了

于是花了些时间完善整理了部署文档，就去 Github 上直接搜名为 “开源自荐” 的 issue，找到对应的仓库去投稿自荐

也成功被收录进《科技爱好者周刊》第 303 期

效果最好的是我在 V2EX 自荐的帖子 ，收获了很多关注和 Star

同时被其他专门做开源项目的博主看到了，进行了二次推荐，比如：Geek 图片.png

可以说目前整个项目大部分流量都来自于 Geek 的推： 图片.png

万分感谢！

博客评论区不处理部署问题，有任何问题请前往 GitHub Issue 查找相关问题或创建新 Issue 寻求帮助

评论

76 条留言
  1. Mikka

    我的中文很差。 但我想谢谢你！！ 它看起来很有意思

  2. jmj

    被后端搞懵了...

  3. Fred

    前端地址，后端地址，有啥区别？

  4. Cigar

    什么时候可以推出英文版本呢

  5. Hao Jiakang

    什么是后端地址？从哪里来，做到一半跟不下去了

  6. yanyaoli

    大佬🫡

  7. Meng

    确实。按照文档一步一步来，最后还是部署失败了。 有很多地方模糊、有歧义。 比如「后端地址」和「前端地址」 作者有空的话，用一个小白的视角，录一个100%成功的操作视频就好了。 先谢过。

  8. jack

    不错的

  9. 黯淡人影

    我也部署失败了，很奇怪。按着步骤来的，首先网页的title没有根据环境变量改变。另外github登录点进去是访问/usr/github 网页内容： 404: No such page!查看令牌无访问，确认自己回调地址没填错。 还有一些我觉得疑惑的 1.前端地址和后端地址是能够分开来的吗？弄不清楚教程意思。 2.Actions secrets and variablesy的变量有必要设置吗直接触发有无影响？没设置的时候触发一次，用默认值的也触发了一次，workers列表多了一个。 3.pages里面的环境变量是一定要加密吗？

  10. Xeu

    大家有任何部署问题的话欢迎移步至 Github 仓库创建 issue 提问，评论目前还不能很好的工作，不能及时收到大家的评论 If there is any deployment question, please go to the Github repository to create an issue. Comments are not working well at the moment, so I cannot receive your comments in time.

  11. Zijing Zhang

    很棒的想法

  12. sundys

    要是能支持像右边显示段落大小标题就完美了，阅读时可以直接跳跃到想的段落， 例如这个博客文章，https://miqi.eu.org/posts/Debian-11-%E5%AE%89%E8%A3%85-Docker-Engine/

  13. xialaup

    虽然但是，cdn优选呢?另外没有feed感觉别扭，评论还要登陆然而却没有引导我找半天原来用github登陆。。不够私密

  14. jzing

    历时2天的学习，刚刚部署成果。感谢你相对详细的教程，这是我第一次用赛博菩萨部署一个page。

    1. Xeu

      回复 jzing

      @jzing 能看到大家部署成功我也很开心的！

  15. Fletcher Wehner

    前端弄好了,卡在了后端部署哪里.看不懂了.能不能出个图文的教程,文字描述有些有歧义.先感谢.顶一下

    1. Xeu

      回复 Fletcher Wehner

      @Fletcher Wehner 图文教程可能得更晚一点了，大概得再等两周

  16. 苹果派派

    貌似现在favicon图标无法更换？

    1. Xeu

      回复 苹果派派

      @苹果派派 favicon 不太好从环境变量配置，现在的解决方案是克隆仓库以后手动替换 client/public/favicon.png 文件

  17. Nick8626

    后端部署哪里给个详细教程吧，卡在后端了。

  18. Goldeye0351

    好棒

  19. Allen

    话说大佬的博客支持RSS订阅吗？

    1. Xeu

      回复 Allen

      @Allen 已经支持了哦，底部就有订阅链接

  20. xfgyg

    没搞定后端，能出个详细点的教程吗

  21. rohit

    cf那套怎么上手的

  22. duannian9527

    按照视频执行action，直接访问worker的dev链接出现1101问题

    1. duannian9527

      回复 duannian9527

      已解决，是我没有把变量加全

  23. Chisato22

    感谢大佬的项目 另外自己写了一个图文教程，有需要的可以来看看 https://blog.obdo.cc/feed/10

  24. muchen100

    大佬，时间轴手机端加载不出来

  25. ethan

    感谢！已经用上了

  26. wrisin

    首先夸一下博主，太棒了！目前已经基本完成搬家，这个项目弥补了之前hostloc论坛大佬做的cloudflare blog中很多的坑，相对比而言：第一个就是登陆使用github接口，解决了登陆安全问题，第二个就是增加了搜索功能，cfblog是没有的，第三个是评论区，评论内容保存在本地（第三方接口的评论区真的很难用），第四个就是文章迁移，博主增加了导入wp xml功能，方便搬家，第五个是我觉得最棒的一点，就是图片上传功能，作者的教程是对接cf的r2存储，发现开通这个功能要绑定信用卡，所以转战七牛云，目前七牛云有海外节点，绑定域名不需要备案，同时兼容s3 api，经过测试完美兼容，这一功能解决了图片存储的痛点，方便我搬家，第六个我觉得很爽的前端小细节就是发布时间和更新时间分别显示，顺带提个小建议，发布时间可以支持手动输入最好了，方便我手动搬家qaq。

    1. Xeu

      回复 wrisin

      @wrisin 现在是有自定义发布时间的

      1. wrisin

        回复 Xeu

        @Xeu 还没睡呢，佬，markdown编辑器能集成一个不～

        1. Xeu

          回复 wrisin

          @wrisin markdown编辑器现在不是有吗

          1. wrisin

            回复 Xeu

            @Xeu 带一排“加粗”“添加链接”小按钮的那种～～还有现在文章换行要回车两下，回车一下文章显示是没换行的。

  27. wrisin

    @Xeu 目前webhook发送post请求内容为{"content": "消息内容"}，而IOS端bark app的post请求参数为body，title等，我发现worker.js里面有相关代码可以修改请求参数，所以想直接从cloudflare在线编辑rin-server代码，但是考虑到之前直接部署生成，我怕直接改对程序有影响，请问我如何优雅的使用bark app，话有点密了，大佬莫嫌烦，bark文档：https://github.com/Finb/Bark/blob/master/README.md

    1. Xeu

      回复 wrisin

      @wrisin 在自己克隆的仓库修改 server/src/utils/webhook.ts 第 16 行的格式就行了

  28. 雅丶涵

    cf 的 13335 因为是默认公开使用的，所以握手的时候会有比较久的时间 cf 还有一个 asn 握手时间没那么久，但是需要进行自选操作 对了，你说的国内加速更好的方法也是使用分区域 DNS 解析才能得到最好，cf 提供的 saas 可以外挂域名，不需要使用 cf 的 DNS

  29. zhongziso

    大佬，博客搭起来了，但是这个文章里面的绿色，红色，蓝色这些怎么写的 还有就是写作的时候怎么指标显示的位置是错位的，换了游览器也是一样 找了一圈没找到飞机群，只能来这问你了

  30. Matilda Pescott

    挺有趣的。 比之前别人做的那个UI美观更现代一些

  31. Matilda Pescott

    部署文档对于小白 多操作几次就ok 作者编写文档顺序有误所以上下要大致浏览一遍再操作 不然会混乱。 总体而言有长时间部署worker page的来说还是很简单的。

  32. 浪子

    大佬,导入wordpress用不了是为什么

  33. 王云子

    好厉害👍🏻

  34. ZLY3439569179

    博主，请问你的文章中的设置字体大小、加粗，还要右边的目录部分是怎么设置的？最后那个设置里面导入WordPress导出的XML 文件这个有什么要求吗？

    1. Xeu

      回复 ZLY3439569179

      @ZLY3439569179 在 Github 提 issue 哦，博客评论区不方便交流

      1. ZLY3439569179

        回复 Xeu

        博主 是在 https://github.com/openRin/Rin/issues 中 New issue 吗？

        1. Xeu

          回复 ZLY3439569179

          @ZLY3439569179 是的

          1. ZLY3439569179

            回复 Xeu

            博主 我已经 New issue 了，希望博主和各位大佬，有空的话，帮帮忙。o(^▽^)o

  35. props

    感谢作者提供的CF全家桶建站的全新体验！ https://usehooks.site 新增（大部分UI）：kbar md-editor-rt shacn-ui pushover Google登录..

  36. xuzhou.hou

    优秀～

  37. BurtSweet

    好不容易部署完了..但是点击登录就提示state mismatch到底是哪里出问题了呢.....

    1. Xeu

      回复 BurtSweet

      @BurtSweet Pages 的环境变量中 API_URL 末尾不能有 `/`，去掉后重新部署应该就能好

  38. Xeu

    博客评论区不处理部署问题，有任何问题请前往 GitHub Issue 查找相关问题或创建新 Issue 寻求帮助

  39. dragon

    非常感谢，做的很棒！

  40. who am i..?

    very nice work ♥

  41. 江文宇

    首先感谢大佬，我部署成功了，但是我发布不了带有图片的文章，我在写作的时候上传图片就一直卡在上传中，可以告诉我怎么解决吗？

  42. Yongyong Wu

    非常不错，我本来是用microfeed，现在切换到rin啦

  43. QyJoy

    Tbh this stuff is seriously cool. Been tinkering with Cloudflare R2 and D1 lately still feels like unexplored territory, barely anyone’s scratching the surface.

  44. diggooltd

    动态是怎么弄出来的？我怎么没有？

  45. Robert Wu

    感谢分享! 请问referring sites看流量来源是Google Search Console还是自己部署的其他服务呢? Google Analytics/ MS: Clarity?

  46. Zhedong Cen

    泰酷辣！膜拜大佬！

  47. Jazper Li

    感谢，希望后续持续维护更新。

  48. Zhedong Cen

    我重新梳理一下了部署过程，写了一篇step-by-step的详细指南，供大家参考：https://blog.ecust.online/feed/rin-deploy-tutorial-zh。 I’ve reorganized the deployment process and written a detailed step-by-step guide for your reference：https://blog.ecust.online/feed/rin-deploy-tutorial-en

  49. nicad

    感谢大佬，下一步有考虑接入大模型做总结吗

  50. Murasame

    大佬有考虑添加其他评论系统吗？比如twikoo

  51. BWTIA

    牛逼大佬

  52. 真寻

    大佬们，想给博客添加音乐播放器要改哪个文件？ 以及，播放器ui去哪里找

  53. kerwin1727

    interesting

  54. CF1349

    感谢作者，另外提问一个，是否能添加adsense功能

  55. 怸歪

    大佬，请问下，为什么我的朋友们，自己的域名显示暂时离开命名可以访问啊？

  56. 黄j

    大佬按照流程为什么添加图片的时候显示s3错误

  57. Moses

    特来感谢Rin大佬的开源项目，无服务器部署个人博客，全程无成本几乎，🐂

  58. xiaoai

    感谢作者。如果打算做google adsense,有没有通过网站认证的简单方法，

  59. 楪

    会不会有恶意刷屏评论，消耗免费额度

  60. 小学

    不错

  61. 小小

    有点慢