很多人用 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/