Why I Switched from WordPress to Hugo
Table of Contents
A few months ago I was tasked by a family member to create a website for an organization he is apart of, and they wanted a really modern looking website with support for eCommerce. I had never considered building a website before, let alone one for someone else. However, I had experience setting up a LAMP Stack, and self host most of my services (which is easier than one might think, with such great open-source solutions such as Nextcloud and CodiMD). I had already purchased a domain name so that I could use these services while I wasn’t home (I am a college undergrad, after all). However, I still had never setup a website before, but this family member put his trust in me and offered payment, so I got to DuckDuckGo-ing.
After a few hours of research, I settled on setting the organization in question up with WordPress, afterall, it is open-source and super flexible. Plus, being so ubiquitous in the world, there were no shortage of tutorials on it. However, I wasn’t going to accept a job without having some sort of prototype ready – to prove to both myself and the organization that I could actually do it. Thus I said to myself, “Why not put together a website for me, as a proof of concept?”. So I did, a few frustrating days later I had a pretty decent looking site, then a few more frustrating days later I put together a pretty decent looking site for the organization in question (which I still maintain today). So, what went wrong, why did I not live happily ever after with my website?
Keeping track of the organization’s website was easy enough, WordPress has a fantastic gui, so it was easy to teach everyone who would be posting in the organization how to do so, and the user group system makes managing permissions a breeze. But what about my own website that had been setup for the express purpose of learning how to do it? Well, I was immediately frustrated that I had to install a 3rd party plug-in to just be able to write in markdown. I also much prefer a model which allows me to do all my work locally then merely push to my server; I found myself not wanting to post anything on my website because I would have to open a web browser then log in the write it and I accidentally got rid of my drafts more times than I would like to admit. In the end it was just too much work (I know that it was very little work, but at the end of the day I am lazy).
I was listening to Episode 182 of the Ask Noah Show when, at some point in the episode, Hugo was mentioned as one of the best static website generators and well, I was intrigued. After going down an internet rabbit hole of what Hugo is and what a static versus a dynamic site is, I realized that this is exactly what I had been looking for, something fast, something static, and something which I could mainly do locally and then push to my server. Perfect.
After a little bit of trial and error reconfiguring my server, and too much time spent
looking for the perfect theme (I settled on hello-friend and am extremely pleased), I got my site up and running. Then I realized that,
because of the simplicity of Hugo’s design, I can script this thing (remember, I am lazy).
To make sense of this simple script, I must first explain the design. On my
Digital Ocean Droplet box which runs Debian 10, I have setup a git remote for the
directory which all of the Hugo stuff sits in, I also have a clone of that repo in the same
general area (there is probably a better way to do this but that is what I came up with
first so that is what it is for the moment), then I symlinked the
/var/www/hugo and just pointed apache at that root
directory. That was all! Now when I make an edit I just save the file(s) that I was
working on a run this script (
#!/bin/bash # Cleanup the old stuff rm -rf ./public/* && # Build the site hugo && # Add the new stuff git add . && git commit -am "rebuild and push to master" && # Push to the server git push && #Copy everything on the server ssh do_web "cd /home/ptolemy/www/dsconce.space && git pull"
And, like magic (which let’s be honest,
bash is basically magic), my site is updated!
What is also cool is that I don’t even have to have
hugo installed on my server to do this,
because it generates everything statically and dumps it into
./public when you run the
hugo command (this is particularly nice when running a stable server which doesn’t always
have the latest and greatest software). What is also nice is that I can run
hugo serve -D
locally to have a live preview of what my site will look like when I publish, which helps
significantly when it comes to things like deciding which header level to use.