How add comments to your Gatsby site with utterances

Photo by Markus Spiske on Unsplash

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

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> =

  useEffect(() => {
    if (commentsInjectionRoot.current?.children.length === 0) {
      const scriptEl = document.createElement("script");
      scriptEl.setAttribute("src", "");
      scriptEl.setAttribute("crossorigin", "anonymous");
      scriptEl.setAttribute("async", "true");
      scriptEl.setAttribute("issue-term", "pathname");
      scriptEl.setAttribute("theme", "github-light");
  }, []);

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

Then where ever you want the comments add the component.

<Comments />

comments ui


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