Integrating Disqus to GatsbyJS

Yish
Yish
Nov 1 · 1 min read

This article is going to show you how to integrate the comment service disqus to your gatsbyjs website.

To search your post render file, js, jsx, the name just like PostContent or Post, my site file name is PostContent.js and I’m using casper theme. First of all, I was imported disqus-react component, Github repo, secondly, imported configrations following:

// on the top
import Disqus from 'disqus-react';
const PageTemplate: React.FC<PageTemplateProps> = props => {
....
const disqusShortname = "your-disqus-name";
const disqusConfig = {
// make sure your props and set it.
url: config.siteUrl + props.pathContext.slug,
identifier: props.pathContext.slug,
title: post.frontmatter.title,
};

Finally, you need to use component in render callback:

<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
Yish

Written by

Yish

Never stop progressing. https://yish.dev

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade