Moving to a Hugo static site
In this post, I’ll share my motivations and experiences of moving my blog, towards the end of 2021, from Wix to a Hugo static site.
Moving on from Wix
For about 2 years, I’d used Wix for my blog content and for the most part, my setup using Wix was ok.
My motivations for choosing Wix were that I wanted to spend more time blogging and less time configuring a blog site, wrestling with hosting etc.
The following points are related to themes that are important to me, some of which are also captured in the issues section that follows.
Cost
- Initially, reasonably priced from Wix at an introductory offer of more or less £100 for 2 years.
- Other competitors like Squarespace and GoDaddy weren’t much cheaper.
Ease of use
- Very easy once content was curated.
- Curating content, however, was annoyingly laborious.
Overall
- Ok but I couldn’t shake the feeling that something in my way of working was missing.
Before I continue, I want to stress that I have nothing against Wix. I think theirs is a decent product and I likely didn’t spend enough time on it to get the most out of it. My set up just felt inadequate for me.
Looking elsewhere
Speed
- With Wix, the speed wasn’t that bad but, in some cases, it could take > 5 seconds to load pages, which although not disastrous, wasn’t great.
Workflow
- The missing part was a workflow that “worked” for me. I had a mishmash of templates in MS Word for content and a disjointed process of copying files and content to Wix. It did the job but it was it was rudimentary at best.
- Overall, the content creation was something I was not enjoying due to a cumbersome workflow. Again, I accept that it was likely me not Wix.
Cost
- The trigger for me to leave. After the introductory offer, the cost of continuing with Wix would have doubled. Not something I was happy with.
Options
The 3 things mentioned earlier (speed, workflow and cost) led me to seek other options for my blog site. Again, I wanted something easy to setup, maintain and one that didn’t sacrifice cost and speed to load pages.
After deciding against Wix’s competitors like Squarespace, I stumbled upon this blog post from Kendra Little about Hugo, a framework for building static websites. My pal Murali Karumuru had also set up his site a while back using Jekyll, a similar framework to Hugo, so I decided it was worth a shout.
Static site
What is it
What is a static site I hear you ask?
The definition from Wikipedia of a static web page is one that is delivered to the user’s web browser exactly as stored. This seems like a throwback to earlier times when web pages were simple HMTL and CSS as opposed to dynamic web pages whose construction is controlled by an application server processing server-side scripts.
Some of the key benefits are improved end user performance, and ease of use. Just 2 of the very things that I mentioned earlier in this article that are important to me and why I made the move away from Wix.
Hugo
Taken directly from the Hugo site; Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.
I chose Hugo mostly because of my needs and the interest that was generated from reading Kendra Little’s blog. Her experiences seemed to be very similar to mine although with far fewer complexities to manage e.g. volume of blog posts.
How to get started
A quick way to get started is to jump straight into the very well-structured documentation on how to get started.
If you work with Microsoft Azure, you may want to use the following tutorial on how to “Publish a Hugo site to Azure Static Web Apps”.
The MS Azure article is brilliant in the way it keeps it simple and gets you going with a Hugo static app very quickly.
After getting a static web app running for the first time, I did have a mild chuckle at how much I enjoyed getting something to work for the first time. That childlike feeling of getting something working for the first time just never seems goes away for me. ❤️
Benefits
In the following section, I’ll cover some of the benefits of moving to Hugo and replacing Wix.
Cost
Moving to a Hugo static app doesn’t cost a penny. It’s free!
Speed
The performance was the most noticeable change. It’s blazing fast to serve content.
The impressive bit is how, via the hugo server command, one can quickly run a local instance of the site and verify changes made immediately.
Content creation
I really enjoy the content creation process using Hugo for so many reasons. The framework, workflow and tooling have meant that I enjoy blog posting even more.
Framework
- Easy to install
- A plethora of themes
- Organised well by default (layouts, partials, content)
- Loads of customisations (e.g. shortcodes)
- Allows for other features such as Google Analytics and RSS
Familiar tools
The flexibility of the Hugo framework means that dealing with files of html, markdown etc is down to you and tools you want to use.
My setup uses:
- Visual studio code as the IDE to work with files and commit to version control (similar to my day job)
- GitHub to version control content and handle comments.
- Azure for hosting, staging changes prior to publishing.
- GoDaddy for DNS.
- Google Analytics and RSS.
Apart from GoDaddy, everything else in this set up is free!
Simple deployment
If setting up a Hugo static app in Azure interests you and you followed the tutorial mentioned in the how to get started section, you’d have noticed that Azure doesn’t just support static apps. The tutorial also shows how you can provision a GitHub action for deployments and if you raise a pull request, an automatic staging environment is created to validate your site. ❤️
Azure Static Web Apps is an offering that is available through Free or Standard plans. The free plan is more than enough for most, including my needs.
If Azure is not your preferred option though, there are other ways of hosting and deploying Hugo virtually anywhere e.g. AWS, Netlify, GitHub.
Documentation
There’s plenty of documentation on the Hugo site and in many situations when I got stuck, such as figuring out how to add emojis 😄, the documentation was and continues to be a great resource to refer to.
Powerful features
- Hugo CLI: Good collection of CLI commands.
- Live reload: As previously mentioned, Hugo will run a server with the
hugo servercommand and watch for changes. Super-fast and awesome for development work. ❤️ - Config file: Either as a
config.yamlorconfig.toml, the config file helps control a multitude of configuration settings. - Front matter: AKA the header of the content file. Allows for additional configuration per file e.g. enable table of contents using
toc:true - Shortcodes: Code snippets that extend
markdown.
Learning
Using Hugo has been an enjoyable learning experience and that for me was the missing part. WYSIWYGs like Wix are fine but moving to a new set up that allowed me to leverage a few familiar tools and ways or working has been a welcome change.
Gotchas
Themes: Hugo themes are plentiful with some such as Ananke and Mainroad appearing more reliable/easy to use than some others. Beware making changes to the theme. Instead, copy what is required from the theme into the content, layouts or other folder and avoid editing the existing theme.
DNS: A right, royal pain for me. Wix’s setup with GoDaddy was so much easier for this and truth be told, I did miss the ease of DNS setup I previously had. With a combination of forwarding, this now works but it took a little while to get right.
Search: This can be enabled in the config file but for a sleeker search experience, custom code seems to be the way to go.
Contact page and comments: I followed this approach from Kendra’s blog and I like how the comments can be viewed in Github.
HTML in markdown: Disabled by default, I followed this article on how to use a shortcode for raw html in markdown. A bit annoying!
Porting content from Wix : Exported my content from Wix to markdown using a Chrome/Edge extension. Needed some cleaning up but for the most part, completed in under an hour.
Final thoughts
My lasting thoughts are that I’m enjoying using Hugo almost as much as writing blog posts. So much so that I’ll be using Hugo for personal websites if required.
The cost saving from Wix has been huge! I didn’t fancy paying £200 for Wix and I’m very glad that I’m not doing so.
Finally, thank you to the tech community for developing the framework and most importantly, sharing it! Hopefully, you’ll also find this post of my journey from Wix to Hugo, useful.
Below are some helpful links to get going should you need to.
Happy 2022! Stay blessed!