I have been blogging, on and off, for longer than I thought. I have recently not been blogging as much as I used to and have also had feedback that sometimes when people clicked on links to go to my blog, they were redirected to undesirable sites.
For a while, I had been planning to move away from the hosting solution I was using as it was expensive and obviously not as secure as I had thought. The big question was really what to move to.
To decide between different options, it was really all about working out what I need from a blogging platform. The last time I moved my blog, I went from WordPress hosted in Azure to a hosted WordPress site so that I didn’t need to keep updating WordPress. I didn’t really look too much at the features that I needed.
My prompt to move this time forced me to consider my requirements. After consideration, the following requirements were what I landed on:
- Easy to create new blogs
- No need for comment capability - Twitter and Linked In are fine for discussing blog posts
- No need for automated notifications or subscriptions - again, Twitter and Linked In work for letting the workd know about a new blog post
- Ability to easily theme the blog
- Flexibility to allow customisation if needed
- Quick to learn
- Cheap to host
And, wow, was it fun!
I quickly fell in love with the ease of using Hugo to generate a static web app as it was all configured in a matter of seconds, including integration with a GitHub repository for the content and Git Actions for deploying the solution to the Web App.
I had a few false starts as I learned Hugo and started pushing the boundaries of what it can do easily, and what needs some experimentation.
With over 10 years worth of blogs, I wanted to ensure that I retained them all and that, where necessary, the taxonomy entries were updated. It took a while to get them exported from the old site, mostly because there were over 300,000 unapproved comments! Once those were deleted though, it was easy to start bringing them in and getting the blog to work.
I did think that a quick win would be the themes that are available in Hugo. There are a lot to choose from, but in the end, I wanted to tweak a theme more than was possible, so I took a copy and adapted it extensively.
One feature that I have used which was really good, was the ability to use data files for short entries in a list of community events. I wanted to provide details of where I have spoken and will be speaking, but to also have links to any recordings or event web sites and data files were perfect for this.
There were a lot of steps that needed to be carried out, but they were all relatively simple.
The documentation for Hugo is perfect for getting started: https://gohugo.io/getting-started/installing/
Publish the Hugo site to a Static Web App
Again, the documentation is easy to follow and comprehensive: https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo
If you are not going to use a Hugo theme, then it is best to not include one in your project from a GitHub repo. Not being an expert in GitHub made it much harder to remove a module.
Once you have completed this step, any changes that you commit to your GitHub project will be deployed to the Static Web App.
I did think that this would be a challenge, but actually, it was pretty straightforward. In response to Veronique’s Linked In post, Ryan Yates commented with a link to Kendra Little’s blog on how she moved from WordPress to Hugo.
That post had a link to lonekorean’s script for exporting WordPress content and generating markdown from it.
This was a great tool as it allowed the export not only of the content, but the conversion as well. Once this was run, all I needed to do was to tune the markdown and the new theme in Hugo.
Testing the theme
Rather than importing the content in one go I imported about a dozen posts so that I could test the theme and ensure that I had the content working as I wanted it before bringing in 10 years worth of content.
I used the Anatole theme which I really liked. I did find that I wanted to make some changes to the theme, and some of them were core changes so I took a copy of it so I could make the changes I wanted. A lot of the changes were to the HTML and associated CSS to ensure that the site is accessible.
Laying the posts out so that the categories and tags are presented well and the table of contents is visible was very important. but once the metadata was set and the layouts configured to use it properly, the main effort was in changing the CSS.
The real part for me was getting to play with HTML and CSS, combined with using Hugo to standardise the rendering of content.
Once I was happy with the theme and the way the site works, I imported content one year at a time, ensuring that each post was tested and published successfully.
This took a while!!
What I did find was that in the last migration I did, some of the images had retained references to historical sites and so had been lost to time! I did consider whether the content was relevant and useful, but in the end, I didn’t want to discard any of it as it was actually fun remembering not only the technology, but also the people that I had been working with when I wrote the posts.
The final step was changing DNS, and improtantly, changing the base URL setting so no unfortunate redirects take place.
This took longer than planned as M365 is managing my DNS settings, rather that the company with whom I register domains - that took a while to iron out.
All in, it probably took me 40 hours to setup the static web app and Github, learn Hugo and build the site and migrate the content across. It has been fun and I’ll be honest, it has been satisfying to get to grips with Hugo and use some very ancient skills with HTML and CSS.
I think I now have a blog site that is
- Much faster than Wordpress
- Fully accessible
- Fully backed up in GitHub
Now I can look forward to blogging a bit more easily.
- Static Web Apps in Azure
- Hugo themes
- Anatole Theme
- Kendra Little’s blog
- lonekorean’s script
- Favicon image made by Good Ware from www.flaticon.com
- Favicon converter - https://favicon.io/favicon-converter/