In the previous articles, I have discussed why you should start a technical blog and which options you have to kickstart such a blog.
There are pros and cons to each option. Depending on how much experience you have had in blogging, how much time you want to invest in setting up/maintaining the infrastructure for your blog as well as how much money you are willing to pay for hosting, you should choose a appropriated approach.
Since I’m owning my desired custom domain already, and as a minimalist, I just want to have a very minimal, low-cost setup to start writing, I have opted in the approach of using a static site generator to generate static pages for my blog and I’m hosting it using Github Pages which is free for both hosting and custom domain support.
In this article, I will give you a walk-through of my setup and show you how you can set up a similar blog in 2 minutes.
What is a Static Site Generator?
I copied the definition shamelessly from the Gatsby’s website.
A static site generator is a software application that creates HTML pages from > templates or components and a given content source. Most static site generators, including Gatsby, accept Markdown-formatted text files as a source, although Gatsby is not limited to Markdown.
Gatsby is one of the many Static Site Generators available.
Although GitHub Pages supports Jekyll, another popular static site generator, natively and has a lot of built-in workflows to support it, I have chosen Gatbyjs because of the quite obvious reason:
- Jekyll is written in Ruby, which I don’t like to learn.
There are quite many features supported by Gatsby out-of-the-box:
- Components: you can (re)use React components in your Gatsby application.
- Plugins, Starters, React packages: You can use any of the packages you’ve already been using with NPM, particularly the React ones as it’s built on the same thing. But that’s not all: there’s a large number of ever-growing plugins, starters, and transformers by the Gatsby community.
- Responsive Images: there is official plugin which can directly generate fluid images, add filters, change formats, blur up on load and a lot more.
- App-like experience: many default configurations to support PWA, offline caching etc..
I recommend you to take a look at the high-level explanations of Gatsby to understand more about its design philosophy.
GitHub Pages is a static site hosting services provided for free by Github, which has many advanced features:
- Custom domain supported
- Free SSL Certificate
- Many automation flows to deploy using git.
These are the steps to install and enhance the Starter package using plugins and my own customizations:
- Install the official Blog Starter package
- Add reading time
- Add Tags
- Add Category
- Add Pagination
- Add Table of Contents
- Add RSS
- Add Light/Dark mode toggle
- Add Translation:
- Add Table of Contents
I’m not going to explain in detail those steps. I’ll publish the source code of my blog as a starter package soon for you to take a look at soon.
The design is very much inspired by Overreacted.io from Dan Abramov, which is open-source as well but running Gatsby 2.0.
The main advantage of static site generated with Gatsby is that it is lightning fast. My website has scored 100 points in Lighthouse test.
Since I plan to automate my blog deployment using GitHub Actions, I have written some tests to ensure that any change to my setup will not break my blogging site.
These are tests that I wrote using Cypress:
- Ensure the blog index page is generated and rendered
- Ensure the blog detail page is generated and rendered
- Ensure the RSS feeds are generated
- Ensure the sitemap file is generated
Automated deployment with GitHub Actions
GitHub Actions is a free CI/CD work flow provided by GitHub. I raise pull requests everytime I change any thing in the setup or when write a new blog post. GitHub Actions will kick in and ensure that all the tests pass before letting me merging the pull request into
Keeping dependencies up-to-date
I’m currently using Renovate Bot, which will scan and update the dependencies in my repository automatically.
The bot will create a new pull request to suggest me to update any new dependencies when they are available.
Thanks to the automated tests, I’m quite confident in updating those dependencies since the tests will ensure that everything is still working fine.
In this article, I have described shortly my minimal setup for my blogging site with some of the features that I’m quite happy with:
- Using Gatsby to generate a static site from Markdown content.
- Having automated tests to ensure the site is working E2E.
- Deployed automatically using GitHub Actions.
All I need to do is writing, which is actually the hardest part of keeping your blog alive.
In the next article, I’ll show you the open source starter package containing all customizations I have, so that you can kick start a similar project for your blog easily.
Photo by Daniel Thomas on Unsplash