Add Disqus comments to a GatsbyJS static blog

There are different ways to add a comments section to your static website or blog, in this guide we won’t talk about pros and cons of each solution but we will actually focus on how to use Disqus to enable users to leave comments on a blog generated with GatsbyJS.

Even though this tutorial is focused on GatsbyJS it should apply to any React website.

Add website to Disqus

Disqus offers an easy to use platform to add comments to your website.

According to Wikipedia:

Disqus is a worldwide blog comment hosting service for web sites and online communities that use a networked platform. The company’s platform includes various features, such as social integration, social networking, user profiles, spam and moderation tools, analytics, email notifications, and mobile commenting.

Note: the info about the users and the comments will be stored on Disqus servers.

The first thing to do, if you didn’t do it yet, is to create an account and then register your new website in order to get the shortname, that will be used to retrieve the script that will load the comments section. It will be something like:

pasdam-github-io

Configure GatsbyJS to load Disqus comments

Next thing to do is to configure the GatsbyJS website to load the Disqus section. To do this there are few GatsbyJS plugins, but in this tutorial we’ll use the official React one.

So let’s install it with:

npm install disqus-react

The previous command will add the plugin to yours package.json file and download the required module.

Finally, last thing left to do is to add the section to the blog page, right under the article content (or wherever you prefer):

import React from 'react';
import { DiscussionEmbed } from 'disqus-react';

class Article extends React.Component {
  render() {
    const disqusShortname = 'example';
    const disqusConfig = {
      identifier: this.props.article.id,
      title: this.props.article.title,
    };

    return (
      <div className="article">
        <h1>{this.props.article.title}</h1>
        <p>{this.props.article.body}</p>
        <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
      </div>
    );
  }
}

The disqusShortname is the value that we got in the previous section when adding the website to Disqus.

To see the few changes I made to this blog to add the comments section just refer to the commit 6186e53.

Sources:

1. https://mk.gg/add-disqus-comments-to-gatsby-blog/
2. https://github.com/disqus/disqus-react