DEV Community

Cover image for Blog Comments Powered by GitHub
Loizos Kounios
Loizos Kounios

Posted on • Originally published at

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

Utterances installation

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=""
Enter fullscreen mode Exit fullscreen mode

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

    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 = '';
    scriptEl.setAttribute('repo', 'loizoskounios/blog-comments-tracker');
    scriptEl.setAttribute('issue-term', 'title');
    scriptEl.setAttribute('theme', 'github-light');
    scriptEl.setAttribute('crossorigin', 'anonymous');

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

export default Comments;
Enter fullscreen mode Exit fullscreen mode

Final Result

This is the final result in a dummy blog post.

A post with an Utterances comment section

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.

Top comments (17)

sunnysingh profile image
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 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

shreyasminocha profile image
Shreyas Minocha

There's also

robertcoopercode profile image
Robert Cooper

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

tobiassn profile image
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.

loizoskounios profile image
Loizos Kounios

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

Sloan, the sloth mascot
Comment deleted
tobiassn profile image
Tobias SN

Or maybe your readers aren’t developers.

bgadrian profile image
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".

komljen profile image
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.

tobiassn profile image
Tobias SN

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

Sloan, the sloth mascot
Comment deleted
Sloan, the sloth mascot
Comment deleted
whoisryosuke profile image

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

shushugah profile image

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

zeerorg profile image
Rishabh Gupta

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

bauripalash profile image
Palash Bauri 👻

Amazing! Thanks For Letting Us Know About This Amazing Thing!🙂

puritanic profile image
Darkø Tasevski • Edited

Now, quickly, create a whole new post about this while also linking it to this one... /s