Remarkably Simple Comments: Utterances

Abstract

In this blog I'm explaining how the comment system used on this blog works and why I adore solutions like this.

Motivation

This is a blog, right? Blogs contain opinions and opinions are discussable. So what's the fun of a blog without comments? None.

So I wanted a comment system. Easy, no?
Here's the deal: This Website is built on top of Gatsby.

Why is this relevant?

For those of you who don't know Gatsby:

Gatsby is basically a Static Page Generator using the React Library. But it can do more.

Gatsby's approach is quite clever:

• You create rich, dynamic webpages built with React.
• Gatsby will prerender all pages which guarantees a fast experience for the user.
• After rendering the website will initialize React inside the static page and suddenly... the static pages come to life.

Gatsby gives you a ulot power. Bt compared to real Server Side Rendering it has it's drawbacks.

With Gatbsy you don't have databases that you can dynamically read and modify. That makes user generated content hard to handle.

Where do we store the comments?

So user generated content and Gatsby might be a mismatch. Okay. Then. Let's don't use Gatsby for comments.

Since Gatsby uses client-side React after initialization, pages can still be dynamic and do things any other web application would do. For example: Fetching data from another service and rendering a UI. Maybe we could hook up my blog with another service specialized in comments...

Comments as a Service

So I started looking into external Services that allow for comments. With some personal requirements:

• I didn't want to spend money*
• I didn't want ads. And
• I wanted a trustworthy place for the comments to be stored.

*At least for now when there are barely visitors. Thanks for reading though! 🤗

I was annoyed with my research results because I din't find any service meeting all my requirements.

Until I stumbled upon Utterances.

Utterances

Utterances is free. It doesn't use ads. It's open source. And it stores the data on GitHub (yes, GitHub!).

Utterances is a small JavaScript that you can inject in any page you desire. And tadaaa 🎉 A wild comment box appears.

And this is how it works (I love the simplicity of this!):

Utterances utilizes the issue system of GitHub.

• When the JavaScript Code is loaded it checks wether there is already a GitHub issue for the current (based on the pathname).
• If there is an issue it displays all comments made on this issue.
• If there is no issue, well then no comments were made yet.
• It also renders a text input and a submit button for new comments.
• When the submit button is clicked the script posts a comment to the GitHub issue (creating the issue first if necessary). And magically the new comment appears.

And that's it. Simply Genius. Simply Magical. 🪄

Utterances comes with a few requirements that are fine for my needs:

• The GitHub repository must be public (since my blog is public too, this is totally fine).
• The users that want to comment must authorize via there GitHub account. I expect most of my readers to have a GitHub account, so that's fine too. This also works as Spam protection, which is amazing.

The Beauty of Simplicity

I really like the simplicity of this approach.

The decision to use GitHub as database for a comment system feels bizarre at first glance. But genius on the second.

• GitHub is built with a great comment system in mind, so the data structures are sufficient.
• Comments are public anyway, so why not use a public repository?
• Spam protection via user accounts is the best solution, but who would sign up to comment on a smallish blog? But using a common account system? Perfect.

For me Utterances is the embodiment of thinking outside the box. And this is what I am aiming for when solving challenges.

PS: Feel free to try out the comments below. They even support emoji reactions 🙌