A comment service in a blog site requires a dynamic server to facilitate it on the fly. That's why it is not possible for a static blog to support a comment service. However, with a support from a third-party app like Disqus, it is possible to add comment service to a static blog.

In this article I will show how to add comment service to a Gatsby powered blog site by using the 'disqus-react' component ( a React component for Disqus).

What is 'disqus-react' component?

'disqus-react' is a React component for adding Disqus comments to a web app like blog site. It supports live reloads when new data (comments) received from user. As all Gatsby site is a React site, so it's a simpler and easier approach to add disqus comment field to a Gatsby blog.

How to do?

First, you need to register your gatsby blog in disqus.com, and you'll get a unique "shortname" for your blog which later will be used in disqus configuration of your blog.

Second, you have to install the 'disqus-react' package in your site via NPM or YARN. I have shown the both approaches below.

# using NPM
$ npm install --save disqus-react

# using YARN
$ yarn add disqus-react

Third, you have to add the component in your blog post template (i.e. where you want to embed disqus comments field). A typical Gatsby blog post template file location is src/templates/blog-post.js, so add the following code there to import the 'disqus-react' component.

// blog-post.js

import Disqus from 'disqus-react'
// Or, you can import specific members of the component.
// For example,
// import { DiscussionEmbed } from 'disqus-react'

Now, it's time to define the disqus config object. For this you should consider the following variables:

• shortname is the unique identifier of your blog which you already know by registering your blog in disqus.com. Without this variable disqus comment field won't be loaded in your blog.
• identifier is used to identify each post of your blog. If it is undefined then the URL of the blog post will be used as identifier. It is highly recommend to define this variable by yourself because post's URL is unreliable (as it can be changed or modified). By doing so you can ensure the same thread of your blog post regardless of its URL.
• url defines the URL of the post. When a disqus thread is created for a blog post the URL of the blog post is recorded along with the thread so that disqus knows what page belongs to which thread. It is recommended to define this variable.
• title defines the title of the blog post when a disqus thread is created for the post. If undefined then the page's <title> tag is used to define the title of the post. If disqus couldn't retrieve the <title> of the page then URL of the page is used which isn't very pretty. So, it's better to define the title of the blog post in your disqus config.
• category_id is used to define the category of the post when a disqus thread is created for the post. If undefined then the disqus's default "General" category is used which you can set when you registered your blog in disqus.com.

For more information about disqus configuration variables visit JavaScript configuration variables.

Finally, embed <DiscussionEmbed> tag at the bottom of your blog post to display the disqus comment field.

That's all about the setting of disqus comment service in a Gatsby powered blog.

For your convenience, I have presented the below sample code with disqus configuration, which you can used in your blog post template (for example, a typical Gatsby blog post template file location is src/templates/blog-post.js).

// blog-post.js

// other import statements
import { DiscussionEmbed } from 'disqus-react'
// other import statements (if any)

const BlogPost = ({ data }) => {
    // your code (if any) ...
    
    // disqus configuration
    const disqusShortName = 'disqus-shortname-of-your-blog'
    const disqusConfig = {
        identifier: data.markdownRemark.id, // you can define anything as "identifier" for each blog post
        title: data.markdownRemark.frontmatter.title,
        url: 'https://example.com' + data.markdownRemark.frontmatter.path, 
    }
    return (
        <Layout>  
            <div>
                // your code for displaying the blog post details ...
            </div>
            <div>
                <DiscussionEmbed shortname={disqusShortName} config={disqusConfig} />            </div>
        </Layout>
    )
}

// your graphql query code ...

export default BlogPost

All set now! Go to your blog site, you'll find disqus comment filed is loaded in every post of your blog. Pretty awesome!

Summary

The 'disqus-react' component really makes the process simpler to add Disqus comment to a Gatsby powered blog. By following this article you can add Disqus comment service to your Gatsby blog.

Happy coding!

References

• 'disqus-react' - GitHub page
• JavaScript configuration variables