Learning To Hugo
This site has been developed using Hugo and I gotta say I LOVE HUGO! A few years back, I made huge call to leave permanent employment and move into contracting. I figured I needed a website, everyone needs a website right? So at the time, I stood up a site on Wordpress, which simply came down to very simple Google search on where to put a blog. So Wordpress....
I'm not a fan of Wordpress
I'm no webdev and perhaps much of it is my own inexperience, but venturing into the world of Wordpress was horrid. Content stored in databases...plugins you have to maintain and pray won't break your site...run a second site to test plugin upgrades...but there's no true devops-style process for your posts...backup your site, backup your database...stability issues (more recently, using webapps on Azure)...speed issues...clunky design process...honestly, if you run a tidy Wordpress site then I tip my hat to you. But I spent about a year thinking OMG WHAT IS THIS NIGHTMARE!!!
Searching for alternatives
I went searching for an alternative to Worpdress and stumbled upon Hugo.
Here's their front page. That's some statement! But I thought I'd give it a try and it hasn't disappointed. My entire site is managed from within a git repo, I develop content entirely from within VS Code. The majority of my content is written using Markdown, if you are more familiar with coding, git, markdown then feels much more familiar than handling Wordpress. Here's my workspace whilst originally drafting this post from within VS Code;
It is REALLY fast
The main advantage with Hugo is that it is a static HTML generator meaning that your content is rendered when the site is built, not being rendered when a user accesses it so the site is incredibly fast to access. You can cater for this using Wordpress as I understand, but ultimately not having to worry about this performance aspect at all is much more preferable.
One of the best features of Hugo for me, is the ablity to render the site locally. Changes are instantly presented when you make them meaning I can make some changes, see how they look on my desktop before pushing them to git to be published....or make some alterations if I'm not happy.
By running the the command;
From the terminal window inside of VS code, I can fire up the web server and view my latest updates locally. In the picture below, you can see the command, followed by a build that takes less than a second to build and finally a local address where I can see the rendered site. Amazing!
Once the server is running, you can continue to update your files and on saving them, the server will detect the change and refresh the site.
Once I'm done with my changes, I can check them into source control and push them to Github to be published.
The entire user experience is really enjoyable!
Moving from Wordpress
I fortunately didn't have a huge amount of content to move from Wordpress so the transition didn't need any consideration, but what about if you have really mature site? Well, recently Kendra Little migrated from Wordpress to Hugo and the turaround was impressive! You can read about Kendra's experience here.
I'm going to outline some of the work I've done getting this blog started and some of the things I've learnt along the way. As the posts become available I'll update the links below;
- Part 1: Getting started
- Part 2: Content organisation
- Part 3: Using front matter to handle content including redirecting old URLs
- Part 4: Using shortcodes and archetypes to create repeatable content
- Working with partials.
- Hosting on Github and Azure using Static Web Apps.
- How Github Actions and Static Web Apps allow for a full development lifecycle.
- Part 8: Using Gitalk
- Running multiple sites and sharing content between them.
- Configuring social media meta.
- Using WebDev to improve the efficiency of my site.
- Responsive images.
- Improving SEO.