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

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

gatsby develop

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.

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 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 this:

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/