How to Add Comments to a Hugo Site (Without a Backend)

Hugo is wonderful for performance and terrible for anything stateful — including comments. If you want readers to talk back, you need a third-party widget that runs in the browser.

Here's the shortest path to threaded comments on a Hugo site, using EchoThread (privacy-first, no ads, no tracking, under 15 KB gzipped, free during beta).

1. Get an API key

Sign up at echothread.io, add your domain, copy the key.

2. Add the embed to layouts/_default/single.html

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</article>

<section class="comments">
  <div id="echothread" data-api-key="{{ .Site.Params.echothreadApiKey }}"></div>
  <script src="https://cdn.echothread.io/widget.js" defer></script>
</section>
{{ end }}

3. Add the key to hugo.toml

[params]
  echothreadApiKey = "YOUR_API_KEY"

Or use an env var: HUGO_PARAMS_ECHOTHREADAPIKEY=... hugo. Hugo maps HUGO_PARAMS_* automatically.

4. (Optional) Make a shortcode

layouts/shortcodes/echothread.html:

<div class="echothread-wrapper">
  <div id="echothread" data-api-key="{{ .Site.Params.echothreadApiKey }}"></div>
  <script src="https://cdn.echothread.io/widget.js" defer></script>
</div>

Now you can drop {{< echothread >}} into any Markdown file.

5. Theme it

.comments {
  --echothread-bg: #0f0f10;
  --echothread-text: #e8e8ea;
  --echothread-accent: #7c5cff;
  min-height: 400px;
}

That min-height matters — it prevents layout shift when the widget hydrates.

Done

The widget identifies threads by page URL automatically, so every post gets its own conversation with no extra config. Sign in with Google to leave a comment, manage everything from the EchoThread dashboard.

Full guide with troubleshooting and CSP notes: echothread.io/docs/guides/hugo