DEV Community

Cover image for Add comments to your 11ty blog with utterances
Antonio Piras
Antonio Piras

Posted on • Originally published at antopiras.dev on

Add comments to your 11ty blog with utterances

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 explain 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 months 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 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 color 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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (3)

Collapse
 
andyfitz profile image
Andy Fitzsimon

Nice one, I've refrained from adding comments because quite frankly I'm too far down the performance rabbit hole and don't want a http request that most people won't use.

Any tips for keeping utterances weight down ?

Collapse
 
antopiras89 profile image
Antonio Piras

It's really lightweight and you can load the script asynchronously, it won't cut down too much on your performance. I know it didn't on my blog...

You can always add it behind a "show comments" call to action and load the required script after someone clicked on that.

I'd say just try it, it's so easy to add it that you can always revert back in a matter of minutes if you notice a slowdown šŸ˜Š

Collapse
 
octavian_contis_0488cd88b profile image
Octavian Contis

great! does this work with guest comments?