Gatsby + Disqus

Gatsby + Disqus

06June2019

Description

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 a few different Disqus React components into my Gatsby site, creating an easily-configurable plugin for the Gatsby ecosystem felt like a no-brainer.

Install

1$ yarn add gatsby-plugin-disqus

or

1$ npm install -S gatsby-plugin-disqus

Configure

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

1// gatsby-config.js
2module.exports = {
3 plugins: [
4 {
5 resolve: `gatsby-plugin-disqus`,
6 options: {
7 shortname: `your-disqus-shortname`
8 }
9 },
10 ]
11}

Usage

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

1import Disqus from 'gatsby-plugin-disqus'
2
3const PostTemplate = () => (
4 <>
5 /* Page Contents */
6 <Disqus
7 identifier={post.id}
8 title={post.title}
9 url={`${config.siteUrl}${location.pathname}`}
10 />
11 </>
12)
13
14export default PostTemplate

While providing an identifier, title, and url are optional, it is recommended as it will ensure that threads won’t be lost in the case that the domain changes or the post is renamed.

Contributing

  1. Make sure you have yarn installed.
  2. Create a new folder to be used as your yarn workspace. mkdir gatsby-disqus-workspace
  3. Inside your workspace folder, clone this repo.
  4. cd 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:
1{
2 'private': true,
3 'workspaces': [
4 'your-example-test-site',
5 'gatsby-plugin-disqus/lib'
6 ]
7}
  1. In a new terminal window, cd to your workspace folder and run yarn && yarn workspace <example-site> run develop.

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


Brett Stevenson