Adding Disqus comments to Gatsby blog theme

April 17, 2020

The Gatsby blog theme has been a great way to get started with a blog but I wanted to allow any vistors to comment on my articles if they so choose. That isn’t something you get with just static content. Luckily the process was fairly straight forward but there were a couple of unobvious steps so I figured I’d document the process for others.

It’s worth noting using a service like Disqus to add comments to your site does come with a couple downsides:

1. Your site is no longer just static content. You will definitely see increases in your page load time
2. Disqus tracks users and supports itself using targeted advertising. Some users may have ad blocking extensions that disable Disqus on your site

If you think it makes sense for your site then you can add Disqus using the following steps:

1. Sign up for Disqus

Sign up for a Disqus account for your site (I chose the free tier). Make note of the shortname for your site (the first part of your Disqus URL) as you’ll need that later:

2. Install disqus-react package

The disqus-react package will give you a React compontent you can use in your markup. Install via npm or yarn:

yarn add disqus-react

3. Copy post.js from the theme’s folder in node_modules to your src folder

By default the gatsby-theme-blog doesn’t put the file containing your post React component (post.js) in your src folder. Any components not found there will be read out of your theme’s folder in node_modules. So before we can make some edits to the blog component we’ll need to copy the default post component to your src folder:

cp node_modules/gatsby-theme-blog/src/components/post.js src/gatsby-theme-blog/components/

Since we’ve changed the location of the component, we’ll also need to fix up the imports at the top of the file. Change them from:

import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "./layout"
import SEO from "./seo"
import PostTitle from "./post-title"
import PostDate from "./post-date"
import PostFooter from "./post-footer"

(or whatever yours look like) to:

import { MDXRenderer } from "gatsby-plugin-mdx"
import Layout from "gatsby-theme-blog/src/components/layout"
import SEO from "gatsby-theme-blog/src/components/seo"
import PostTitle from "gatsby-theme-blog/src/components/post-title"
import PostDate from "gatsby-theme-blog/src/components/post-date"
import PostFooter from "gatsby-theme-blog/src/components/post-footer"

4. Add the DiscussionEmbed component to your posts

The first thing to do is import the Disqus component at the top of your post.js file:

import { DiscussionEmbed } from "disqus-react"

You’ll probably want your Disqus comments to show up after your post body, so after the <MDXRenderer> component include the <DiscussionEmbed> component:

...
  <MDXRenderer>{post.body}</MDXRenderer>
  <DiscussionEmbed
    shortname='your-sites-shortname'
    config={{ identifier: slug, title }}
  />
...

Notice there’s a config property that requires an identifier and a title. We’re already getting the title from our props but we need to get the slug as well. It’s already being passed into the props for the Post component so we just need to pull it out. Change:

const Post = ({
  data: {
    post,
    site: {
      siteMetadata: { title },
    },
  },
  location,
  previous,
  next,
}) => (

to:

const Post = ({
  data: {
    post,
    slug,
    site: {
      siteMetadata: { title },
    },
  },
  location,
  previous,
  next,
}) => (

And you should now have comments on your blog!