A Blog Engine Based on GitHub Issue With the Power of Next.js ISR

djyde commented 2 years ago

path: introducing-sairin

Desktop - 1 (1)

TLDR: Step by step guide

Background

Many people are using GitHub Issue for blogging. Because you can just create an issue and write some markdown to post some content. When you want to inject an image, just paste an image on the editor and it can be uploaded to GitHub. No need to worry about the static files hosting.

Some tools use GitHub API to generate a static blog. This is fine but when a post is updated, we need to redeploy the whole project (although we usually have automation to do this).

I came up with an idea that using Next.js to generate a blog, fetch blog posts from GitHub issues from a repository. But the problem is: if we put the GitHub API call on every blog post page request to fetch the issue content, it will reach the API rate limit soon. It doesn't scale.

Fortunately, Next.js has a special data fetching policy called Incremental Static Regeneration, it means we can generate static pages first, and update them on demand.

For example, we can set the post page update in every 1 minutes by using revalidate in getStaticProps:

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
  }
}

It means that suppose we have 50 posts, every hour will call the API 3600s / 60 * 50 issues = 3000 times, which is under the 5000 request per hour rate limit.

The benefit of using GitHub issue as the content base over markdown files on project is GitHub issue comes with reaction and comments that we can show on the blog post (this feature is still working in progress).

Step by step guide

Before creating a Sairin blog, you need to generate a personal access token with the repo scope:

Then click the deploy button below:

This button will direct you to create a new project on Vercel based on Sairin template.

Enter a project name and click create, then enter the personal access token you generated before and click deploy, it will begin to deploy your blog.

After building you can open the repo that was created by Vercel on the dashboard, all your blog posts will be fetched on this repo:

Publish your first post 🚀

To publish a post, just create an issue on the repo. Notice that you need to add a frontmatter on the top of the content, to specify a permalink of your post, for example:

---
path: introducing-sairin
---

Issues on the repo would not be published by default unless you add a label published to the issue:

Now, the first post should be published. You can go to the domain that Vercel gave to your project to see your blog post. No need to redeploy the project.