How to add comments to a Hugo site

Why Hugo + EchoThread

Hugo is one of the fastest static site generators available, but static sites have no built-in backend for comments. Most Hugo users either skip comments entirely or resort to heavyweight third-party services that inject ads and tracking scripts.

EchoThread is built for exactly this use case: a lightweight, privacy-first comment widget that loads from a CDN with zero dependencies. The entire widget is under 20 KB gzipped, so it won't slow down your blazing-fast Hugo build.

Prerequisites

• A Hugo site (any version)
• An EchoThread account — create one free
• Your site's API key from the EchoThread dashboard

Step 1 — Create the partial

Create a new file at layouts/partials/echothread.html:

Replace YOUR_API_KEY with the API key from your EchoThread dashboard.

Step 2 — Include in your layout

Open your single post layout — usually layouts/_default/single.html or layouts/posts/single.html — and add the partial where you want comments to appear:

That's it — comments will now appear on every page that uses this layout.

Choosing an identifier

The data-identifier attribute determines which comment thread is loaded. If you change your URL structure later, the identifier keeps comments attached to the right page.

Hugo gives you several good options:

• {{ .File.UniqueID }} — a hash of the file path. Stable as long as you don't move the file.
• {{ .RelPermalink }} — the relative URL, e.g. /blog/my-post/.
• {{ .Params.comment_id }} — a custom front matter field you control entirely.
• {{ .File.ContentBaseName }} — the filename without extension, e.g. my-post.

Theming

EchoThread follows the visitor's OS preference (light/dark) by default. You can override this with the data-theme attribute:

You can also set a custom accent color for buttons and links:

Disable per page

Wrap the partial in a conditional so you can disable comments on specific pages via front matter:

Then in any post's front matter, set comments: false to hide the widget:

Multilingual sites

Hugo's multilingual mode creates separate URL trees per language. EchoThread automatically creates a unique thread per URL, so each language version of a post gets its own comment thread.

If you want to share comments across translations, use a language-independent identifier:

This uses the filename (without the language suffix), so my-post.en.md and my-post.fr.md will share the same thread.

Troubleshooting

Comments don't appear

• Check that your API key is correct — you can verify it in the dashboard.
• Make sure the domain in your EchoThread site settings matches your Hugo site's domain (including localhost for local dev).
• Open your browser's developer console and look for network errors on the widget.js request.

Comments load on the wrong page

This usually means data-identifier is the same across multiple pages. Verify the identifier is unique per page by inspecting the rendered HTML.

Widget doesn't match my theme

Use data-theme to match your Hugo theme's background. For full control, override the CSS custom properties on .et-widget. See the theming docs for all available variables.