Blog Comments Powered by GitHub

When I was in the final stages of developing my blog, I started looking into the best way to handle comments. After going through the list of usual suspects (such as Disqus), I ran into a series of blog posts (1, 2, 3, and more) on the topic of using GitHub for comments. As I kept digging, I noticed a common pattern in the aforementioned blog posts – people were ditching Disqus for a GitHub solution due to how slow, bloated and privacy-intrusive Disqus is. I was now convinced that leveraging GitHub was the way to go.

So I started making notes about all the necessary components. Things like handling the GitHub API rate limits, styling the comments section, automating the process of creating a GitHub issue for every blog post, etc. And then I ran into Utterances.

Utterances

Utterances takes all the hard work you'd have to do to have a GitHub-backed comment section on your blog and packages it into a GitHub app. It is open source and even comes with a dark theme! I have already integrated it on my blog and can confirm that the entire process is completely painless. Here is the list of steps I had to take to set it up.

Create Public GitHub Repository

The first step was to create a public GitHub repository for housing my blog's comments.

Install Utterances App

Then I had to install the Utterances GitHub app to the repository I created above.

Generate Script Tag

I then used the configuration section on the Utterances website to generate the script tag that I would later load on my blog. The script tag in my case was the following:

<script src="https://utteranc.es/client.js"
        repo="loizoskounios/blog-comments-tracker"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Load Script

All that was left was for me to load the script into my Gatsby blog. Luckily, it was fairly easy to set this up in React.

To load the script in React, I had to manually create the script element and append it as a child to some other element. I used the document global to create the script element, and a React ref to keep a reference to the component that would house the script element. This is what I ended up doing, with all extra noise removed (things like Gatsby static queries, styled-components, etc).

import React from 'react';

class Comments extends React.Component {
  constructor(props) {
    super(props);

    this.commentsEl = React.createRef();
    this.state = { status: 'pending' };
  }

  componentDidMount() {
    const scriptEl = document.createElement('script');
    scriptEl.onload = () => this.setState({ status: 'success' });
    scriptEl.onerror = () => this.setState({ status: 'failed' });
    scriptEl.async = true;
    scriptEl.src = 'https://utteranc.es/client.js';
    scriptEl.setAttribute('repo', 'loizoskounios/blog-comments-tracker');
    scriptEl.setAttribute('issue-term', 'title');
    scriptEl.setAttribute('theme', 'github-light');
    scriptEl.setAttribute('crossorigin', 'anonymous');
    this.commentsEl.current.appendChild(scriptEl);
  }

  render() {
    const { status } = this.state;

    return (
      <div className="comments-wrapper">
        {status === 'failed' && <div>Error. Please try again.</div>}
        {status === 'pending' && <div>Loading script...</div>}
        <div ref={this.commentsEl} />
      </div>
    );
  }
}

export default Comments;

Final Result

This is the final result in a dummy blog post.

If you want to see how this thing works in action, Utterances is already integrated in my blog. Feel free to use it as a playground.

Comments

[Sunny Singh]

This is a perfect solution for developer-focused blogs. And as @mudasobwa pointed out in the comments, also helps filter out unwanted commenters.

I personally switched to commentbox.io/ which is just a cleaner privacy-focused alternative to Disqus. Honestly though, I no longer see a huge need for comments on a self-hosted blog as I prefer to just have those discussions on social media or sites like dev.to.

[Shreyas Minocha]

There's also commento.io

[Robert Cooper]

Thanks for mentioning commentbox.io. I might switch over from disqus to use their service.

[Tobias SN]

Most people will probably stick with a solution that allows people to either comment without an account or log in with a service that has a lot more users.

[Loizos Kounios]

Absolutely! It's always a trade-off. :-)

[Tobias SN]

Or maybe your readers aren’t developers.

[Adrian B.G.]

Nice, I had this issue last week for my new blog, I went with Disqus, did not knew about the Github Trick.

Funny how ppl nowadays load JS files using React. React becomes the new jQuery, soon Ill see stackoverflow questions like we did 10yrs ago with jQuery: "how can I sum 2 numbers with React".

[Alen Komljen]

I moved all discussion on my blog to Twitter. After each post, clicking on a link will open a Twitter search for blog URL.

[Tobias SN]

I'm not sure most people would create a new account just to make comments on some random blog.

[Ryosuke]

What prevents other people from using your comment repo on their website? 🧐

[shushugah]

Has anyone figured out a way to authenticate with Twitter, or other platforms (who then can post as a shared/generic github user?)

[Rishabh Gupta]

I think Microsoft has moved their docs to github, and is using a similar solution for tracking issues and comments.