My Takes on Blogging with GitHub

[9am]

Is it possible to host a tech blog with GitHub only?

[9am]

I picked up blogging at the beginning of this year. And I decided to use GitHub Pages & GitHub Issues to host the new blog. Here is how I do it.

Why writing a blog?

Video is so popular now, if you want to learn something there must be a video that teaches how to do it. But when comes to technical things, I know for sure that text is more efficient than video.

So generally this blog is about things I've learned and done at the moment. And if it helps others as well, I'll be really happy.

Why prefer 'article' over 'video'?

When reading an article, my brain abstracts the paragraph into blocks of information and chains them together quickly, like a content table, so that I can skip the things and focus on the details as well. However, although there is a way to 'take a glance' at a video, still, a lot of information is missing.

Why GitHub pages & GitHub issues?

For a blog, I need:

• A home page to list all of the articles.
  • Full Control
• An article template which presents the blog content.
  • Tag
  • Comment
• A CMS system to manage the articles.
  • Markdown
  • Access control
• The Service
  • Stable
  • Secure
  • Fast
  • Easy

Except for the home page, I don't want to build other features myself. So after checking out Github Pages, I think it's perfect for my situation.

GitHub Issues supports markdown and it provides tagging and comment features out of the box, and it performs as a CMS naturally. It's all controlled by the GitHub account, so no new account registration is needed, Nice!

GitHub Pages is perfect for a home page. I only use it as a static server, and my home page is an all-in-one HTML, so there is no extra request sent to speed up the loading.

All I need to do is create a new repo for the blog. But the problem is: how to fetch the information of articles if there are changes about them, like add/remove/update.

Why not use cloud service or VPS?

I've been doing this before. Surely everything feels more 'controllable', but all the options make it complicated, I just want to focus on the content instead of the technology.

Why not serve the article on GitHub Pages too?

This means if one of the articles updates, the whole website needs to be deployed again. And the repo size will grow fast.

GitHub API & GitHub Actions

Luckily, GitHub API supports fetching issues data of repo, and provides details of the issue so I can show them on the home page. But there is a limitation on the request number of the API, so I can not call the API directly on the client side.

And the Github Actions come to the rescue. It's a customized pipeline that can execute scripts, if you've used Jenkins, it's the same idea.

So I create a 'publish' action to fetch issue information with GitHub API, and push it to the repo, so that after the deployment of the GitHub Pages, it could fetch the information from the static file.

I even add some pagination that takes page size as the input. Check out the action scripts.

Put it together

The 9am Blog: 9am.github.io

GitHub Repo

Closing thoughts

There are some cons to do it with GitHub:

• It's hard to implement SPA with GitHub Pages.
• The cache for the page resources is short.
• The issue page can not be customized.
• The 'publish' action needs to be triggered manually.

I'm not suggesting using Github to host your blog. But if you're okay with the cons, just start blogging and want to focus on sharing ideas, it's a nice way to start with.

Hope you enjoy it, I'll see you next time.

---

@9am 🕘

• Read more articles at 9am.github.io
• Find other things I built on GitHub and NPM
• Contact me via email
• 

[9am]

Update (2023)

My image drawing lib <img-victor> is used on the blog GitHub Page. But without CI, I had to include the code of <img-victor> in this repo, which is not a good way of using a lib.

But now, with the help of actions/upload-pages-artifact and actions/deploy-pages, it's possible to build a customized CD pipeline that deploys pages from building output.

So after launching a Deploy Pages action, <img-victor> will only stay in package.json. Cheers🎉