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.