Using Github Issues to host a blog #1
Description
It's about time to start my own tech blog!
At first glance, Jekyll is quite a good choice, but it's a little bit heavy in some aspects (it uses Ruby and needs to commit every time when post). As a minimalist, I decided to utilize Github GraphQL API v4 as data source and Github Pages to host frontend code. More specifically, this blog use a repo's issues as blog posts and a simple React Web App to load and present these issues. It's totally free, highly configurable and has a in-place comments board.
Tools & References :
- Create React App Set up a React App.
- Github GraphQL API v4 Github GraphQL API doc.
- Apollo Client A GraphQL client lib.
- gh-pages To publish files to a gh-pages branch on GitHub automatically.
- spa-github-pages Make Github pages support SPA.
- utterances A comments widget built on GitHub issues.
TODO:
- Load comments.
- Add some style.
- Copy 404.html from index.html to solve SPA refresh issue.
- Config About page.
- Only show issues using a specific label?
- Filter by tag, refer to https://v8.dev
- Lazy load comments. (Using IntersectionObserver)
- Leverage Service Workers.
- Add pagination. (Maybe when there are enough posts to be paginated)
- Fallback to Github issues if it hits rate limit. (Using iframe?)
Update:
After being astonished by Dan's blog's overreacted outstanding performance brought by PWA technology, I decided to see if there are anything I can do to improve mine. Well, the solution is easy, just using Gatsby.js like how Dan did it.
The official starter gatsby-starter-blog use markdown files from source code as content source. However, I still like to use issues as content source. Thankfully Gatsby.js is flexible enough to source from Private APIs. Happy ending!
Update 07/2023:
4 years later, npm install failed... Rewrote it in Next.js the coolest boy on the street.