Enable comment section in this blog

This blog now has a comment section! It’s provided by utterance. And in this post we talk about how it is done.

utterance is a lightweight comment widget built on the Github issues. It’s open source and the comments are stored in Github issues. This means viewers will need github accounts to leave a comment.

Installation steps

The installation is quite simple, and you can find step by step installation and configuration at utterance’s website. You just open this website, fill out the blank accordingly, and a widget script will be available for you to put in your blog website.

1. You will pick a github repo to store the comments. This repo should be public in order for every one to leave a comment.

2. Install the github utterance app

3. Configure the post <---> issue mapping relation, the issue label and the utterance theme. Then a script will be automatically generated for you to enable a comment section in your website.

Configure the Hugo-Academic template

This blog uses the Hugo-Academic template. Actually, it comes with built-in comment widget template files for Disqus and Commento. Details can be found at here.

In order to add utterance, just navigate to themes/academic/layout/partials, and open the source file comments.html. Then replace everything in it with the utterance script you just got.

Tweaks need to be made

The utterance script uses a fixed theme while the academic website template supports automaticly changing light/dark mode. Some tweaks are necessary to make it take effect on the comment section.