这是一篇铺垫文,Blog 脚手架正在编写中,支持 RSS 订阅,自动生成微信公众号文章等,欢迎关注。
- 一键部署脚手架(构建中)- github.com/lencx/GD
- 网站源码 - github.com/lencx/z
- 网站体验 - lencx.tech
我是一个喜欢折腾的人,虽然文章没写几篇,但是 Blog 框架没少折腾,刚入行那会用蹩脚的前端技术自己实现,就感觉越花哨,越能证明自己的实力,各种大投影,大圆角,奇怪的字体... 随着认知的提升,懂得了内容才是核心,页面开始变得不那么花哨,使用 Hexo,Gatsby,自己实现 nofwl 主题。再到后来的 vuepress, vitepress 和 mdBook。全都被我换了一遍,总是感觉不合自己胃口,于是就萌生了自己写 Blog 框架的想法。
需求背景
我想做的 Blog 框架满足以下条件:
实时性
- 可以随时随地编辑,与平台无关,同时支持手机,电脑,本地,在线编辑等所有权
- 我对数据的权限越大越好,这样我就可以根据自己的需要去渲染页面模版公众号
- 可以生成微信公众号文章(微信链接不支持跳转,需要生成脚注或二维码)RSS
- 支持 RSS 订阅
技术栈
Blog 框架的搭建本身也是学习的过程,技术栈一定要前沿,因为我喜欢折腾。结合上面的需求背景,经过多方面比较,最终选择了 GitHub Discussions
作为数据源。vite + react
作为 Blog 基本框架。
最终用到的技术包含:
- github discussions api - 文章数据源,因为是接口请求,所以可以满足文章实时性及数据所有权需求
- github actions - 执行定时任务(生成 RSS 文件,JSON 数据文件,微信文章等),及网站部署
scripts
- 定时任务需要执行的脚本命令,用来满足公众号文章及 RSS 需求- @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 参数。