Upgrading from WordPress to the Hugo static site generator
I’ve been posting on this site for almost three years. The entire site has been running on WordPress from the beginning. I chose WordPress because it’s really easy and I’m really comfortable with PHP.
But as time goes you often realise your actual needs. WordPress is a powerful CMS. For one, there are tonnes of themes (I mostly use the Genesis framework) and plugins. It’s very extensible and the many hooks and filters allow developers to customize the website to a very large degree.
Give me speed!
But that power and flexibility also comes at a cost. For one, there’s a lot of bloat. Stuff you don’t need. Plugins are often not well written (how often do you read through the code of your plugins?). And then there’s speed. Or the lack thereof.
WordPress can be insanely slow. I have done my share of optimizations on this site. First, I installed W3 Total Cache which did help. Then I upgraded my hosting environment from a shared hosting platform to a VPS. That also helped. Next, I moved to CloudFlare DNS and used their caching and tools - which helped again. I enabled gzip compression. And optimized images. I minified everything possible.
But I never managed to reduce the average page load time to less than 2.5 seconds. And as we all know, site speed is essential for user experience. A slow website will even hurt your conversion rate. Which is a pretty dumb thing if you sell stuff.
Goodbye WordPress
So, I decided to ditch WordPress, and - in the process - learn something new. Have you ever heard of a static website? Well, it’s kind of similar to what we did in the nineties. We wrote HTML, some basic CSS and perhaps even some DHTML (God knows who invented that abomination).
When we finished mocking about with tables and 1x1 gifs, we would then upload the whole thing to Geocities or something. Apart from people then viewing our sites over dialup connections, those sites were blazingly fast.
There were no database lookups, no (or extremely few) dependicies on jQuery, web fonts, “progressive enhancements” and what have you. Those were the days in terms of efficiency.
But it was hell. If you didn’t use server side includes (or if your host didn’t support them), updating those websites could take forever. Enter static website generators.
Hello Hugo
I went for Hugo as my static website generator of choice. Hugo is a CLI (command line interface) based static website generator. Basically, you write a few HTML templates, put your CSS (and other assets) in a folder, write your content using markdown and then run the hugo command in the terminal.
Hugo then builds your entire website in static HTML - ready to upload. So whenever I need to publish a new post, I simply run the hugo new command and start writing.
Well, it’s a bit more nerdy than that. There are a lot of functions and methods. Like conditional display of certain things, looping through posts and so on. But I basically taught myself everything I need to know for building a blog in less than two days.
So, now this site runs on nothing but HTML, CSS and a few lines of javascript. Everything you see here is static HTML! I can’t wait to check my Site Speed reports in Analytics in a few days.
Oops
Well, I really didn’t have any trouble migrating from WordPress to Hugo. But I did forget things. First of all, I chose the same URL structure - so I didn’t need to write any 301 redirects (apart from two rules for taxonomy pages).
But I completely forgot to move all the comments from the old site. You see, Hugo doesn’t have any built-in comments functionality. So you will have to use Disqus. While Disqus can import WordPress comments, it can only do so if your WordPress site actually exists.
I deleted my old site before exporting the old comments. And I don’t feel like setting it up again. So I’m waiting for some spare time and will then export the comments manually from the database and load them into Disqus. Until then: Please post new comments :)
Update: So, I managed to export all comments from my old WordPress database using a simple Python script. I also managed to import those comments to this site.