How add comments to your Gatsby site with utterances

If you want to add comments to your blog quickly there is a nice tool called utterances that uses a GitHub Repo as the api.

Here is how I setup utterances for my gatsby blog in typescript.

Utterances

Utterances is a javascript tool that uses a GitHub repo as the store and api. This makes it ideal for static sites.

People will have to log in to their GitHub accounts to post a comment so spam shouldn't be too much of an issue. This does mean that Utterances is mostly suited to a site with a developer audience.

Because data is stored in a GitHub repo, you actually own it! This is much nicer than tools like Disqus.

Setup on Github

You have to have a public GitHub repo. My blog content is private so I set up a specific repo for blog comments.

The you install the app on that repo by visiting

https://github.com/apps/utterances

Click "install" and then select your comments GitHub repository.

Adding the UI to your site

You have to inject a script where ever you want the control. I created a component for this. You can see how each of the settings work below.

import React, { useEffect } from "react";
export const Comments = () => {
  const commentsInjectionRoot: React.RefObject<HTMLDivElement> =
    React.createRef();

  useEffect(() => {
    if (commentsInjectionRoot.current?.children.length === 0) {
      const scriptEl = document.createElement("script");
      scriptEl.setAttribute("src", "https://utteranc.es/client.js");
      scriptEl.setAttribute("crossorigin", "anonymous");
      scriptEl.setAttribute("async", "true");
      scriptEl.setAttribute(
        "repo",
        "darraghoriordan/darragh-oriordan-com-comments"
      );
      scriptEl.setAttribute("issue-term", "pathname");
      scriptEl.setAttribute("theme", "github-light");
      commentsInjectionRoot.current?.appendChild(scriptEl);
    }
  }, []);

  return (
    <div className="container pt-8">
      <h1 className="mt-0 mb-0 text-3xl font-normal leading-normal">
        Comments
      </h1>
      <hr className="my-0" />
      <div ref={commentsInjectionRoot} />
    </div>
  );
};

Then where ever you want the comments add the component.

<Comments />

Summary

Utterances is an easy way to add comments to a developer site and you own all the data so it's low risk.

Give it a try today! - https://utteranc.es/