How to Add Disqus to Gatsby Blog

A short guide on how you can add Disqus to your Gatsby blog.

Ever since reviving my blog I have been planning to add a discussion forum of sorts to it as well. Found Disqus as the right choice for now, although I would have gone for an open sourced alternative but after evaluating the other choices I ended up adding Disqus just to try out the free trial version for now. I might even build an open sourced alternative myself soon if this doesn’t work out well for me.

First and foremost, you’ll need a Disqus account and register a site so that you can access it via the shortname. A shortname is the unique identifier assigned to a Disqus site. All the comments posted to a site are referenced with the shortname. The shortname tells Disqus to load only your site’s comments, as well as the settings specified in your Disqus admin panel.

1. Register your site here

2. Enter a sitename to be used as reference

3. Check the image below

Next step is to open your Gatsby app’s codebase and install gatsby-plugin-disqus

yarn add gatsby-plugin-disqus

Once that is done successfully, update your gatsby-config.js to contain the following

module.exports = {   
    plugins: [  
        {   
            resolve: `gatsby-plugin-disqus`,   
            options: {   
                shortname: `your-disqus-site-shortname`   
            }   
        },   
    ]   
}

Lastly, use the following code sample to modify your blog component and setup Disquss as you like.

That’s it, folks. It takes about 10 minutes to get a simple smooth discussion platform up and running on your Gatsby blog. Reach out to me if you face any issues or have any doubts.

Originally published at https://www.shauryakalia.com.