I am currently travelling with my family in South East asia. The trip is planned to last about one year, so before we left home (Denmark) I set up a blog to use as a diary for ourselves and to keep friends and family updated while we are away.

Since I like to do a little programming in my spare time, I decided to use Hugo as my blogging platform. That has been a wise choice so far, and I can only recommend that you give it a try.

Most places we have stayed, the internet connection has not exactly been very reliable nor fast. A few exeptions were some guest houses in Vietnam, which to my surprise had very decent connections.

Benefits of using Hugo for Me

• Completely self contained offline editing
• Edit content using Markdown (even my wife can do this).
• Easy deployment using github pages
• No worries about servers, databases, backups etc.

Creating a Theme

I wanted to experiment with creating my own theme for the site, to get at better feel of how hugo works. Of course this took a litle trial and error, but wasn’t too hard given the documentation of Hugo.

Hugo documentation offline

If you need to work offline, do yourself a favour and clone the hugo git repo. Then you can serve up the hugo docs locally like this:

cd path/to/hugo
cd docs
hugo server -p 1314

Note that i am serving the docs on a different port, since i lets me use the default port (1313) for the blog.

Having a copy of the hugo git repo also lets you compile the hugo binary from the sources, and maybe contribute to the project and help improve the platform.

Foundation Tweaks

I chose to give Foundation a try, and I wanted to use the Sass version. However, the default project created by foundation, doesn’t play nice with the folder layout used by hugo so I had to tweak the configuration a bit.

Basically I created a default Foundation project, and modified the paths to generate the bower components, and the compiled css inside the static folder used by hugo. The sass sources (scss folder) was not moved into the static folder, since the generated site only uses the compiled css file.

When I am editing the theme, I keep two terminals open. One running bundle exec compass watch to update the css when the sass input changes, and another terminal running hugo server -w to serve up the site locally.

What I gain from this is the ability to work with the theme styles using sass pre-processing, and still leverage the power of liveupdating the site provided by hugo.

Get the Source

If you want to take a closer look at the details, I have published my theme on github.