Switching from WordPress to Hugo
Published:
| by Julian Knight Reading time ~6 min.
📖 Posts
| 📎
Blogging
| 🔖None
I’ve been fed up with the speed of WordPress for years but haven’t had the time to learn how to properly switch to an alternative. Until I discovered Hugo!
Hugo is a static file website generator written in Go. It generates an updated site pretty quick on a laptop for the kind of size of blog and information site I’m running.
I have also been trying out Jekyll since that is natively supported on GitHub pages - for example, GitHub itself will generate your site when you “push” changes to the repo that underpins the site.
There are several problems with using GitHub and Jekyll:
Unless you pay, you cannot hide the source code for your site on GitHub
Jekyll’s build process is very sensitive. It fails fairly often for the most trivial of reasons and when the build does fail, the help information is obscure to say the least.
You can build locally and you might get more information but then you have to install and maintain an installation of Ruby. This is a significant pain, especially on Windows. I don’t know Ruby and I don’t want to know it either.
Jekyll itself is also more than a little strange in places. With things that don’t work for no obvious reason.
While there are some themes for Jekyll, I couldn’t find any that really met my needs and writing your own seems harder than for Hugo. Though that might just be me.
So Jekyll/GitHub was not a viable alternative to Wordpress. It just about works for a simple information site like a documentation one but I certainly wouldn’t want it to be my main blogging site.
Moving away from WordPress 🔗︎
Of course, when you switch away from WordPress, you immediately inherit a number of issues that you have to deal with:
- No dynamic content - unless you build it yourself.
- No WYSIWYG content editing - unless you integrate with Forest.IO (see below). Hint: it is easy.
- No search. WordPress gives this via its MySQL database integration.
Moving to Hugo 🔗︎
But you also get a number of advantages when using Hugo:
- Blazing speed from the final output - it is HTML & CSS, no messin'
- Hugo is (mainly) very comprehensible and logical. In the time it took me to learn Jekyll (a fair bit less actually), I’ve been able to start from scratch, even building my own theme from scratch. Export my WordPress blog (which I could never get to work with the Jekyll export tool) & begin fixing up the content. I’ve even merged in the pages from Jekyll.
- Working with a theme is very easy. You make it a submodule using Git. That way it can be in an entirely different repository - either belonging to someone else or belonging to you (maybe cloned and edited).
Issues to resolve 🔗︎
I’ve not got everything worked out yet. There are some things I need to get working.
- Site Search
- RSS Feeds
Additional Tools 🔗︎
Of course, you still have to host your site somewhere. I’ve been hosting my WordPress and other sites on a low-cost VPS for some years. It works well enough but recently the VPS has been filling its hard drive and is in serious need of some maintenance. Finding a cloud service to do the heavy lifting would be nice.
So, like many, I’ve integrated a few cloud tools with Hugo to give me hosting and other utilities.
Source Code and Content Backup 🔗︎
This one is simple. The site is generated by Hugo either on my local PC (Hugo is a single binary install, no messing with Golang) or in the cloud. That leaves the site structure which is a load of HTML and Markdown files with some static content files.
All of the structural and content files are easily stored in a git repository. This also gives multi-versioning.
I’m using GitLab for the main site content and structure because it lets me have private repos for free (unlike GitHub). But I’m using GitHub for my theme since this can be public - indeed, I want it public so that other people can use it if they want to.
Hosting 🔗︎
I am using Netlify to actually host the site.
- I don’t have to faff with or worry about my own server.
- Netlify hosts everything for you. Not only the site but also the build process. You can bring your own Domain as well.
- It is free for small sites.
- You get TLS/SSL integration without having to faff with Let’s Encrypt - they do it all for you. Or you can provide your own certificate.
- Netlify is also a CDN so files are replicated and delivered regionally.
- You get full build messages so you can see if something goes wrong.
- You get some automatic optimisations if you want them - a valid TLS certificate for HTTPS, Some file optimisations.
- You get form submission for free (with some sensible limits).
- You get identity management for free (with some sensible limits) using OAuth.
- You get alerting with integration to email, Slack, etc. All for free.
- You even get integrated Amazon AWS Lambda serverless functions for free! These are great for building small utility functions that run in the cloud and can be called using a simple REST web API. They can be a pain to set up and manage though but Netlify makes it easy.
- It has a local command-line interface in case I want to control everything locally. The CLI also simulates the running of Lambda functions.
Online Content Management 🔗︎
It isn’t always convenient to fire up my code editor and run the Hugo development server on my laptop.
Also, it can be nice to have a WYSIWYG writing experience, or at least something close.
Forest.IO gives me a convenient web editing experience.
- Very quick and easy to set up.
- Edits data (e.g. JSON), not just pages and blog posts.
- Merges changes direct back to the GitLab repo - git takes care of merging so it isn’t a problem to edit both locally and in the cloud.
- It provides editable templates for frontmatter and other metadata.
Other cloud tools 🔗︎
- Site search - I’ve not yet got this set up. There are several possibilities but I think it will take some work.
- Image optimisation
- Website testing and optimisation
Tools for Local Editing and Development 🔗︎
- Hugo - the single binary install, very easy.
- Microsoft Visual Studio Code - makes an excellent editing and testing environment.
- Chrome, Edge & Firefox browsers - with their development tools.
- Cmder - an enhanced command shell. Not really needed but it makes working with the command prompt a lot nicer on Windows.