Unleash Your Dev Blog: Write More with GitHub Issues as Your CMS

In this article, I'm going to show you how to leverage GitHub Issues as a CMS, and integrate it into your Next.js blog 🚀

I recently migrated my open-source portfolio website from using Contentful API as a CMS (Content Management System) to GitHub Issues instead.

Here's the detailed PR I made in my portfolio repo to migrate Contentful API to use GitHub Issues if you're interested: abdulrcs/abdulrahman.id#17

I'm inspired by the blog from swyx.io that uses GitHub issues and comments, as mentioned here.

The friction of writing a GitHub issue is less daunting than using a fully-fledged CMS like Contentful because you have to log in to their page, navigate to the content section, host the images yourself, etc.

This will (hopefully) lead to more writings in the future 🤞

We can use a GitHub API wrapper using renatorib/github-blog to fetch our GitHub Issues.

Note: GitHub API is limited to 5000 requests/hour, so we need to statically render the blogs using getStaticProps and getStaticPaths to make it scalable, more on that later.

First, generate the GitHub token here.

After that, create new labels in your issue named type:post, state:published, and state:draft.

Then, we can create a GitHub issue for our blog post! Don't forget to add a front matter in the issue to create a slug for our post URL like this:

---
slug: your-slug-title
---

export async function getStaticProps() {
  const blog = new GithubBlog({
    repo: 'your-github-username/your-repo',
    token: process.env.GITHUB_TOKEN,
  })
  const posts = await blog.getPosts({
    query: {
      author: 'your-github-username',
      type: 'post',
      state: 'published',
    },
    pager: { limit: 10, offset: 0 },
  })

  return {
    props: {
      posts: posts.edges,
    },
  }
}