Jamstack comments suck - but they don't have to
Tags: javascript, webdev, beginners, react
Published: 2021-05-24 21:34:23

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](https://utteranc.es) is a free, open source application that essentially acts as a widget on your blog post, storing comments on [Github Issues](https://guides.github.com/features/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](https://darrendube.com/blog/web-development/comments-in-jamstack-websites) 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](https://github.com/apps/utterances) to install the app.

Then, if you follow the instructions on [Utterances' website](https://utteranc.es), it gives you a simple script to insert into your HTML:

```jsx
<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:

```jsx
//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

```jsx
//blogTemplate.js
const commentBox = createRef();
```

Use the `useEffects` hook to add the script tag to the `Comments` Component using the ref:

```jsx
//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:

```jsx
//blogTemplate.js
return (
  ...
  <Comments commentBox={commentBox} />
  ...
);
```

Utterances provides a selection of 7 themes which you can find [here](https://utteranc.es). 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](https://darrendube.com/blog/web-development/comments-in-jamstack-websites) and leave a comment there!