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.
The perks
Straight from their page:
- It’s open source
- It doesn’t track users
- No ads 👏🏻
- All the comments data is stored in GitHub issues
- 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>
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 (2)
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 ?
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 😊