How to Integrate CommentBox to Your Hugo Site

Recently, I decided to remove Disqus from my static sites.

I thought I had a grandfathered account without any ads. I saw that the ads setting in my Disqus dashboard was disabled.

But then suddenly, I received an email from Disqus saying they had decided to display ads on my site.

Well, I don’t mind ads as long as they’re useful for all parties.

But Disqus ads really look scammy and slow down my websites. Not to mention they’re huge and take up a lot of space.

Anyway, I decided to look for an alternative and chose to give CommentBox a try. So here’s an example of how to implement CommentBox in Hugo.

Config Update

I added a new configuration specifically for CommentBox.

I put it under the [params] section.

Here’s an example of my config.toml:

[params]
[params.services]
[params.services.commentBox]
projectID = "1234-proj"

You need to replace the projectID value with your own CommentBox project ID. You’ll get the Project ID after creating a new site in CommentBox.

CommentBox Partial Widget

Next, we need a new widget.

Let’s create a new partial at this path:

layouts/partials/widget/commentbox.html

Put the following code inside the commentbox.html file:

{{- if .Site.Params.Services.CommentBox.ProjectID -}}
{{ if not (in (printf "%#v" .Site.BaseURL) "localhost") }}
<div class="commentbox"></div>
<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
<script>commentBox('{{- .Site.Params.Services.CommentBox.ProjectID -}}')</script>
{{ else }}
<blockquote role="alert">
    <p><strong>Attention! </strong>CommentBox comments are not available by default when the website is previewed locally.</p>
</blockquote>
{{ end }}
{{ end }}

Essentially, this widget will only show CommentBox if you set the projectID in the config.toml file. If you leave it empty, it won’t show anything.

Modify single.html

Now, let’s edit the single.html file.

CommentBox is normally embedded below the content, so we’ll edit the single.html located at:

layouts/_default/single.html

You’ll typically want to put this code right below {{ .Content }}:

{{- if .Site.Params.Services.CommentBox.ProjectID -}}
    {{ partial "widget/commentbox.html" . }}
{{- end -}}

That’s it. Now try building your Hugo site.

You won’t see it in your localhost setup, but it will appear once you publish it.

Conclusion

Thanks for reading — that’s it for today.

If you have more questions, feel free to leave a comment below.

Cheers!