Add comments to Hugo

Why Hugo needs an external comment service

Hugo builds your site into plain HTML files at compile time. There is no server running your pages and no database sitting behind them, which is exactly why Hugo is fast and cheap to host. It also means Hugo has no built-in way to store comments. Someone reads your post, writes a reply, and there is nowhere on your side for that reply to go.

The clean fix is a hosted comment service that stores the data for you and renders into your page with a small script. Gabden does this with roughly an 11KB embed. It keeps each thread tied to the page's canonical URL, so the discussion follows the content and does not depend on any state in your Hugo build.

Create a comments partial

Hugo encourages small, reusable templates called partials. Make one for comments so you can drop it into any layout without repeating yourself. Create the file layouts/partials/comments.html:

<div id='gabden-conversations'></div>
<script async src='https://YOUR-SITE.gabden.com/conversations.js'
  data-page='canonical'
  data-theme='auto'></script>

Replace YOUR-SITE with the key shown in your Gabden dashboard after you add your site. Each website you run has its own key, and you copy it once.

Include the partial in your single template

Open the template that renders one post, usually layouts/_default/single.html. Add the partial where you want the thread to appear, typically just after the article content:

{{ .Content }}

{{ partial "comments.html" . }}

If your theme already has a partial include for a different comment tool, replace that line rather than adding a second one. Two comment widgets on one page is a common cause of confusion.

Let authors turn comments off per page

You will not want comments on every page. Landing pages, the about page, and pillar reference posts often read better without a thread. Hugo front matter makes this easy. Add a custom flag to the posts where you do want comments, or use a flag to switch them off.

In your post's front matter:

---
title: "My post"
comments: true
---

Then guard the partial in your template:

{{ if .Params.comments }}
  {{ partial "comments.html" . }}
{{ end }}

Gabden also lets you disable comments on specific URLs from the dashboard, so you have a second layer of control that does not require a rebuild. Set a page rule and the widget stops rendering there even if the partial is present.

Canonical URLs and the thread key

Gabden keys each discussion to the page's canonical URL. Hugo generates canonical links for you when you set baseURL correctly in your site config, so most sites work without extra effort. Two things are worth checking before you publish widely.

• Set baseURL to your real production domain, not localhost. If you test on localhost, threads created there use a different key than your live pages.
• Decide on trailing slashes and stick with it. If /posts/my-post/ and /posts/my-post both resolve, they can read as two threads. Pick one form in your config and let Hugo emit it consistently.

Build, deploy, and check

Run your normal build and deploy. Load a post that has comments enabled and confirm the thread renders below the content. Post a test comment yourself. In the Gabden dashboard you can then choose how new comments are handled: pre-moderate everything, auto-approve, or auto-approve people who have been verified before while holding anonymous posts for review.

Readers can reply anonymously, leave a name and email as a guest, or sign in with Google or GitHub. There are no tracking cookies and no fingerprinting, which suits the kind of lean, self-hosted site people usually build with Hugo.

Moving from another tool

If your Hugo site already used Disqus or a home-grown setup, you do not have to abandon old threads. Gabden imports existing comments from Disqus and other systems and maps them to each page's URL, so historic discussion lands on the right post. For a broader view of the same one-script approach on other platforms, see our guide to the best commenting system for static sites, or create an account and grab your Gabden subdomain.