Enable Comment in Hugo site

Gerald Nguyen
Gerald Nguyen
2 min read ยท
Previous | Next
On this page

Note 2024-08-15: An earlier version of this site ran on doks. I’m in the middle of updating it to a medium-like theme*


Introduction

You may have noticed that this website is using a powerful-yet-easy-to-use doks theme.

As I wanted to have more interaction with my readers, enabling comment is a first step.

Enable Comment in Hugo

Hugo provides built-in support for Disqus. It ships with a _internal/disqus.html template that we can simply copy & paste to wherever we want comment to appear. The steps are simple:

More info are available at https://gohugo.io/content-management/comments/

Customizing Doks blog template

Back to Doks, however it does not support commenting - at least its Doks child theme version. The layout folder contains only a single index.html file to customize the home page (e.g. https://geraldnguyen.github.io/)

Here came the node_modules/@hyas/doks/layouts configuration found in config.toml file. That module contains all Doks layout files, including the layouts/blog/single.html where I need to place _internal/disqus.html template.

Editing node_modules/@hyas/doks/layouts/blog/single.html isn’t an option - the changes aren’t visible to GitHub action or Netlify.

Clone and repointing layouts is possible - I haven’t tried it though.

The 3rd option is to copy all node_modules/@hyas/doks/layouts to site’s layouts folder, then update the blog/single.html with the appropriately placed {{ template "_internal/disqus.html" . }}. » Checkout the commit