Why the change?
Previously I used flatpress for hosting this blog. But the software was already quite old and recently it was announced that it was officially dead. So I had to find a new way to publish my blogs. I liked flatpress because it didn’t need a database and used plain text files to store the information. The news item of flatpress being dead mentioned static gen, which create static websites. So I decided to look at those and chose hugo.
How to setup hugo
I used the hugo’s quick start guide to setup my local environment.
The theme used
To use hugo as blogging software I looked at the themes which were available. There is a nice overview which shows the features the different themes have. Because I wanted a blog with search functionality, I chose After-dark, but that one seems to have vanished from the themes page. But because it is a dark theme, I copied the after-dark directory in the themes directory to light-blog and changed the CSS to get a light version of it.
Adding extra’s
With flatpress I used tags on my posts and it had a tag cloud, so I wanted to have the same with hugo. I used the tag cloud mentioned on hugo forum , which I added to a separate file themes/light-blog/layouts/partials/panels.html which I included to the themes/light-blog/layouts/_default/baseof.html and adjusted the css to put it on right. The source uses “.Permalink” in the code, but that results in a link with the external icon after it, even though these are links to my own site. So I changed the “.Permalink” in the code to “.RelPermalink” .
Config changes
I had to make some changes In the config.toml to be able to get the correct setup.
baseURL = "https://blog.stefan.ubbink.org/"
languageCode = "en-US"
title = "Why does(n't) it work?"
paginate = 5
theme = [
"light-blog"
]
enableRobotsTXT = true
googleAnalytics = ""
disqusShortname = ""
SectionPagesMenu = "main"
footnoteReturnLinkContents = "↩"
pygmentsCodeFences = true
pygmentsStyle = "monokailight"
[params]
description = "Time to investigate"
author = "Stefan Ubbink"
hide_author = false
show_menu = true
powered_by = true
[params.hackcss]
disabled = false
mode = "standard"
palette = "solarized-dark"
[menu]
[[menu.main]]
name = "Home"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "About"
weight = 2
identifier = "about"
url = "/about/"
[[menu.main]]
name = "Posts"
weight = 3
identifier = "post"
url = "/post/"
[outputs]
home = ["HTML", "RSS", "JSON"]
section = ["HTML", "RSS", "JSON"]
favicon issues
The after-dark theme used an embedded SVG favicon, so I wanted to create my own. I created my own SVG favicon with inkscape, but when I tried to minimalize it, it wouldn’t show in the browser. Apperantly the viewBox has to be a square. After I did that I kept the inkscape (plain) SVG as the favicon and it worked.
Publishing the site
To publish the site you can just run hugo in the directory where the files are stored. This will (by default) create a public directory where all the files are put. And then you can upload that directory to the server which will be hosting the site. The hugo site has a good description how to do that.