What I Learned Migrating To Hugo

What I Learned Migrating To Hugo

When I first started this website over 10 years ago I decided to go with the “gold standard” of content management systems at the time: WordPress. Today WordPress still runs a huge amount of the internet with something like 60M websites and about a third of the top websites all using the platform. This means that there is a huge community around it with plenty of support… but it also means that it carries a pretty big target on its back as seen over the years with wide ranging security vulnerabilities and attacks.

Another thing I’ve noticed is that WordPress iself seems to have gotten bigger and slower over time. Now some of that could be part my fault with the hosting setup I have, or it could be because of the age of the website and how many versions of WordPress I’ve upgraded through, or it could just be the codebase has indeed become bloated but the end result is the same.

Even though WordPress has served me well it’s mainly for the reasons listed above, and honestly because I don’t really have a need for all of the features WordPress offers anyway, that I decided to see what other possible alternatives exist these days.

Why so dynamic?

The way WordPress, as well as many other major web frameworks, works is that it stores the vast majority of its data in a database. This has a number of advantages but it also means that every time a user browses a page on the website WordPress needs to first query the page content out of the database and then render it before sending it to the user. This is a (relatively speaking) slow process and so to work around it most people install and enable various caching plugins within WordPress itself. But that’s really just putting a band-aid on the problem.

In my search I came across a few different web frameworks that did away with the database, and therefore most of the dynamic nature of the website, and instead focused on delivering simple HTML pages. The advantage to this is that when a user browsers a page the web server simply sends them the page file and you’re done. No waiting on a DB query, no waiting on a back-end render, no need to cache the page (it’s already in the final format) and so it’s fast!

Hu-go?

One of these web frameworks is called Hugo and its claim to fame is that it not only generates static websites for you via a very flexible framework and templating engine but it does so faster than its competitors (chiefly Jekyll). In practice this means that I can run the built-in Hugo server and have it run my website locally and reflect my incremental updates as I make them in very close to real time.

So what does writing a post like this look like in Hugo? Well you basically write in markdown, slap some meta data on top and save the file and you’re done. Here is an example post:

---
title: The title of my post
author: Tyler Burton
type: post
date: 2020-03-20T19:32:00+00:00
url: /a-url-to-my-test-post
categories:
  - Test Category
tags:
  - Test Tag
---
This is a test post. Here is what a [link][1] looks like. Neat huh?

 [1]: /relative-link-to-somewhere

Migration time!

If you’ve made it here I’m assuming you already know where this is heading. Yes I’ve migrated this entire website from WordPress to Hugo. Thankfully I didn’t have to manually convert all of the posts to markdown by hand because there’s a handy WordPress plugin that already gets you (most of the way) there. Still the plugin was definitely not perfect and so there was some work to make it happen.

Additionally I manually ported the old WordPress theme over as much as I could/wanted to and, while I was at it, also took the opportunity to go in and fix some broken links and missing files so hopefully the migration has actually been a good thing overall.

So what were the downsides of this change? Well other than the time it took to cleanup a bunch of things the major downside was that no longer being dynamic meant that I had to find an alternative way for managing comments. For now I’ve simply migrated all of the existing comments over to Disqus but I’ll re-evaluate that decision at a later time if I’m not happy with it.

Worth it?

The million dollar question is: was this really worth it?

Well from the backend perspective the work flow is definitely different but not really any more difficult. I can now write posts offline, using any text editor I want and simply upload them when I get a chance. Of course I’ve also automated a lot of that and am using a git repo for tracking changes now. The lack of ready made plugins may pose a problem but I’ll cross that bridge if and when I need to.

What about from the visitor’s perspective? I managed to take a couple of metrics from the old WordPress version before I switched over and while things can vary a little bit due to some of the external sources (i.e. Google analytics, Disqus, etc.) here are the improvements I’ve seen.

Note: all metrics are averages of multiple runs:

Home Page Metrics

  • Load time: 4.77s in WordPress vs 2.52 in Hugo (-47.17% decrease)
  • Requests made: 26.33 in WordPress vs 9 in Hugo (-65.82% decrease)
  • Data transferred: 575.37kb in WordPress vs 126.3kb in Hugo (-70.05% decrease)

Page Metrics (selected a few different posts)

  • Load time: 5.49s in WordPress vs 3.23s in Hugo (-41.17% decrease)
  • Requests made: 32.75 in WordPress vs 16.33 in Hugo (-50.14% decrease)
  • Data transferred: 675.67kb in WordPress vs 244.16kb in Hugo (-63.86% decrease)

So as you can see, and hopefully feel while browsing the site, things have been substantially sped up with the switch.

And that’s really all I have to say about it at this time. If you happen to find any dead pages or old links that no longer work please do let me know so that I can correct them.