How to Add Giscus Comments to Your Hugo Blog (with Multilingual Support)

Why Use Giscus?

Giscus is a modern, privacy-friendly comment system powered by GitHub Discussions. It integrates perfectly with static site generators like Hugo, letting visitors use their GitHub accounts to discuss and react to your posts—no commercial third-party needed.

---

1. Prepare Your GitHub Repository

1. Create a new, public repository (e.g., username/hugo_comments) on GitHub to store site comments.
2. In the repository settings, enable Discussions.
3. (Optional) Add a README to describe the repo’s purpose—no code or files beyond that are necessary.

---

2. Configure Giscus

Go to giscus.app and authenticate with GitHub.

• Choose your repository (the one you created above).
• Select or create a category
  An Announcements-type category is recommended (so only maintainers and Giscus itself create new threads).
• Page ↔️ Discussion mapping
  For Hugo/static sites, choose pathname. This reliably links posts to Discussions, even if your domain changes.
• Enable reactions and input position
  Enable emoji reactions and (optionally) place the comment box above existing comments for better UX.
• Lazy loading
  Recommended—loads the comment widget when the user scrolls, improving site performance.
• Language
  For multilingual Hugo sites, set the script to use Hugo’s page language, so each post gets the right UI language.
• After setting options, Giscus generates a <script> snippet you’ll embed in your site.

---

3. Integrate Giscus with Hugo

1. Create a partial template at layouts/partials/giscus.html.
   Paste your Giscus script here, using your actual repo info and the Hugo variable for language:

<script src="https://giscus.app/client.js" data-repo="username/hugo_comments" data-repo-id="..." data-category="Announcements" data-category-id="..." data-mapping="pathname" data-reactions-enabled="1" data-input-position="top" data-theme="light_high_contrast" data-lang="{{ .Site.Language.Lang }}" data-loading="lazy" crossorigin="anonymous" async> </script>

Tip:
The data-lang=”{{ .Site.Language.Lang }}” portion automatically sets the UI to English, Japanese, or your other languages per page.

2. Insert the partial in your post layout (e.g., layouts/_default/single.html), after main content: {{ partial “giscus.html” . }}

To enable comments only on certain posts, wrap it in:

{{ if or (.Params.comments) (.Site.Params.comments) }}
{{ partial "giscus.html" . }}
{{ end }}

Otherwise, just include the partial directly for site-wide comments.

---

4. Test & Troubleshooting

• Run hugo server locally and check your post page—the Giscus box should appear.
• If not, check:
• The partial is correctly called in your layout.
• The GitHub repo is public and Discussions enabled.
• Your script’s repo ID/category IDs are correct.
• Check browser console for errors (CORS, 404, etc.).
• Once anyone posts a comment, a matching Discussion thread will appear on GitHub.

---

FAQ / Tips

• Add comments = true to [params] in your config to turn on comments by default for all posts. Turn off for individual posts using comments = false in front matter.
• You may remove all other “comments” logic if you want Giscus everywhere.
• Giscus supports custom themes, dark/light mode, and multilingual UI via Hugo variables.
• You don’t need any files in your comments repo—Giscus will handle comment threads!

---

Conclusion

Using Giscus and Hugo, you can offer fast, multilingual, modern comment sections powered by GitHub Discussions—ideal for static and privacy-focused web projects.