Integrate Giscus Comment System into Hugo Blog

This is the third tutorial on building your own blog system, focusing on adding a comment system.

During the blog setup process, a good comment system can greatly enhance interactivity. Today, I will introduce how to integrate Giscus, an open-source comment system based on GitHub Discussions, into a Hugo blog.

Why Choose Giscus?

• 🚀 No server required, based on GitHub Discussions
• 🔒 Secure and reliable, comment data is stored on GitHub
• 🧩 Supports dark mode and adaptive themes
• 💬 Supports anonymous comments (optional)
• 🌍 Multi-language interface support

Preparation

Before you start, you need:

1. A repository hosted on GitHub
2. Discussions feature enabled
3. A Hugo blog (any theme will do)

Step 1: Enable GitHub Discussions

1. Open your blog’s code repository (e.g., username/blog).
2. Click Settings → Features → Check Discussions.

   

Step 2: Configure Giscus

Go to https://giscus.app, and on the page:

1. Select your GitHub repository.
2. Set which Discussion category to create comments in (you can create a new one like announcement).
3. Custom configuration:
   • Mapping: It is recommended to choose pathname, which associates discussions by page path.
   • Reaction: Whether to allow likes and other actions.
   • Theme: Supports light, dark, preferred_color_scheme, etc.
4. Copy the generated <script> code.

   

   For example, the generated code looks like this:

<script src="https://giscus.app/client.js"
        data-repo="yourname/yourrepo"
        data-repo-id="REPO_ID"
        data-category="General"
        data-category-id="CATEGORY_ID"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

Here you need to remember the three parameters: data-repo, data-repo-id, and data-category-id, which will be used in the following configuration.

Step 3: Integrate Giscus into Your Hugo Theme

The theme I am using is hugo-narrow, which integrates the Giscus comment system, and you just need to do a little configuration. Here is my configuration:

  comments:
    enabled: true
    # giscus, disqus, utterances, waline, artalk, twikoo
    system: "giscus"

    giscus:
      repo: "data-repo"
      repoId: "data-repo-id"
      category: "Announcements"
      categoryId: "data-category-id"
      mapping: "pathname"
      strict: "0"
      reactionsEnabled: "1"
      emitMetadata: "0"
      inputPosition: "bottom"
      theme: "preferred_color_scheme"
      lang: "en"

Note that you need to replace repo, repoId, and categoryId with the values saved in Step 2. This is necessary for comments to display correctly. Also, ensure that enabled is configured as true and system is set to giscus. Otherwise, comments will not show.

Finally, you will see an interface like this at the bottom of the article:

Testing

You can comment on this article and see if the comments display correctly. The comments can be checked in the GitHub Discussions.

For example, you can view the comments on my blog here.