Moving website to Hugo & Azure

Hello and welcome to my "new and improved" (I hope!) blog site, powered by Hugo and Azure Static Web Apps. My final post on WordPress has the same URL but different content.

What is Hugo?

Hugo is a framework for building static site websites. There are several "static site generators", but I happened to land on Hugo after reading and following some others in the community using it to convert their sites from WordPress. In particular, I followed a lot of what Kendra Little posted about her experience, a post I highly recommend reviewing for anyone curious about this in more detail. A website change has been on my radar for a while, to breathe some new life into the website and hopefully kick-start my motivation to be more active with the blog again.

The general concept of static site generators is the creation of static HTML pages for a website, re-generated via automation when new content is created, which results in a much faster website, no back-end database to manage, and hopefully a reduction in the cost of running a website.

This site now is super-fast, and I love that. I recently changed my Kuntz Consulting Inc. site to Hugo as well, although it is a simpler implementation as a one-page site. I am still making changes and fixing things, like tweaking fonts and colours, fixing broken links that didn't convert properly etc.

Cost Comparison

I have already trimmed down my website costs a bit but here is a rough breakdown of "then and now" for what it cost me on WordPress and what I will be paying from now on. My costs were higher at one point because I was running both sites in WordPress, so I had plugins and other costs for both. Eventually, I realized my business site didn't need WP, so I went for a bare-bones HTML page, intended to do something better, but had not gotten to it for a few years!

Here are some of the costs, not including domain renewals, to host my sites each year (all in USD):

Here are what my expected costs are from now on, per year (also all in USD):

All of the costs associated with WP are soon to be gone. I'm using a free theme, and do not require plugins. I tended to pay for plugins to support the developers, and to be able to get support if I needed it. Otherwise, I am testing an alternative to Google Analytics called Plausible to see what it is like; however, it too would cost $108 (USD) per year for the (minimum) paid plan. I don't know if it's worth it yet, but it's far less intrusive for users and has a nicer interface to understand where my traffic comes from so I may subscribe to it anyway.

How does a static site generator work?

This is the cool part, and mostly completely new to me. I'm not going to get into all of the details here on how to set the site itself up, this is just a description of the flow and process. Hugo has a built-in way to preview a website locally without needing to install anything other than Hugo. I was/can view all changes I want to make before committing them to the repo for "really publishing it". I built both sites out over several evenings and weekends, gradually getting more familiar with the process, the themes, and the configuration options to get the sites looking the way I wanted them to look. Once I got to the point where I wanted to see the next step, I created a static web app in Azure. During the creation process, Azure asks where the source code is for the site (GitHub for me), as well as telling it what kind of framework is being used (Hugo), as that is what allows Azure to create the proper GitHub Action to pull the code into Azure for hosting. Azure creates a site with a dummy random name URL, but it's a legit URL to go to and see the website when the GitHub Action runs successfully for the first time.

• On my local machine, I have installed Hugo, Git, VS Code and GitHub Desktop.
• I manage the site and write the content in VS Code. I preview with Hugo's built-in web server, on my computer.
• I push and pull code to/from GitHub with GitHub Desktop.
  • I commit (push) code to a repository in GitHub as often as I choose to commit my changes.
  • I can write posts in draft if I wish so even though I push to GitHub to commit the changes, it won't be displayed publicly until I change the status and re-commit that change.
  • The beauty of this overall is being able to work from more than one workstation. I can push my incomplete post to GitHub and pick it up from another workstation by pulling in the changes in the repo. I've even edited some posts or pages locally in GitHub from my iPad where the changes were simple, like fixing typos.
• Each time a change is committed to GitHub, no matter whether the change was made via VS Code or locally in GitHub on a browser, a GitHub Action workflow (created by Azure) will kick off. It is going to run the necessary Hugo commands to build the site and push the site pages to Azure. The time to do this varies depending on how large the website is. For kuntzconsulting.ca, it takes less than 90 seconds. For this site, which has more pages and images, it takes 2-3 minutes. I expect over time that will grow, bit by bit.
  • Every time it runs the workflow, it recreates/regenerates the static pages for the website based on the current content. Those pages are in HTML and whatever else is needed, like CSS and images.

When I built the Kuntz Consulting site, the theme I chose happened to use some JavaScript and I had several issues with the GitHub Action failing. I will write a separate post about that because it took a lot of swearing and tea (and stronger beverages!) to finally figure out what the issue was and work around it. Nothing I found in one spot helped me, which is a good indication that a blog may be useful to the next poor soul who tries that combo!

Next steps

Now that this "big" part is done, I have hooked up the site to Disqus for commenting and pushed all comments from WordPress into Disqus so the history is there.