How add comments to your Gatsby site with utterances

Published on October 01, 2022

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

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building and supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My Universal DevShell tooling will save you 30+ hours of configuring your Windows or Mac dev environment with all the best, modern shell and dev tools.

Get DevShell here: ✨

Read more articles like this one...

List of article summaries


Building an AI generated game with Stable Diffusion and data from Wikipedia

Last week I released a game called Doodle:ai.

In the game you’re shown AI generated images and you have to guess the Wikipedia topic it used to create the game.


Easiest way to optimise images for web

Here is how I optimise all pngs and jpgs in a folder for publishing to the web.


Start tracking DORA metrics for your team in just 15 minutes with Apache Dev Lake

DORA (DevOps Research and Assessment) metrics are an excellent way for engineering organisations to measure and improve their performance.

Up until now, monitoring the DORA metrics across Github, Jira, Azure Devops etc required custom tooling or a tedious manual process.

With Apache Dev Lake you can get beautiful reporting for DORA metrics on your local machine in as little as 15 minutes (honestly!).

From Google Sheets to Grafana
From Google Sheets to Grafana


A summary of NDC Sydney 2022 Developer Conference

I attended my first in-person conference for more than 3 years last week! NDC is one of the more well-known developer conferences in Australia and New Zealand. It’s a 5 day conference with 3 days of talks and 2 days of workshops.

There’s so much to learn across all the streams so I try to take notes for each of the talks to quickly reference them later. This post contains all my notes. I’ll add the relevant videos to talks later if they’re released.

A reminder that these notes are just my notes. They’re paraphrased and summarised from what the speaker actually said. Each speakers would have provided must more clarity and went into more detail during their pressos!