很多人用 GitHub issue 当作自己的博客，于是我想到可以用 Next.js 通过 GitHub API 生成一个基于 GitHub issue 的博客。
然而这样做的问题是 GitHub API 有请求 rate limit, 通过 access token 请求的 rate limit 是 5000/小时，因此对于博客网站来说，如果每次有用户访问就请求一次，当访问量上来后，很快就会达到请求上限。
如果换一种思路，用 Next.js 的 getStaticProps 来在 build time 就把静态页面生成出来，就能解决这个问题。然后这样的结果是每次修改 issue, 都需要重新构建部署。
还好 Next.js 有一个特殊的 data fetching 机制叫 ISR, 也就是按需重新生成静态页面。比如，如果我在获取 issue 信息的页面的 getStaticProps 中返回一个 revalidate, 就可以让部署在 Vercel 上的 Next.js 页面按照一个频率自动更新这个静态页面：
export async function getStaticProps() {
const res = await fetch('https://api.github.com/xxx')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 1 minutes
revalidate: 60, // In seconds
}
}
于是，基于这个机制，我写了 Sairin, 你可以通过一个按钮直接创建一个基于 GitHub issue 的博客，并部署到 Vercel:
在部署前你需要申请一个 GitHub personal access token 在创建项目时填入
输入一个项目名，和你申请的 GitHub access token, 点击 deploy, Vercel 会帮你创建一个 repo, 并部署 Sairin.
部署完成后，就可以进入 Vercel 帮你创建的 repo, 在 issue 里写下你的第一篇博客文章：
需要注意的是，在文章的开头，你需要写入 frontmatter, 来指定这篇文章的路径：
---
path: my-first-post
---
正文内容
这样就代表你可以通过 https://your-domain.com/my-first-post 访问你的这篇文章。
完成文章后，就可以发表。发表的方式是在这篇 issue 加入一个 published 的 label:
等待一分钟，再次访问你的博客地址，就可以看到发布的文章。
Sairin 支持 RSS 和自定义主题，详细的文档可以参考 https://github.com/djyde/sairin
这是用 Sairin 生成的 Sairin 自己的博客 http://blog.sairinjs.com/
Select Language