I recently decided to shift my gears with static pages for my blog. I have been using wordpress for all my blog publication so far. You can find my old blog here. With the trend of static pages, I thought of re-inventing the backend of my blog. And here we are, you are reading my new blog based on static pages which is hosted on Github pages. In this blog post, I am going to show you what happens under the hood when I publish a new article.
I was aware that the static pages had some limits around support for comments, analytics etc. But things have progressed a quiet a bit recently. There are smart ways to achieve these and tools available to make our life simple. Therefore, blogs are moving to static pages in the developer community these days.
The idea of the static pages-based blog is to keep the raw data of the blog some where and use a tool to generate the static pages for the blog. The raw data for the blog could be markdown files, JSON documents or any other meta data storing mechanism. There is plethora of tools available to convert the raw blog data to static pages. Hugo , Gatsby and Jekyllrb are a few to name. Once you have generated the static pages, you can publish the static pages in a several hosting places. A few of them are Github pages, Azure Storage Web, and AWS S3 bucket.
As you can see there are plenty of options to choose from for each component. Each one of those, has its own strengths and weaknesses. If you are thinking of using static pages for your blog, best is to try a few of those and find the one that works for you.
Now, let me explain you how this blog works. In very high-level, the following diagram depicts the process and what happens under the hood when I publish a new post.
Firstly, I use Hexo as the static page generator. Hexo has specialized features for hosting blogs and it supports Markdown files as source. This tool simplified my comment system, analytics and RSS feeds etc. Then I built others around it. I use a Github private repo for storing my source blog metadata. I edit and author locally, then push and merge the changes to private Github repo. Then I have configured a Github action to trigger when there is a new commit to the blog source repo. It will use a build agent, install Hexo, NodeJS and other necessary dependencies, build the static pages and push them to the public blog repo. The public blog repo is configured with Github pages. Once the static pages are published, the pages will be available through the Github pages to the public internet. A new post release process is fully automated using Github actions as you can see. That is the under the hood story which generated this page you are reading today.
There are themes available for Hexo which can be used to change the look and feel. I have used pure theme and customized it according how I want to look it like.
I hope this post is informative for you. Hope this will convince you to start or migrate your blog over to static pages.