Let's face it - Jamstack websites have many advantages, but adding comments easily isn't one of them.
And for those of us with blogs, we know that a blog is never fully complete without comments. Blogging is meant to be a two way exchange, a way to build a community.
Jamstack's static nature means that comments don't come natively, but there is no shortage of third party comments providers - Disqus, Commentbox, Facebook Comments, among others.
The problem is that most of them are either not free, or they have ads and privacy concerns.
This is why I was excited when I discovered a comments app that's free, open source, and has no privacy issues.
What is Utterances
Utterances is a free, open source application that essentially acts as a widget on your blog post, storing comments on Github Issues. It creates a GitHub Issue for every blog post on your blog, then stores the blog comments as comments on that issue. You can moderate comments by editing those issues. To see how it looks like on an actual page, head to my original post and scroll down to the end!
Who is Utterances for
Because Utterances runs on Github Issues, it requires commenters to have a GitHub account, and to sign in everytime they want to comment. Therefore, Utterances is more suited towards developer/tech blogs, where the majority of readers would have Github accounts already.
How to set Utterances up
This tutorial is geared towards GatsbyJS websites, but will work for any react-based website.
First, you have to install Utterances to the GitHub repo that your website is hosted on. The repo has to be public. Click here to install the app.
Then, if you follow the instructions on Utterances' website, it gives you a simple script to insert into your HTML:
<script
src="https://utteranc.es/client.js"
repo="[ENTER REPO HERE]"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async></script>
However, this solution only works for simple Static HTML websites, and will not work for react-based Jamstack websites like GatsbyJS and Next.js.
Instead, make a Comments components:
//comments.js
import React from "react";
const Comment = ({ commentBox }) => (
<div className="comments-section-wrapper">
<div className="inner-section">
<h2>Comments</h2>
<div ref={commentBox} className="comments"></div>
</div>
</div>
);
export default Comment;
In your blog post template, create a ref that is attached to the commentBox prop on the Comments component
//blogTemplate.js
const commentBox = createRef();
Use the useEffects hook to add the script tag to the Comments Component using the ref:
//blogTemplate.js
...
useEffect(() => {
const commentScript = document.createElement("script");
commentScript.async = true;
commentScript.src = "https://utteranc.es/client.js";
commentScript.setAttribute("repo", "darrendube/website"); // PLEASE CHANGE THIS TO YOUR REPO
commentScript.setAttribute("issue-term", "pathname");
commentScript.setAttribute("id", "utterances");
commentScript.setAttribute("theme", "preferred-color-scheme");
commentScript.setAttribute("crossorigin", "anonymous");
if (commentBox && commentBox.current) {
commentBox.current.appendChild(commentScript);
} else {
console.log(`Error adding utterances comments on: ${commentBox}`);
}
}, [commentBox]);
...
You can now insert this Comments component anywhere on your website:
//blogTemplate.js
return (
...
<Comments commentBox={commentBox} />
...
);
Utterances provides a selection of 7 themes which you can find here. You can change the theme by changing the theme value in the useEffect hook. The widget is an iFrame so you can't use CSS to customise the comments - you are limited to the seven themes.
And that's it! If you want to see this in action, head to my original post and leave a comment there!
Top comments (13)
Hi @darrendube and thanks for sharing,
we are experimenting with another solution, based on Cusdis. The main advantage is that Cusdis does not require a Github account to add a comment.
Cusdis already supports many frameworks and platforms like Vue, Hexo, React and should work with any static site builder
You can follow our ongoing discussions regarding Hugo implementation on Hugo's discourse
(The design of your website is awesome BTW!)
A quick follow-up after having a look at Utterances:
the authentification with Github, required to post a comment, may be of interest, but the process is a bit worrying:
I appreciate the possibility to add reaction (emojii) to a comment though.
Does someone posting under one of your post get a notification when an answer is published?
No, I don't think they get a notification. It doesn't even seem possible to reply to a comment - you instead have to post a separate comment.
I do agree that the sign in process to post a comment would be a put off for some, so I hope your solution will solve that
With all due respect, I think this is a pretty trash solution and just because it exist, doesn't mean you should use it. I'd rather use a headless CMS for something like this. Github issues aren't there to give your blog a comment functionality.
If you are going to use Gatsby.js and go against its static nature, not to forget compiling it every time you add something, you know you have a hammer for a problem that is not a nail.
For a blog, I'd rather use WordPress. I can add Barba.js for prefetching and smooth page transitions which will make it feel like any other SPA with the added benefit of superior SEO and dynamic content. Along with WebPack, code-splitting, lazy loading, I don't think there is any other better option available today.
If you are going to use a JAM stack website and end up going against its essential static nature, I think it is better to use Next.js if not WordPress. Because God forbid if one goes against the hype-train and use old technologies that are for cavemen (referring to PHP and WordPress).
Please, reread my comment because you misunderstood me. I'm a MERN and LAMP stack developer. I don't choose one technology over another because I hold biases or misconceptions against them. I'm the type of person who understand that there are options and must choose a suitable option in order to solve the given problem. I've created the last few websites using WordPress and even my blog website is in WordPress.
I just think English is not your first language. I never said that PHP and WordPress is for cavemen, I said that usually new developers that jump at the MERN hype-train thinks that PHP and WordPress are for cavemen.
Utterances is great, but the problem with it is the fact that it (ab)uses GitHub Issues, which can flood your repository's issues. You can avoid this by creating a separate repository, but I built a better alternative: giscus. It utilizes GitHub Discussions instead, which includes support for replies, and other cool features.
Its always about selecting the right tool for the right thing understanding business perspective I belive for blogs there are way better solutions already there
Does this work for private repositories?
Hi Allan. There's a great answer to that question here.
Hope you enjoyed this article! Go ahead and leave a comment on my original post to test Utterances out!