Creating a Blog with Gatsby and GitHub

As a Cloud Solutions Architect at Microsoft, I have the priviledge of working on wide variety of interesting projects and exploring cutting-edge cloud technology. My role involves continuous learning and experimentation, so that I can give these companies the best advice on designing and building distributed systems. So often, I discover interesting new information worth sharing with the world but have no place to publish it. Hence, this blog.

But you're not here for that. This article is about building a new blog, and the technical choices I made along the way.

Requirements

A good architect always starts by gathering requirements, and this project was no different. What did I want in a blogging setup? After a bit of thought, I came up with the following criteria:

• Pre-Designed: There are loads of existing services, frameworks, and templates for creating a blog. I'm an architect, not a designer, so I wanted to have the look and feel 'pre-built' with opportunity for some customization.
• Full Control of Source: I wanted to have full control of my content, rather than relying on a separate application to host, manage, update, and/or publish the material.
• Automated Publishing: The fewer steps between authoring the post and seeing it live, the better.
• Cheap (or Free): I wanted to carve out my internet real estate without paying much.

Pre-built self-publishing platforms like WordPress or ghost are fantastic places to start for those who are uninterested in full control over the underlying tech. In my case, these sites conflict with my desire for full control, but I would recommend them to others.

At the same time, I didn't want to build my site completely from scratch. Any effort I can avoid on design, styling, and custom-coding is more time to spend on the writing. There are loads of pre-built blog templates out there as well--I ended up going with Gatsby, a static site generator built on React. Gatsby and Gatsby themes allowed me to start my blog with a pre-made, pre-styled template that was also completely flexible, editable, and extensible as a React app. This is the best of both worlds. I start with something that already looks great, but as I put more time and effort into the site I can customize it in an infinite number of ways. Best of all, it doesn't cost a cent.

In particular, I have utilized the gatsby-starter-minimal-blog by LekoArts. There are good instructions included with the repo on downloading, running, and customizing the template. I also found the Gatsby Tutorial to be useful for understanding Gatsby basics. For more advanced customization, the docs on shadowing in Gatsby is one place to look.

Source Control and Deployment

With the initial app set up, I needed a place for the source code to live and a mechanism for easily updating the content of the site. Luckily, GitHub has strong solutions for both of those requirements. While there are plenty of options out there, I am most comfortable with GitHub repos for source control, making my decision quite easy.

For deployment, a newer feature of GitHub has been particularly useful--GitHub Actions. GitHub Actions is a set of tools for building robust CI/CD pipelines and allowing for greater development velocity. In my case, I set up a deployment pipeline to republish the application on updates to the site or new entries.

Hosting

Last but not least, I needed to choose a hosting platform. Similar to GitHub, I have resorted to Microsoft Azure because of my intimate familiarity with the platform and its 'Free Forever' services which include static web hosting. To make things as easy as possible, I followed this tutorial from the Azure documentation to set up my hosting and GitHub Action.

Success!

Combining the frontend framework Gatsby, source control and CI/CD from GitHub, and web hosting from Azure, I was able to quickly and easily set up my own simple blog. Most importantly, this setup satisfied my requirements of minimal design effort, full control of content, automatic publishing, and low cost. In fact, the whole setup is currently running for free! I am able to write new entries and edit the webapp locally, push to GitHub, and see my new changes reflected in the live site in minutes.

What's Left?

The setup meets all of my stated requirements, but there is one last update I have yet to make--a custom domain. Right now, this site is running on a default (essentially random) domain provided by Azure. In the future, I would like to switch it to a more meaningful custom domain. Sites like Google Domains and NameCheap are the best places I have found to purchase and register domains (usually around $10/year), and I plan to do exactly that sooner than later.