Labertasche - a comment system for Hugo

The other day I have released the first version of a new comment system for the static site generator GoHugo .

Static site generators are generally awesome, you write the template, as well as the articles, in plain text, and the generator generates a static web page with little attack surface, other than the server. They are also providing your users with a better experience than any dynamic web page, since there is no delay between page loads other than networking.

Hugo is one of these static site generators. However, interaction is key these days and users want to comment on things. If you take a look around, most comment systems were made with Javascript and are a pain to template. Or they are paid and even include ads on your otherwise ad-free site. They may also track users across sites, such as Disqus. This just sucks.

So I have been pondering about how to bring comments to my static site, without sacrificing speed, and after discovering the data folder functionality in Hugo, gloves are off.

How does it work?

First of all, you need a server, and a program to receive data. There is no other way. My choice was Python here, since I am the most comfortable with it. I also chose Flask over Django, since it comes with less overhead.

There are 2 parts to the program:

• comments related routes
• the administrative backend

The backend serves as an overview of made comments, provides an opportunity to review spam and block/unblock email addresses that have been detected as spam by the anti-spam component .

The comment routes provide a POST route, where the comment will be received via the included Javascript, that runs on your site. This function provides some callbacks and status-codes, which you can use to display dialogs and other helpful messages to your user.

The comment is checked for various exploits, such as trying to change the path of the relative url and also by the spam detection. The mail is checked against a block list of throw away mail providers and the internal block list. Then HTML tags are being removed. Last, but not least, it looks for text smileys and replaces them with their unicode equivalents.

Then there is of course all the internal stuff, such as entering it into the database and exporting the json into your Hugo directory, where you can then commit it to git and rebuild the site. As mentioned in the docs, I am using hugo --watch via a systemd service for that, as it is the most convenient solution. An even more easy to do solution is to just utilize screen, which is a program that can keep your bash running, even if you disconnect/log out of the server, by pressing Ctrl-A-D.

Integration is fairly straight forward. You will need to add the Javascript from the js folder in the root directory to your Hugo installation and add more code for error messages and notifications. You can test it right here, under this post, how I have implemented it. The POST function takes a callback, so you can easily add the code via a different js file, combine them via Hugo’s asset pipeline and replace the code from Labertasche at any time when a new version ships.

The other step is of course adding the templates and commands necessary to load the json from Labertasche during generation of your website by Hugo. This will then integrate the comments into your HTML directly, and you will not need to load them via Javascript. This is why I have done this. A direct integration, maintaining the spirit of a static website.

You can find a more detailed explanation on the git, please do comment if there is something missing, bugs or errata. If you do not wish to comment, you can also write your thoughts to contact@tuxstash.com.

ps.: Labertasche is German for someone who talks too much.