How to add blog page comments with

There’s some debate about whether adding a comment mechanism to a low-traffic blog like this one is worth the headache. In my case, I’m spending the time for three reasons: to learn about the best options available, to provide a dedicated way to interact with readers, and because this is relevant to my day job.

This blog is built with Hugo, and the simplest comment system to use in Hugo is Disqus. Hugo provides built-in support for it, and most themes make it easy to display comments at the end of your posts by just setting a variable or two. However, there are some privacy concerns about Disqus, which you can read about here. If those don’t concern you, Disqus is the shortest path to feedback success.

Alternatives to Disqus

The Hugo docs list some alternatives to Disqus here. Since this site is serverless by using Netlify to build and deploy, I didn’t want to complicate my life with a comment system that requires me to maintain infrastructure like a VM or a Kubernetes cluster. That means I could choose to pay for comments as a service, or find a serverless solution. I don’t have any problem paying for good software; but again, this is a hobby blog and mostly an experiment for learning. That raises the threshold for return on investment which eliminates most of the for-profit solutions. Some alternatives have no or low buy-in costs, but fees scale up with page hits or comment count. I was hesitant to choose those, since there is a (remote) possibility one of these posts might get its 15 minutes of fame on the web, and I’d faint when the bill came.

Choosing Utterances

Utterances is a small, open source TypeScript comments widget that stores comments as GitHub issues. Built by Jeremy Danyow, it’s a lighter-weight version of the comment system used with Good enough for me.

Implementing Utterances

Adding Utterances was pretty simple.

Run the Utterances configuration tool to generate the script configuration. Configuration tooloutput

Create site/content/layouts/partials/comments.html containing the output from the tool. For example:

$ mkdir -p site/content/layouts/partials
$ cat << EOF > site/content/layouts/partials/comments.html
<script src=""

Grant the Utterances app access to your GitHub account. I choose only the repo used to hold comments. Every person who wants to comment on an Utterances site will have to do this once.

What comments look like

On a post

Comments on mobile browser

On GitHub

Comments on GitHub

When you’ve had enough feedback on a post

To freeze comments associated with a post, open the GitHub issue associated with the post and click the 🔒Lock conversation button on the bottom right. 🔒 Lockconversation

You can delete a comment in the GitHub issue by clicking the ellipsis icon by that comment and selecting Delete.

Utterances limitations

  • Readers must have a GitHub account to comment. Utterances supports no other login or authentication mechanisms. Fortunately, it’s easy to get a free account.
  • For storing comments, Utterances supports only GitHub. GitLab, BitBucket, and so on are not supported. Since this site runs from GitLab, I created a separate repo in GitHub to hold the comments. Cats and dogs together.
  • Utterances uses third-party cookies. If you run a privacy-focused browser or browser extensions, this can require whitelisting servers to see the comments.
    • [*.]
    • https://[*.]

Try it out

Please try out the comment feature below this post and tell me what you think about this article.