DEV Community

Alex Rudenko
Alex Rudenko

Posted on • Originally published at 60devs.com on

Add comments to your GatsbyJS blog within two minutes

Static sites are great! They are easy to publish and maintain. You can scale a static website easily for millions of users. And hosting usually is quite cheap. Another advantage is the convenience of local development and the possibility to preview any change before publishing. One of the challenges of static websites is adding dynamic content to the site. In this post, I will show you an easy way to add a comments widget to a static website based on GatsbyJS using Just Comments.

Creating a new blog with GatsbyJS’ blog starter

Skip this section if you already have a blog with Gatsby. For those who don’t have one, let’s start with installing GatsbyJS:

npm install --global gatsby-cli
Enter fullscreen mode Exit fullscreen mode

Create a new blog with the name “blog-with-comments”:

gatsby new blog-with-comments
Enter fullscreen mode Exit fullscreen mode

Change the directory to blog-with-comments and start GatsbyJS in development mode. This will spin up a development server, and you will be able to see the blog at http://localhost:8000

gatsby develop
Enter fullscreen mode Exit fullscreen mode

Adding comments to GatsbyJS blog

Now when we have a basic blog we can add comments so that your visitors can comment on your content.

First, create an account at Just Comments by logging in via Github or Facebook. You will see an API key created for you once you log in.

Account page at Just Comments

Now we need to modify the blog template and integrate the widget into our blog. Open the file src/templates/blog-post.js in your favorite editor. Change the <Helmet> tag in the following way:

<Helmet title={`${post.frontmatter.title} | ${siteTitle}`}>
  <script src="https://just-comments.com/w.js" type="text/javascript" defer="true"></script>
</Helmet>
Enter fullscreen mode Exit fullscreen mode

By adding the script tag, we embed the widget provided by Just Comments which will power our comments.

Second, place the container element for the comments where you want it to be. I add it right after the <Bio /> tag in the same file src/templates/blog-post.js. Replace YOUR_API_KEY with the actual API key for your Just Comments account.

<div
  className="just-comments"
  data-allowguests="true"
  data-apikey="YOUR_API_KEY"
  style={{
   marginBottom: rhythm(1),
   marginTop: rhythm(-1),
  }}
>
</div>
Enter fullscreen mode Exit fullscreen mode

The end result looks something like this:

Hello World comment with GatsbyJS and Just Comments

About Just Comments

Just Comments is a service offering a comment system. It’s not entirely free, but it’s almost free for small websites which don’t get millions of visitors. Just Comments charges you for a so-called comment pageview, and one comment pageview costs as little as $0.00001, or $10 for 1,000,000 pageviews. Read more about Just Comments’ pricing and possible integrations at https://just-comments.com/

Discussion (4)

Collapse
sebastienbarre profile image
Sebastien Barre

Can you export your comments later on?

Collapse
orkon profile image
Alex Rudenko Author

Sure, just let me know if you need to export your comments.

Collapse
Sloan, the sloth mascot
Comment deleted