Sometimes you just need to have a change.
When I started writing this blog I had to decide what tools to use and where to host it. I ended up with a Jekyll blog hosted on GitHub Pages. It was the simplest option at the time.
Having a little time on my hands (for once), I decided to revisit some of the choices that I didn’t make the first time round. Namely I thought I’d take a second look at Azure Static Websites. With a low traffic website, it should be possible to host there in the free usage tier.
What made me look again, simple - there was a module in MS Learn that came up when I was working through some things for my exam renewal.
There was another, much bigger reason. I’ve started to hate Jekyll. Writing a post and viewing it locally has just become such a chore. Updates always mean that something inevitably does not work. I then spend a lot of time trying to fix the issue. In fact, the last few articles have just been pushed directly to GitHub as I just couldn’t face trying to get it working locally.
Hugo
Having a quick look around at some static site generators, I came across Hugo.
And the thing that really appealed to me was that it was a single app. Not a Ruby app with dependencies (Jekyll).
Hugo is a static site generator written in Go. Installation is very simple, for example on a Mac brew install hugo will install it for you. All you need initially to start is Git installed.
Templates and theme’s make use of Go, so once you start tinkering with themes, there may be a little learning required.
Configuration is done via YAML or TOML configuration file. Themes are pulled in via their GitHub repos and can be added as sub modules to your repo.
The quick start guide provides a very quick and basic start up guide.
Just running hugo server will build your site and run it locally on port 1313. The pages build very quickly, so editing and seeing the results is a very quick process.
Adding content is as simple as with Jekyll, but there is a little more flexibility here as well. You can just add a page under the content/posts directory, or you can create a subfolder for the post and add any other files as well (images or media files etc.).
Themes exist, and there is a library for you to look through. Each theme has some info on how to use it - some are more detailed than others.
Migrating from Jekyll to Hugo
I had hoped that this would be relatively straight forward - find a theme, port the posts over and all done.
I should have known better. Lets start with porting the posts over. Hugo comes with an import to migrate. Giving this a go I found a number of issues…
All the migration seemed to have done was copy the blog posts from the Jekyll folder to a Hugo content/post folder. The posts had not been changed at all. Front matter and Jekyll markdown was all still in place. Although I didn’t notice this until I’d applied a theme and got that working.
Finding a theme…it was so simple in Jekyll, but it’s more involved here. You have to pick your theme, add the theme files or add a theme sub module, create your config file and hope for the best. I went the installing as a sub module and wish I hadn’t. To do any customisation you need to modify the files your self.
If your lazy like me, themes in Jekyll are much easier.
And then you start to find the other issues. Github Gists don’t show any more, so you have to use the Hugo shortcode or write something yourself…and then you find that the Gist isn’t fully rendering for some reason…
Images aren’t loading as the links are to the wrong place, so you need to fix all those.
Page links are different, so you need to amend any cross post links so that they work again.
Tags and breaking down the post by year and month all work differently.
I only had a relatively small number of posts and all this was enough to make me regret starting the process. I ended up creating a hierarchy under the content/post folder based on year and month and then creating a folder for each post to enclose all images and files.
Azure Static Websites
This part was relatively simple. I found a guide on Microsoft Learn and followed it.
Once you’ve created your webapp and connected it to your repo, you’ll find a file added to your GitHub repo under the .github/workflows folder with a name like azure-static-web-app-pineapple-grass-02340134a3f.yml (the name will relate to the hostname assigned to your web app instance).
This contains the build and deploy script for your app. Once you commit something to your repo, GitHub will run this script to build and deploy into Azure.
And this part worked great.
Conclusion
So…well…erm…yeah…as you can see, I didn’t switch. I just felt there was too much to do getting the templates the way I wanted. I didn’t find a theme that really appealed either. But there were some things that were great and I won’t abandon this switch altogether. When I next get a big chuck of time free, I’ll be looking into Go and the templates to see if I can get something that I like. On the build and hosting side it was great. Local builds were quick too. So much nicer than Jekyll…