back button Back to blog

A Free & Lightweight Comments Section for Your Blog

Utterances has made adding a comments section to posts on my blog an easy and painless experience.

Noah MatsellJanuary 5, 2023
Copy URL

Utterances is a free and lightweight comments widget built on GitHub issues. Embed their script on your page(s) and a comments section will automatically render itself. A big selling point for me is that there are no backend requirements. Instead, all you need is a public Github repo.

When posting comments, users need to log in via Github. This can be a barrier for more general audiences, but makes a lot of sense for a tech and developer focused blog.

Configuring Utterances

Utterances website provides a nice tool to build your script. Go to their site, choose a few configuration options, and copy the output script.

Some of the customizations I made:

  • issue-term — choose to map your comments section to an issue named by pathname, url, page title, and more.
  • repo — the repo where the Github issues for your comments will be created.
  • theme — choose from 9 different themes.

Embedding Comments Section in Next.js

Normally with Next.js I would reach for the next/script package to embed a script. However I was seeing a caching/dismount bug where the script/comment rendered for the first time, and would incorrectly show for all subsequent pages and posts.

To correctly embed my comments section, I created a custom component that updates and/or removes a Comments section script on render/dismount. This component is embedded in my blog post template and applied to each individual blog post on my site:

// CommentsSection.tsx

export const CommentsSection = () => (
    <h3 className="text-xl font-bold flex">Comments</h3>
      ref={(element) => {
        if (!element) {

        const scriptElement = document.createElement("script");
        scriptElement.setAttribute("src", "");
        scriptElement.setAttribute("repo", "noahub/a-devs-blog");
        scriptElement.setAttribute("issue-term", "pathname");
        scriptElement.setAttribute("theme", "boxy-light");
        scriptElement.setAttribute("crossorigin", "anonymous");
        scriptElement.setAttribute("async", "true");

End Result

The comments section defined above renders in the post template for all of my blog posts. Each post will map to its own Github issue based on the pathname.

Check it out in the comments section below!

Like this post?

Sign up and get notified when new posts are published!