Setup Comment functionality for your Gatsby based blog

Introduction

In today's AI age, there are hardly any original blogs left whhich doesn't use the autogenerated content from AI tools and shares original human thoughts with others. One such blog is the one you're reading now. The content may not have such fancy words or polished idioms but the content is original and that means a lot now a days. But having just a blog doesn't make it through if it deosn't have any comment functionality.

Well, it may seem trivial but its actually quite important to be able to share and gather opinions about the blog's content and that can be acheived via the comments section. Now, I can go on to tell you how important a comment section is, but that's not what you're here to know.

So, let's dive straight to the point. How to implement a comment functionality on a gatsby based blog? In this post, we'll cover the simplest solution which is to use an already existing tool like Disqus and configure it to setup the comments section.

DISQUS: The Simplest Option

There are quite a lot of options available out there, but nothing beats the simplicity of setting up the Disqus plugin. It hardly takes even 5 mins. Let's start.

Get Disqus URL

First we will need an account on the Disqus platform. If you already have a registered custom domain, it's great. But if not, no worries, it also works with subdomains. Possibly you may have hosted your blog on netlify.com, which means, you'll have domain as https://<your-subdomain>.netlify.app

So, to continue with this URL, head over to this link and register an account.

You'll come accross two options on the next page as shown below. Make sure to select the right one as circled.

The next page is where we need to enter the domain url. Here, we can add the custom domain as mentioned before or the subdomain as shown in the screenshot below. We get the disqus domain URL (circled) which would be used in the next step for the configuration on our Gatsby site. For the rest of this blog post, we'll be taking the netlify subdomain as an example.

Make sure to select an appropriate category for the blog - basically what the blog is all about.

After having done that, we will be presented with some package selection menu, selection of which depends on person to person, also on the use-case. If its some business website, preferrably go for some premium package, which offers ad-free plugin. For hobbyist and personal blogs, free version works fine.

Next screen is where intallation instructions can be found depending on the different platforms. For our case, we can select the Gatsby platform as highlighted below

You can continue to setup the basic Disqus account settings like content moderation etc. But the important step here was to obtain the Disqus URL.

Up until now, we've only obtained the Disqus-URL. Next step is to install the plugin, configure it, and include this Disqus-URL to enable the comments section on the blog.

Setup Disqus plugin

Installation

To install the Disqus plugin, simply go to the root directory of your gatsby blog's project and run the following command

npm install --save gatsby-plugin-disqus

if you prefer to use npm.

OR

yarn add gatsby-plugin-disqus

if you prefer Yarn.

Plugin configuration

After installing the disqus plugin, we need to configure our gatsby project to use the plugin. To start with, create a file .env (for local testing only, for deployment set the contents of .env as environment variables), and paste the following content in the file.

DISQUS_SHORTNAME=your-subdomain-netlify-app.disqus.com BASE_URL=https://your-subdomain.netlify.app/

It is always good to enter the sensitive information like API keys or user credentials for some service into the environment variables as it is a more secure way to provide the information to the application. If we're running the Gatsby website in a kubernetes pod, we can use the cluster secrets to store the credentials.

In case you have a custom URL, then enter that URL instead. Don't just copy paste.

Now, once the environment variables are set, lets go ahead to configure the gatsby application.

To do so, go to the gatsby-config.js and paste the following code snippet

// gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-plugin-disqus`, options: { shortname: `${process.env.DISQUS_SHORTNAME}` } }, ] }

The important section here to note is only the highlighted lines below

// gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-plugin-disqus`, options: { shortname: `${process.env.DISQUS_SHORTNAME}` } }, ] }

Notice that we've not hardcoded the Disqus URL on line 7, but rather provided en environment variable from where the value can be extracted.

Next, wherever the Disqus plugin is required, first import the plugin as shown on line 1, then provide the custom configuration as shown on line 13 - 17.

Finally, conditionally load the Disqus component depending on whether the plugin is loaded or not, as shown on line 26.

import { Disqus } from 'gatsby-plugin-disqus'; // .... // inside your blog component, whatever be it's name export const BlogPostTemplate = ({post}) ={ if (post !== null && post!== undefined) { const { markdownRemark } = post const { id, frontmatter, fields } = markdownRemark if (id !== undefined && frontmatter !== undefined && fields !== undefined){ disqusConfig = { identifier: id, title: frontmatter.title, url: process.env.BASE_URL + fields.slug } } } return ( <section> //... blog post content {(disqusConfig != null) && (<Disqus config={{disqusConfig}} />)} </section> ) }

And that should be all. It should already render a disqus comment section on your blog posts.

Debugging

In case the plugin still doesn't work for some reason, we can take a look at the common mistakes which may occur.

• For starters, verify whether the plugin is installed correctly or not. To do so, check the package.json file and verify if gatsby-plugin-disqus is present there.

  If plugin is present, also verify in package-lock.json (in case npm is used) or yarn.lock (in case yarn is used in the project)

• Try to Copy paste the Disqus URL, instead of typing it out. A lot of time can be saved due to silly typing mistakes in the Disqus URLs.
• Verify if the Disqus plugin is being loaded properly, or the values are being fetched properly from the environment variables. Most of the time, it is either the env variables not loading properly, or the Disqus plugin itself which fails to load properly.

Finally, your disqus comment section should start to appear on your blog.

---

I hope this post helped you in some way. If yes, do share it with your friends, or simply hit a like button.

Do let me know your reviews, if you like this post, or if you've any quesitons or suggestions, in the comments below.