基于 GitHub Discussions 的 Blog 框架

1,336 阅读3分钟

这是一篇铺垫文,Blog 脚手架正在编写中,支持 RSS 订阅,自动生成微信公众号文章等,欢迎关注。

我是一个喜欢折腾的人,虽然文章没写几篇,但是 Blog 框架没少折腾,刚入行那会用蹩脚的前端技术自己实现,就感觉越花哨,越能证明自己的实力,各种大投影,大圆角,奇怪的字体... 随着认知的提升,懂得了内容才是核心,页面开始变得不那么花哨,使用 HexoGatsby,自己实现 nofwl 主题。再到后来的 vuepressvitepressmdBook。全都被我换了一遍,总是感觉不合自己胃口,于是就萌生了自己写 Blog 框架的想法。

需求背景

我想做的 Blog 框架满足以下条件:

  1. 实时性 - 可以随时随地编辑,与平台无关,同时支持手机,电脑,本地,在线编辑等
  2. 所有权 - 我对数据的权限越大越好,这样我就可以根据自己的需要去渲染页面模版
  3. 公众号 - 可以生成微信公众号文章(微信链接不支持跳转,需要生成脚注或二维码)
  4. RSS - 支持 RSS 订阅

技术栈

Blog 框架的搭建本身也是学习的过程,技术栈一定要前沿,因为我喜欢折腾。结合上面的需求背景,经过多方面比较,最终选择了 GitHub Discussions 作为数据源。vite + react 作为 Blog 基本框架。

最终用到的技术包含:

  • github discussions api - 文章数据源,因为是接口请求,所以可以满足文章实时性及数据所有权需求
  • github actions - 执行定时任务(生成 RSS 文件,JSON 数据文件,微信文章等),及网站部署
  • scripts - 定时任务需要执行的脚本命令,用来满足公众号文章及 RSS 需求
    • rgd - 🍱 GitHub Discussions API - RSS & JSON
    • woap - 🌀 GitHub Discussions 生成微信文章 (支持二维码及脚注形式)
  • @apollo/client - 是一个 JavaScript 状态管理库,能够使用 GraphQL 管理本地和远程数据。使用它来获取、缓存和修改应用程序数据,同时自动更新 UI。
  • vite - 下一代前端开发与构建工具
  • react - 用于构建用户界面的 JavaScript 库
  • recoil - React 状态管理库

常见问题

关于 Github Token

Blog 需要满足任何人在不经过 GitHub 登陆,或授权就可以访问网页,所以需要提供公共 Token 来请求数据。因为 GitHub Token 存在每小时接口请求次数限制,超出请求次数会报错。官方文档建议缓存接口请求,但是整个 Blog 托管于 GitHub Pages ,并不能缓存接口请求。

解决方案

使用 rgd 将接口数据生成 JSON 文件。当网站请求 GitHub API 超过次数限制,会自动降级请求部署后项目中的 json 文件。同时支持两种模式是因为:请求接口网站是实时的(体验效果好),请求的 json 文件是非实时(每天跑一次定时任务)。

关于 RSS

使用 rgd 生成 RSS 文件,每天执行一次定时任务(非实时)。

关于公众号

使用 woap 生成微信文章,每天执行一次定时任务(非实时)。Discussions 标签满足 woap 的标签规则就会将该文生成为微信文章。

标签规则
  • wechat-link - 微信链接转为二维码,适合多链接场景
  • wechat-post - 微信链接转为脚注,适合多文字场景

更多使用规则请查看 woap 参数