Adding comments to a Gatsby Blog

30 November, 2021 — gatsby — 1 min read

One key feature of a blog is to allow readers to leave comments. One of the easiest way to do this in Gatsby is to use Disqus. While one might be tempted to rollout a custom comments system, it's not very straight forward to just drop it in Gatsby. Requires time, effort and may be capital.

Before you dive into the detail below, remember that you need Disqus account to roll this out.

1. Add `gatsby-plugin-disqus`

1npm install --save gatsby-plugin-disqus

2. Update `gatsby-config.json`

gatsby-config.js

1{
2  resolve: `gatsby-plugin-disqus`,
3  options: {
4    shortname: `your appname`,
5  },
6},

3. Update the blog template to pull disqus comment widget

Official disqus documentation suggests using additional attributes, but it wasn't working. Following worked for me.

post.tsx

1<Disqus config={{ identifier: post.slug, title: post.title }} />

Remember that the Disqus widget should be embedded in the page which renders that "blog" post. For me it was post.tsx but in your case it might be different.

Refer to the Git diff that worked for me.

Git diff for ease of reading

1diff --git a/gatsby-config.js b/gatsby-config.js
2index b2f94be..776af59 100644
3--- a/gatsby-config.js
4+++ b/gatsby-config.js
5@@ -73,6 +73,12 @@ module.exports = {
6     },
7     `gatsby-plugin-offline`,
8     `gatsby-plugin-netlify`,
9+    {
10+      resolve: `gatsby-plugin-disqus`,
11+      options: {
12+        shortname: `chandankumar`,
13+      },
14+    },
15     // `gatsby-plugin-webpack-bundle-analyser-v2`,
16   ],
17 };
18diff --git a/package.json b/package.json
19index 265066a..31cf494 100644
20--- a/package.json
21+++ b/package.json
22@@ -18,6 +18,7 @@
23   "dependencies": {
24     "@lekoarts/gatsby-theme-minimal-blog": "^2.2.2",
25     "gatsby": "^2.13.3",
26+    "gatsby-plugin-disqus": "^1.2.3",
27     "gatsby-plugin-google-analytics": "^2.1.4",
28     "gatsby-plugin-manifest": "^2.2.3",
29     "gatsby-plugin-netlify": "^2.1.3",
30diff --git a/src/@lekoarts/gatsby-theme-minimal-blog/components/post.tsx b/src/@lekoarts/gatsby-theme-minimal-blog/components/post.tsx
31index 1f63e43..f2f57c2 100755
32--- a/src/@lekoarts/gatsby-theme-minimal-blog/components/post.tsx
33+++ b/src/@lekoarts/gatsby-theme-minimal-blog/components/post.tsx
34@@ -5,6 +5,7 @@ import React from "react";
35 import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
36 import ItemTags from "@lekoarts/gatsby-theme-minimal-blog/src/components/item-tags";
37 import SEO from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo";
38+import { Disqus } from "gatsby-plugin-disqus";^M
39
40 type PostProps = {
41   data: {
42@@ -71,6 +72,7 @@ const Post = ({ data: { post } }: PostProps) => (
43     >
44       <MDXRenderer>{post.body}</MDXRenderer>
45     </section>
46+    <Disqus />^M
47   </Layout>
48 );