Add comments to your static blog with utterances

3 minutes ⏳

A while ago I was looking for a way to add a comment section to my static blog and this is the result of all the googling I did on the subject 💪🏻

What’s on the menu

Disqus

The first solution I looked into is Disqus, but I soon decided not to use it simply because, while it’s a valid software with a huge community, it has some glaring flaws (at least for me):

  • the basic plan comes with ads

  • it tracks its users

  • if anonymous commenting is turned off, people need to create a Disqus account (more on that later)

  • it’s way too complex for my needs

Jamstack Comments Engine

Jamstack Comments Engine “… is an example of how a Jamstack site can implement comments.”

Ok, this is not exactly the first search result that comes up when googling “static blog comments”, but I ran into it and considered it simply because, from a developer point of view, it is a very smart approach.

The solution proposed here consists of a combination of Netlify Forms and its Submission API to trigger a new build of the web every time a comment is posted, after it’s approved by a moderator. It additionally explains how to create a Lambda function to get notified on Slack whenever a new comment comes in.

While I found this approach very interesting, I still have a day job and didn’t want to embark on the somewhat long, even though very well documented, process.

utterances

After I gave up on the comments feature (no one reads my two-month-old blog anyway), I stumbled upon utterances and it blew my mind with its simplicity. It took me 10 minutes to add it to this blog, build time included.

Preview of the comments on the utterances homepage
This is how the comment section will appear, from utterances homepage.

The perks

Straight from their page:

  1. It’s open source

  2. It doesn’t track users

  3. No ads 👏🏻

  4. All the comments data is stored in GitHub issues

  5. It’s lightweight

So, how does it work?

First of all, it uses GitHub issues to track comments, based on the post title: the first person to comment on a blog post will trigger the creation of a related issue and future comments on the same post will end up in that issue.

Smart, right? 🔮

The only requirements are that the repository connected to the app needs to be public and have the utterances app installed on it.

Users will comment using their GitHub account, which is perfect for a tech/programming blog.

Oh, and it comes with 8 themes that will play well with most of the colour palette of the blogs out there!

How to install it

Their page is pretty straightforward: just follow the configuration steps (repository name, optional label for the issues, chosen theme and even issue title format!) and you’re left with a script tag to add to your blog template:

<script
    src="https://utteranc.es/client.js"
    repo="antoBit/antodev"
    issue-term="title"
    label="💬"
    theme="dark-blue"
    crossorigin="anonymous"
    async
></script>

Note that the issue label supports emojis! 🎉

After that, just remember to install the utterances app on the same repository you provided in the repo attribute and you’re done!

Shameless plug

If you found this post useful and you liked it, why don’t you leave a comment below? I’d like to know what you think about this.

Thanks for reading!

#11ty #comments #utterances #jamstack #github