DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Blog Comments Powered by GitHub
Loizos Kounios
Loizos Kounios

Posted on • Originally published at cergos.io

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.

Repository

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="https://utteranc.es/client.js"
        repo="loizoskounios/blog-comments-tracker"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
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) {
    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;
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 (23)

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

Collapse
 
shreyasminocha profile image
Shreyas Minocha

There's also commento.io

Collapse
 
robertcoopercode profile image
Robert Cooper

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

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

Collapse
 
loizoskounios profile image
Loizos Kounios Author

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.

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

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

Collapse
 
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
Collapse
 
whoisryosuke profile image
Ryosuke

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

Collapse
 
shushugah profile image
shushugah

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

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

Collapse
 
bauripalash profile image
Palash Bauri πŸ‘»

Amazing! Thanks For Letting Us Know About This Amazing Thing!πŸ™‚

Collapse
 
puritanic profile image
DarkΓΈ Tasevski • Edited on

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

🌚 Life is too short to browse without dark mode