DEV Community 👩‍💻👨‍💻

Cover image for Jamstack comments suck - but they don't have to
darrendube
darrendube

Posted on • Originally published at darrendube.com

Jamstack comments suck - but they don't have to

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

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;
Enter fullscreen mode Exit fullscreen mode

In your blog post template, create a ref that is attached to the commentBox prop on the Comments component

//blogTemplate.js
const commentBox = createRef();
Enter fullscreen mode Exit fullscreen mode

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]);
...
Enter fullscreen mode Exit fullscreen mode

You can now insert this Comments component anywhere on your website:

//blogTemplate.js
return (
  ...
  <Comments commentBox={commentBox} />
  ...
);
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
roneo profile image
Roneo.org • Edited on

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!)

Collapse
roneo profile image
Roneo.org

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:

utterances by utterances would like permission to:
Verify your GitHub identity (RoneoOrg)
Know which resources you can access
Act on your behalf

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?

Collapse
darrendube profile image
darrendube Author

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

Collapse
hasnaindev profile image
Muhammad Hasnain • Edited on

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).

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
hasnaindev profile image
Muhammad Hasnain

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.

Thread Thread
Sloan, the sloth mascot
Comment deleted
hasnaindev profile image
Muhammad Hasnain • Edited on

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.

Collapse
laymonage profile image
sage

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.

Collapse
tanzimibthesam profile image
Tanzim Ibthesam

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

Collapse
allanmacgregor profile image
Allan MacGregor 🇨🇦

Does this work for private repositories?

Collapse
darrendube profile image
darrendube Author

Hi Allan. There's a great answer to that question here.

Collapse
darrendube profile image
darrendube Author

Hope you enjoyed this article! Go ahead and leave a comment on my original post to test Utterances out!

Head to your account's Settings to...

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content