Blogging with Hugo

I wrote my home page with various tools …

Pure HTML

At the beginning, I used HTML and .shtml include files

Apache was told to process html include files, and I had the boilerplate and bottom in such files and included them from the per-page HTML files.

Webber

Later I switched to Webber. That was a python written open-source software that I published on gitorious.org. The original gitorious is now down, but you find the git tree still at https://gitorious.org/webber/webber, where an archive team resurrected the public git trees.

Webber has support for building “bread crumps” and menus at will. It also had support for plugins. And it also was quite slow and almost only used by myself.

Pelican

Much better maintained, and because of the plugins more powerful is, of course, the python based Pelican static web site generator. I used for some time, but only a few pages. Because then I detected …

Hugo

Hugo is blazingly fast, probably because it isn’t written in some interpreted, garbage collected language.

However, compared to plugin-based static website generators it is more limited. Some things, that should be easy, are more complex. Some things are even impossible. And it’s templating engine is nowhere near as nice as Jinja2, which is used by both Pelican and Webber.

Equations in templates are especially annoying … and surprising. For example, you don’t write

{{if "/de/" in .URLPath.URL}}

but you have to write:

{{if in "/de/" .URLPath.URL}}

It’s a bit like Forth, just upside down. But then not really Forth, because there are parenthesis there, too.

And still Hugo seems to suit my needs.

Structure

I use my own theme, which is based on Hugo’s Blackburn theme.

I simplified the sidemenu.html partial, massages the CSS a bit and simplified things. Blackburn’s side-menu.css mixes styling of the side-menu with styling of the block contents. I removed all of this and concentrated the styling of my contents into themes/my/static/css/my.css

I went with the taxonomies “Topics” and “Tags” instead of “Categories” and “Tags”, just for aesthetics.

However, I want to have a bilingual site. So I decided to use two Hugo Types. One is named “de” for german texts, the other one “en”. Each type got it’s own index page, see layouts/indexes/de.html and layouts/indexes/en.html. And I wrote a main layouts/index.html file that will show the newest 4 articles from each type.

Writing

I write blog pages either with Emacs┬┤ markdown-mode. Or I publish single subtrees directly from my Emacs’ configuration, which happens to be stored in an Org-Mode file.

Hosting

Together with my DSL account I have a home page at 1&1 internet. They provide me FTP access. I use sitecopy to update those pages.

Hugo tricks

HTML comments

Hugo normally eats all comments, but this code in a (full or partial) template will render a HTML comment:

{{"<!-- SOURCE: index.html //-->" | safeHTML}}

Setting language code

I couldn’t simply access the language code in my themes/my/layouts/partials/header.html partial. This generated error on pages like tags index.

And so reverted to parsing the URL and only switch the language code to german if the path says so:

<html lang="{{if in "/de/" .URLPath.URL}}de{{else}}en{{end}}">