Update (2025-11-22): I have since switched from Twikoo to meh (https://github.com/splitbrain/meh).
This post remains for reference.

Adding Twikoo Comments to My Hugo Website

This is me trying to add a comment system to my website (this website).

Hugo has plenty of comment integrations available:
https://gohugo.io/content-management/comments

Disqus, Comentario, giscus, Isso, Remark42, Talkyard… you name it.

However, since I already use Twikoo for other services, it makes sense to reuse it here. This post documents how I integrated Twikoo into a Hugo site using the hugo-simple theme.

1. Override Hugo’s single.html

Because I only want comments on blog posts, I created:

layouts/blog/single.html

I copied it from the theme’s layouts/single.html and inserted the comment partial right after the <content> block:

1<content>
2  {{ .Content }}
3</content>
4
5{{ partial "comments.html" . }}

2. Create the comments.html partial

Next, I added a central comment selector at:

layouts/_partials/comments.html

 1{{/* determine provider: page-level overrides site-level */}}
 2{{ $provider := .Params.comments | default .Site.Params.comments.provider }}
 3
 4{{ if eq $provider "twikoo" }}
 5  {{ partial "comments/twikoo.html" . }}
 6{{ end }}
 7
 8{{ if eq $provider "giscus" }}
 9  {{ partial "comments/giscus.html" . }}
10{{ end }}
11
12{{/* more systems can be added here */}}

3. Add the Twikoo partial

I created the Twikoo implementation at:

layouts/_partials/comments/twikoo.html

 1<div id="twikoo"></div>
 2
 3<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.min.js"></script>
 4
 5<script>
 6twikoo.init({
 7  envId: "{{ .Site.Params.twikoo.endpoint }}",
 8  el: "#twikoo",
 9  path: "{{ .Permalink }}",
10  lang: "{{ .Site.Params.twikoo.language | default "en" }}"
11});
12</script>

4. Configure Twikoo in hugo.toml

Finally, I added the following settings:

1[params.comments]
2provider = "twikoo"
3
4[params.twikoo]
5endpoint = "https://your.twikoo.api"
6language = "en"

That’s it

After these changes, Twikoo successfully loads at the bottom of each blog post.

If I ever want to switch to another system (e.g., giscus), I can just update provider:

1[params.comments]
2provider = "giscus"