Add comments to your GatsbyJS blog within two minutes
Tags: showdev, tutorial, javascript, webdev
Published: 2018-01-04 20:21:38

---
title: "Add comments to your GatsbyJS blog within two minutes"
published: true
tags: showdev,tutorial,javascript,webdev
canonical_url: https://60devs.com/add-comments-to-your-gatsbyjs-blog-within-two-minutes.html
---

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](https://www.gatsbyjs.org/) using [Just Comments](https://just-comments.com/).

#### Creating a new blog with GatsbyJS’ blog&nbsp;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
```

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

```
gatsby new blog-with-comments
```

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](http://localhost:8000)

```
gatsby develop
```

#### Adding comments to GatsbyJS&nbsp;blog

Now when we have a basic blog we can add comments so that your visitors can comment on your&nbsp;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&nbsp;in.

![](https://cdn-images-1.medium.com/max/1024/1*on_NSotyKdv4DOh2PXQP5w.png)<figcaption>Account page at Just Comments</figcaption>

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>
```

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&nbsp;account.

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

The end result looks something like&nbsp;this:

![](https://cdn-images-1.medium.com/max/817/1*faxVBror7H3tA1OHigDzxg.png)<figcaption>Hello World comment with GatsbyJS and Just Comments</figcaption>

#### About Just&nbsp;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/_](https://just-comments.com/)