Docusaurus 自动化生成文章总结

先看效果

最近谷歌的 AI 模型 Gemini 发布了，本着白嫖的原则，准备给我的博客加上 AI 总结的功能。由于我的博客是一个静态网站，没有服务端并且我也不想引入服务端，所有没有办法在上面写接口。于是在调研了一些方案后决定在 build 时对文章进行总结并将总结的内容插入到文档的 front matter 中，这样就可以在没有服务端的情况下直接读取到总结的内容了。

方案

我一共想到了几种方案

1. 通过 Github Action 监听 push 事件，然后在 Action 中调用 Gemini API 生成总结，最后将总结的内容插入到文档的 front matter 中。
2. 通过 Github Bot 监听 Github Webhook 事件，然后在 Bot 中调用 Gemini API 生成总结，最后将总结的内容插入到文档的 front matter 中，由 Bot 提交 PR，整个工作流比较顺滑，你只需要 Review 并合并 Bot 的 PR 即可。
3. 直接在页面上请求 Gemini API 生成总结然后展示在页面上。

首先第三种方案由于博客是静态页面，出于安全考虑没办法将 API KEY 直接发送给客户端，所以这种方案直接排除了。 第一种方案虽然可行但是没有第二种方案能实现的功能多，并且第二种方案社区有成熟的框架 Probot 使用，所以我最后选择了第二种方案。

于是我自己开发了一个 Github 机器人来完成自动化总结的功能， 项目地址

部署机器人

本来想使用 Vercel 部署的，可是 Vercel 的免费版的 Serverless Function 有 10s 的超时时间，而总结的时间是远超过 10s 的，我总结 55 篇文章大概耗费了 3 分钟。在调研了一些服务后，我最后使用了 Zeabur 的免费计划来部署，不过它的免费计划针对一些服务可能会将其无故关闭，后面看是否能找到一些能够白嫖的服务。

部署到 Zeabur

直接使用下面我创建好的模版

创建 Github App

首先将项目代码拉取下来，然后执行以下命令

npm install

npm start

打开 http://localhost:3000 注册属于你自己的 bot

完成这些步骤后在你的项目中会出现一个 .env 文件

将这个文件中的环境变量内容复制到 Zeabur 的环境变量中

获取 Gemini API KEY

打开地址

将这个 API KEY 添加到 Zeabur 的环境变量 GEMINI_API_KEY 中，完成这些操作后 重新部署一次

获取 Webhook 地址

将该地址回填到 Github App 的 Webhook 地址中。

1. 访问 https://github.com/settings/apps
2. 找到你刚才创建的 Github App，点击 Edit
3. 填入你的 Webhook 地址
4. 点击保存

到此所有安装工作全部完成

触发总结所有博文

首先新建一个 issue，然后给你这个 issue 添加一个 summarizer label，这样机器人就会开始总结你的博文了，具体完成的速度看你的仓库中有多少文章，我 55 篇文章大概花费了 3 分钟时间。

添加总结组件

安装三方库

yarn add typed.js

首先确保你之前 Swizzling 过 DocItem/Layout 和 BlogPostPage 组件，具体步骤参考 这篇文章，这里我不在过多赘述。

具体修改查看 这个提交

总结

目前由于手中没有可用的服务器，所有只能使用 Zeabur 的免费计划来部署机器人，后期可能会调研如何使用 Github Action 运行。

关于功能需求，后期可能会增加自动翻译工作流。