As some of you may have noticed, I have refreshed my website again although this time there is more than just a redesign behind what has been done. As well as changing the look of the site, I also decided to do away with Wordpress. I have been thinking about this for a long time, but the sheer thought of trying to somehow extract all my Wordpress posts put me off even trying. But I will get to that later.
I had decided that I wanted to use a static generator, and although there are many out there, I decided to go with Hugo simply because our trivago tech blog uses it, and the decision to do so had been made by clever people who know what they are doing.
I first of all want to mention the design of this site, because some of you may notice its similarity to another site, and I will firmly put my hand up and say that I was inspired a lot by the site of Matt Smith, as I really liked the minimalist look and colour scheme that he has there. I hope he, and others, will forgive me, and I didn’t lift an iota of code or styling.
Hugo uses Go’s html/template and text/template libraries as a basis for templating. If you have used templating engines before, than these are fairly easy to pick up, and I had little trouble, although what I was building was not that complicated.
I initially started with creating my static pages, as I felt this was a good place to start to get used to how templates work in Go.
One of the main things that I wanted to do was to move my blog away from Wordpress. Wordpress is very powerful and can do a lot, but for me, it was too much. I had constant issues with its speed, and any caching plugins I tried to use to speed things up invariably caused other issues. I decided it was no longer for me.
The task of moving the posts from Wordpress to Hugo was daunting, but I came across a plugin that exports all your Wordpress posts, pages, and meta data (and comments too, if you want them) to Markdown for Hugo. This plugin did a really good job and set me on my way to extracting all my blog posts.
I did also have to build a custom converter though, in Node, that would change some of the content of the Markdown files for me. On Wordpress, I had used the Plum Code Box plugin for adding code snippets, and although the exporter extracted all the required data, it didn’t of course replace the Wordpress short codes within the posts. So I had to write something that would do that for me, converting it into something that Hugo could use. There were a number of other small things I wanted to sort out, like internal page links, and external links, so writing a custom converter was essential. What I came up with is a bit crude, but it seemed to work for me. I am sure that some errors have slipped through in my posts, but I will fix them when I come across them.
Another potential issue that I thought would appear was the blog post URLs. I initially looked into how Hugo handles redirections, and was delighted to see that the exporter had extracted each of my post’s URLs and stored it in meta data at the top. Hugo then uses this parameter when creating its files, so I actually had to do nothing at all.
Using the above
url, Hugo will create
blog/2016/05/html5/help-with-webvtt/index.html. You can of course change this and create a new URL scheme should you wish, but I decided not to.
As I mentioned earlier, the exporter does allow you to export Wordpress comments, but it is turned off by default. I took the decision to drop comments on my blog, as I feel they add little value and also require monitoring.
Hugo doesn’t support commenting and suggests something like Disqus, so you can set that up if you want to.
Dropping Wordpress means that the ability to search is gone for now, but I will probably look into adding something that brings this functionality back, at some point.
Naturally I made efforts to use correct HTML elements where possible, and I have ensured that focus states and skip links have not been forgotten.
Additionally I decided to try Addy Osmani’s critical plugin on the main page, and although it speeds up the first render a lot, I am still unsure of whether I should automate critical CSS, perhaps it would be best to do it manually.
If you notice anything broken, or have any feedback at all, please feel free to contact me.