Kaitlyn Baker
August 30, 2021
How to add comments to your blog ?
2min read

I recently added comments to my blog posts (don't hesitate to drop a comment 😉) and I want to teach you how to add comments to your own blog.


There are several options you can use, from free to not so free :


I tried Disqus, but the design of the comment section felt a little to "old-school" and maybe not very professional, so I decided to use Utterances.


Utterances creates a GitHub Issue for each article and stores the comments there. This means your readers need a GitHub account to be able to leave a comment. As my blog revolves around web development this option is perfect.

Creating the GitHub repository for the project

You will first need to create a public GitHub directory, I called mine "blog.comments" but you can call it any way you like.


Install the Utterances app into the repository with the "Only select repositories" option and by selecting your repository.

Creating a Comments component for your blog

Fill the configuration part on the Utterances main page and it will provide you a bit of code looking like this :

<script
  src="https://utteranc.es/client.js"
  repo="Lachouri/blog.comments"
  issue-term="pathname" //How the article and issue are mapped
  theme="github-light" //The theme of the component
  crossorigin="anonymous"
  async
></script>

You can't add this directly into your React code, so you will need to do something like this :

// Comments.jsx

import React from 'react';

const commentBox = 'comments-box';

const Comments = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://utteranc.es/client.js';
    script.setAttribute('repo', 'GITHUB_USERNAME/REPOSITORY_NAME');
    script.setAttribute('issue-term', 'pathname');
    script.setAttribute('theme', 'github-light');
    script.setAttribute('crossorigin', 'anonymous');
    script.async = true;

    const comments = document.getElementById(commentBox);
    if (comments) {
      comments.appendChild(script);
    }
  }, []);

  return <div id={commentBox} />;
};

export default Comments;

You can now import your component and this is what it will look like :

The issue created on GitHub :

Now you know how to add comments to your blog ! Let me know if you have any question !


About

About the author

Ludivine Achouri

Passionate web developer from France


"Do the best you can until you know better. Then when you know better, do better."

Copyright © Achouri Ludivine 2023 | All rights reserved