Disqus and Utterances comments widgets are supported out of box. This article shows how to configure them and even customize your own comment widgets.

Disqus

Disqus comments widget is supported by Hugo.

1disqusShortname = "yourdiscussshortname"

Please keep in mind that disqusShortname is a site’s configuration, not a parameter. Put it in the params won’t work.

Utterances

Utterances is a lightweight comments widget built on GitHub issues.

1[utterances]
2  repo = "user/repo"
3  #issueTerm = "pathname" # pathname, url, title, og:title.
4  #label = "comment" # Optional.
5  #theme = ""

Unlike Disqus, Utterances is a parameter. You should put it in the params.

Parameters

NameTypeDefaultDescription
utterances.repoString-GitHub repository.
utterances.issueTermStringpathnameThe mapping between blog posts and GitHub issues: pathname
utterances.labelString-The label that will be assigned to issues created by Utterances.
utterances.themeString-github-light and github-dark will be used in light and dark mode respectively if not set. Optional values: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-blue and photon-dark.

Troubleshooting

  • Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
  • Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
  • If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.

Custom Comments Widget

We don’t intend to support all comments widgets, but don’t worry, you can customize your own comments widget.

You will need to disable the others before creating your own comments widget.

1mkdir -p layouts/partials/post/comments
2echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html

In the meantime, you may need to introduce third-party assets, which can be solved by customizing assets or Hooks easily.