[Astro] Comment System (Utterances)

Overview
What is Utterances
Comments.astro Component
Key Configuration
Usage in PostLayout
Conclusion

Overview

In the previous post Image Optimization — Custom rehype Plugin, we covered image optimization. In this post, I’ll explain how to implement a comment system — an essential feature for any blog — in Astro.

What is Utterances

Utterances is a lightweight comment system that uses GitHub Issues as its comment storage. It requires no separate server or database — users log in with their GitHub account to write comments.

I previously used Disqus, but switched to Utterances due to heavy scripts and unwanted ad display issues. The main advantages of Utterances are:

Lightweight: Only needs to load a single external script, with no unnecessary ads
GitHub Integration: Comments are stored as GitHub Issues, eliminating the need for separate database management
Markdown Support: Markdown syntax can be used in comments, making it easy to write code blocks and more
Free: Completely free as an open-source project

For more details, refer to the Switching to Utterances Comment System post.

Comments.astro Component

Comments.astro is a component that renders the Utterances comment widget. It only displays the comment area when the enabled prop is true, so you can easily disable comments on specific posts by setting comments: false in the frontmatter.

---
// src/components/Comments.astro
interface Props {
  enabled: boolean;
}

const { enabled } = Astro.props;
---

{enabled && (
  <div class="comments-section" style="margin-top: 40px;">
    <script
      is:inline
      src="https://utteranc.es/client.js"
      repo="dev-yakuza/dev-yakuza.github.io"
      issue-term="title"
      label="comment"
      theme="github-light"
      crossorigin="anonymous"
      async
    ></script>
  </div>
)}

Key Configuration

Here are the key configuration values:

Attribute	Value	Description
`repo`	`dev-yakuza/dev-yakuza.github.io`	GitHub repository where comments are stored
`issue-term`	`title`	Matches Issues by post title
`label`	`comment`	Label attached to Issues
`theme`	`github-light`	Comment widget theme

The is:inline directive tells Astro to include this script directly in the HTML without bundling.

How to Install Utterances

To use Utterances, you first need to install the utterances app on GitHub. After installation, grant access permissions to the repository where comments will be stored. Once set up, an Issue is automatically created in that repository whenever a comment is written on a post.

Usage in PostLayout

The Comments component is imported and used in PostLayout.astro. The comments value from the frontmatter is passed directly as the enabled prop, allowing individual control over whether comments are displayed for each post.

<!-- src/layouts/PostLayout.astro -->
<Comments enabled={comments} />

Conclusion

In this post, we looked at how to integrate the Utterances comment system into an Astro blog.

Implemented a lightweight comment system based on GitHub Issues with Utterances
Encapsulated in a Comments.astro component for reusability
Control comment display per post via the enabled prop
Include external scripts directly in HTML with the is:inline directive

In the next post Ad Integration (Google AdSense), we’ll cover how to integrate Google AdSense ads into the blog and the custom rehype plugin.

Series Guide

This post is part of the Jekyll to Astro migration series.

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.