Gatsby Plugin Disqus

Improve audience engagement by integrating Disqus comments into your Gatsby website



The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating Disqus comments into their blazing-fast Gatsby websites. After struggling to integrate different Disqus components into my Gatsby site, creating an easily-configured plugin for the Gatsby ecosystem felt like a no-brainer.


$ yarn add gatsby-plugin-disqus


$ npm install -S gatsby-plugin-disqus


Add the plugin to your gatsby-config.js file with your Disqus shortname

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `your-disqus-shortname`

The plugin can be used as shown in this brief example:

import { Disqus, CommentCount } from 'gatsby-plugin-disqus'

const PostTemplate = () => {
  let disqusConfig = {
    url: `${config.siteUrl+location.pathname}`,
    title: post.title,
  return (
      <CommentCount config={disqusConfig} placeholder={'...'} />
      /* Post Contents */
      <Disqus config={disqusConfig} />

export default PostTemplate

While providing a url, identifier, and title are optional, these attributes will prevent threads from being lost in the case that the domain changes or the post is renamed.


A blog post featuring comments, provided by gatsby-plugin-disqus
Check out the 650+ projects that are already using gatsby-plugin-disqus


  1. Make sure you have yarn installed.
  2. Create a new folder for your yarn workspace. mkdir gatsby-disqus-workspace
  3. Inside your workspace folder, clone this repo.
  4. Navigate into gatsby-disqus-workspace/gatsby-plugin-disqus/ and run yarn && yarn watch. Leave this terminal window open.
  5. In addition to this repo in your workspace folder, add a gatsby site that uses gatsby-plugin-disqus for testing purposes.
  6. In your workspace folder create a package.json and add the following:
  "private": true,
  "workspaces": [
  1. In a new terminal window, cd to your workspace folder and run yarn && yarn workspace <example-site> run develop.

If you have questions or would like help with enhancing or debugging the plugin, feel free create an issue or submit a pull request