Darragh O'Riordan

Posted on Oct 13, 2022 • Originally published at darraghoriordan.com on Oct 1, 2022

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.