A Free & Lightweight Comments Section for Your Blog

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 = () => (
  <section>
    <h3 className="text-xl font-bold flex">Comments</h3>
    <div
      ref={(element) => {
        if (!element) {
          return;
        }

        const scriptElement = document.createElement("script");
        scriptElement.setAttribute("src", "https://utteranc.es/client.js");
        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");
        element.replaceChildren(scriptElement);
      }}
    />
  </section>
);

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!