Setting up Hugo

I planned to setup a blog to keep track of some projects and learnings for quite some time now. I’ve worked with Wordpress a couple of times before and I didn’t like the idea of this much overhead for a mostly single-author site. I stumbled upon Julia Evans Blog a while ago and added her to my feed-reader, thats where I first heard of Hugo. Julia was Switching to Hugo and I read up on static site generation and Hugo. I also looked at Jekyll but I didn’t like the idea of dealing with Ruby for such a small project at all.

Setting up Hugo itself did prove to be as simple as advertised, both on my Windows Laptop for testing and on my Debian web server. Just download the binary (or .deb package) and you’re already done. Choosing a theme actually took longer than downloading and starting Hugo. I chose Hyde-Y for its clean look and feel and have been up-and-running in no time.
Thanks to KSubedi for the nice workaround for custom menu ordering.

To play it safe I wanted to add nice attribution links to embedded images, Hugo provides the figure Shortcode for this. I didn’t like the layout produced and tried to add a bold “Source: " using my own custom Shortcode. Hugos documentation proved to be pretty helpful. I adopted the figure shortcode to my needs:

<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
    {{ with .Get "link"}}<a target="_blank" href="{{.}}">{{ end }}
        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
    {{ if .Get "link"}}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
    <figcaption>{{ if isset .Params "title" }}
        <h4>{{ .Get "title" }}</h4>{{ end }}
        {{ if or (.Get "caption") (.Get "attr")}}<p>
        {{ .Get "caption" }}
        <b>Source:</b>&nbsp;
        {{ with .Get "attrlink"}}<a target="_blank" href="{{.}}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink"}}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>

When the attr attribute is used inside the image shortcode now, it generates the “Source: " addition for me automatically.

Source highlighting took some time to get right too, I ended up using custom CSS included in /layouts/partials/head-extra.html and the monokai highlighting CSS generated by richleland. I changed every occurence of .codehilite to .highlight so it would be used when pygmentsuseclasses inside config.toml is set to true. The results of my changes can be seen on this page.

I wanted to add a personal touch to the design of this blog so I added some custom CSS to change the blue tint to a nice green throughout the theme.

.main_wrapper > .main_header {
	background-color: #00C853;
}

.main_wrapper > .main_header a:hover {
	background-color: #22EA75;
}

.baselink { 
	display: block;
}

a {
	color: #00C853;
}

a:active, a:focus, a:hover {
	color: #00A631;
}


.main_wrapper>.main_content h2 a:hover, .main_wrapper>.main_content .readlink a:hover, .main_wrapper>.main_content .label:hover {
	background-color: transparent;
	color: #00A631;
	text-decoration: underline;
}

.main_wrapper>.main_content .navigation a:hover {
	background-color: #00C853;
}

The final step was to add an imprint to my page, hugo new imprint.md took care of that without any problems.

The only problem I am facing so far is using drafts, I want to be able to see what my post will look like when it is published, but I can’t use drafts for that as Hugo will display any draft to any visitor, no questions asked. For now, I set-up the same Hugo configuration on my local machine to view my drafts, if anybody has a good workflow for this, leave a note in the comments.