Adding Giscus Comments to Your Hugo Blog

A quick guide on integrating Giscus comments into a Hugo blog (Blowfish theme). Giscus is powered by GitHub Discussions—no database required, and all comments are stored directly in your GitHub repository.

Why Giscus?

#

• No server needed: Uses GitHub Discussions to store comments
• Visitor-friendly: Login with a GitHub account to comment
• Completely free: Open-source project, zero cost
• Theme support: Follows your site’s dark/light mode

Step 1: Prepare Your GitHub Repository

#

Create a new GitHub repository with the following requirements:

1. The repository must be public

#

Private repositories prevent visitors from viewing discussions.

2. Install the Giscus App

#

Visit github.com/apps/giscus, click Install, and authorize it for your repository.

3. Enable Discussions

#

Go to your repository’s Settings → General → Features and check Discussions.

Step 2: Generate Configuration on Giscus Website

#

Visit giscus.app and fill in the configuration:

After filling in the options, a <script> code will be generated at the bottom. Copy and save it.

Step 3: Create the comments.html Template

#

Create or edit the following file in your Hugo project:

layouts/partials/comments.html

Paste the Giscus script into it:

<script src="https://giscus.app/client.js"
        data-repo="your-username/repo-name"
        data-repo-id="REPO_ID"
        data-category="Announcements"
        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="en"
        crossorigin="anonymous"
        async>
</script>

💡 Tip: data-repo-id and data-category-id are auto-generated by the Giscus website.

Step 4: Enable Comments Display

#

Edit your Hugo config file config/_default/params.toml, find the [article] section, and set showComments to true:

[article]
  showComments = true

Enable Comments Per Article

#

If you only want comments on specific articles:

1. Keep the global setting showComments = false
2. Add to the front matter of articles where you want comments:

---
showComments: true
---

How to Customize Comment Box Styles?

#

You can use the CSS selectors .giscus and .giscus-frame to adjust styles.

References

#

• Giscus Official Website
• Blowfish Documentation - Comments
• GitHub Discussions Documentation