When I decided I wanted to create a blog, I had a couple options I was considering. The first was WordPress. I had already made a couple of WordPress Sites in the past, but found the customization process a bit clunky. Additionally, web hosting for WordPress can be somewhat slow and expensive. I wanted a platform that was relatively stable, secure, and quick, even on a cheap (or free!) hosting plan. I didn’t want to have to constantly worry about WordPress vulnerabilities or patching plug-ins. Additionally, the complexity of WordPress made migrating a site between hosting providers kind of a pain. I just wanted a good old static site that I could build on my own computer, then host anywhere.
What I ended up settling on was using Hugo. Hugo is a terminal-based static site generator that takes Hugo site files (themes, Markdown posts, customizations, etc.) and turns them into static web files (HTML, CSS, etc.). Once you have decided on, and tweaked your theme to your liking, you can focus less on the structure and look of your site, and more on the articles and content. Also, unlike WordPress, there is no clunky admin panel or plug-ins that need to be running all the time and patched constantly. Given that only static web content needs to be served, you can host it almost anywhere, and load times are quite fast. The Hugo community is also quite active, so there are plenty of resources that you can learn from, and theme templates to try.
In addition to Hugo, there are several other core components that I used: Git, GitHub and Azure Static Web Apps.
Git is a terminal-based application primarily used for version control. Git allows you to track changes to files as you go and “Commit” them, essentially marking any major checkpoints. You can also use “Branches” to try new things, while leaving the main branch or any other branches intact and in use. You also use Git in large part for managing Hugo themes through the use of “submodules”. I would argue, though, that the most useful part of Git in this example is the “Pushing” and “Pulling” content to and from a remote repository (such as GitHub), to a local repository (on your PC). This allows you to essentially sync content between the local and remote repository.
Along with functioning as the remote repository, GitHub also aids in the building and deployment of web files through GitHub Actions. When configured to work with Azure Static Web Apps, whenever code is pushed to the “watched branch” (typically main) in GitHub, GitHub Actions automatically spins up an instance of Hugo, builds the web files based on the Hugo files, and then deploys the web files to Azure Static Web Apps.
The last major component I used is Azure Static Web Apps. The primary reason I used Azure Static Web Apps was because I was already familiar with using Azure. It is also globally distributed for faster load times, has free SSL encryption, allows easily configurable custom domains, and has continuous integration / continuous delivery with GitHub. Not too bad for the free tier!
If this sounds like the right site building solution for you, check out my step-by-step guide on how I set up my Hugo site with Azure Static Web Apps. I highly recommend you take a close look at the two overview diagrams I have above, especially the Flow Overview, which should help you understand how everything works together. I found the idea of setting up a Hugo site a little intimidating at first, but once you see how these components fit together, you’ll find that the process is much more approachable than it first appears.