Porting my blog with Hugo

Dec 30, 2014 HugoGithubJekyll

I’ve just ported my Wordpress blog to Github Pages using Hugo.

Why not use Jekyll?

Jekyll is currently the de facto choice for building Github hosted static websites, I choose Hugo (after first trying Jekyll) primarily because, for me, Hugo has an ineffable Goldilocks quality. Post facto rationale:

Choosing a theme

My objective requirements were:

  1. Phone and tablet friendly.
  2. Minimal customization required (I find HTML/CSS twiddling such a time sink).
  3. Straight-forward and uncluttered appearance.

The hard part is largely subjective: finding a look and feel that you actually like (look and feel is notoriously subtle and personal). After lots of trawling the Web I stumbled on a Hugo port of the Jekyll Lanyon theme – it is really nice and by happy coincidence is the basis for the excellent Hugo tutorial Hosting on GitHub Pages by Spencer Lyon. The example repo is on Github.

My blog’s Github repository can be found here.

Implementation and Deployment

Couldn’t be easier: All you have to do is read and follow the Hosting on GitHub Pages tutorial.

Additional notes

Customization

Rather than change existing CSS files I customize the look of the site with a separate (./static/css/custom.css) file. Don’t forget to add a link tag to the new CSS file in the ./layouts/chrome/head_includes.html template.

I did have to make one change to poole.css from the example repo: For some reason lists were styled to render like paragraphs – fixed by deleting from poole.css:

/* Lists */
ul, ol, dl {
margin-top: 0;
padding-left: 0;
margin-bottom: 1rem;
list-style-type: none;
}

Importing posts from WordPress

I used Exitwp to import the exported WordPress posts to Hugo – it worked like a charm and saved me hours of drudgery.

  1. Export all WordPress data to an XML file – see the WordPress support pages for instructions.

  2. Convert to Jekyll format following the Exitwp instructions.

  3. Copy the posts from (in ./build/jekyll/<wordpress-site>/_posts/) to Hugo’s ./content/posts/ directory.

You will probably need to tweak the imported Markdown files:

Things I’ve learnt

As a side note, I like the Blog like there’s nobody reading philosopy, but it has it’s limits. There’s a lot more work goes into a readable and useful blog post than just throwing on-the-fly notes over the wall. On the plus side, putting my notes into a blog ensures that I understand them more then six months later.

Todo list

  1. Enable blog comments using Disqus – maybe.

  2. Enable syntax highlighting.

« Previous Next »