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.

If you are reading this on jenkuntz.ca, the website has now moved. (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 a number of 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 if you’re 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 own motivation to be more actively with the blog again.

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

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 had 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:

Here are what my expected costs are from now on, per year:

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 a nicer interface to understand where my traffic comes up that I may subscribe 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 your site locally without needing to install anything other than Hugo. I was/am able to 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 - a literal website - I created a static web app in Azure. During the creation process Azure asks you where the source code is for the site (GitHub for me), as well as telling it what kind of framework you are using (Hugo), as that is what allows Azure to create the proper GitHub Action to pull your 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 your site 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 own 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 you did it via VS Code or local 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 your site 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 is recreating/regenerating the static pages for your site 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 happens to use some javascript and I had a number of 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. As I write this, the site is not live yet, so I don’t know what that looks like. Disqus is now live and all approved comments from over the years on WordPress are now visible in the respective posts.