Add Disqus comment system to hugo site

2021-05-18 316 words 2 minutes

Contents

1 Setup account

Go to disqus.com and create account
e-mail verification
At disqus.com/home, go to cog mark > “Add Disqus to site” > “Install Disqus”
1. Select plan > Basic
2. Install Disqus > “I don’t see my platform listed, install manually with Universal Code”. See tutorial video
  1. Check embed code and java script link (option for counting comment)
  2. Check document about Use configuration variables to avoid thread and missing comment
  3. Configure
    - Website name
    - Category (e.g. Tech)
    - Language (e.g. English)
    - (optional) I added comment policy, like “We welcome relevant and respectful comment. Off-topic comments may be removed.
    - (optional) Appearance (e.g. color scheme: Auto, Typeface: Auto)
  4. Setup moderation
    - e.g. Balanced
Check shortname
- Disqus.com > Admin > Settings > Shortname
- Ref. Discus document - What is a shortname

2 Setup on hugo (LoveIt themere)

Hugo supports to configure Disqus comment system. In detail, see document.

LoveIt theme implement embedded code in theme/LoveIt/layouts/partials.html and comment is generated by LoveIt/layouts/_default/single.html.

For enabling this, just configure:

config.toml

1
2
3
4
5
6
7
8


    # Comment config
    [params.page.comment]
      enable = true
      # Disqus comment config (https://disqus.com/)
      [params.page.comment.disqus]
        enable = true
        # Disqus shortname to use Disqus in posts
        shortname = "<shortname>"

3 Additional configuration

Disqus.com > Admin > Settings

Moderation
- Guest Commenting > Allow guest to comment
Ads
- (disable) Allow ads within comments
- (disable) Allow ads below the comments
Reaction
- Prompt: “What do you think?”
- Include Images: “yes”

4 Confirm locally

As per - hugoloveit - basic documentation,

Due to limitations in the local development environment, the comment system, CDN and fingerprint will not be enabled in the development environment.

You could enable these features with hugo serve -e production.

1

$ hugo serve -e production

Then you can check how comment is displayed for each posted page locally.