Add comments to a Hugo site

Hugo has no built-in comment system, by design: it generates static HTML. Connect adds comments with a partial template and one line in your single-page layout.

1. Create the partial

Create layouts/partials/comments.html:

<div id="hakanai-connect"></div>
<script async src="https://connect.hakanai.io/embed.js"
  data-key="YOUR_SITE_KEY"
  data-page-id="{{ .RelPermalink }}"></script>

Replace YOUR_SITE_KEY with the public key from your dashboard.

2. Include it in your layout

In layouts/_default/single.html (or your theme's equivalent), add the partial after the content:

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

The ne .Params.comments false guard lets you turn comments off on any page from its front matter:

---
title: "My post"
comments: false
---

If you use a theme you do not control, check whether it already has a comments partial or a layouts/partials/comments.html override point. Most themes do, and overriding the partial in your own layouts/ directory survives theme updates.

About the page id

The snippet above uses {{ .RelPermalink }} as the page identity. It is stable as long as your permalink configuration does not change. If you expect to restructure your URLs someday, prefer something permalink-independent, for example a front matter field:

data-page-id="{{ .Params.slug | default .File.ContentBaseName }}"

Whatever you choose, choose once: changing the page id scheme later detaches existing comments.

Comment counts on list pages

To display "5 comments" next to each post on your homepage or list pages, add a counter element in layouts/_default/list.html inside your posts loop:

<span data-connect-count="{{ .RelPermalink }}"></span>

Then follow the comment counts guide to load the counts with one small script. Use the same value as your data-page-id so counts and threads match.

Local preview

hugo server runs on localhost, which is not one of your declared domains, so comment submission is rejected there. Reading works. To test posting before going live, add your staging domain under Site settings, or just test on production: comments in moderation mode are invisible until you approve them.