Disqus on Hugo: The Easy Way to Add Comments to Your Blog

Introduction

At first I did not include a comment section on my blog but I thought that it would be a good idea to do that. This improves user engagement and is an easier way to directly help the people if there are any bugs or problems.

Disqus is a third-party commenting system that can be used with Hugo to add comments to your blog posts. It already delivers all features I wanted and it is built into Hugo and with this the setup is very easy again.

Set up Disqus

To set up Disqus on your site, you will need to create a Disqus account and get a shortname for your site. You can create a Disqus account at Disqus. Once you have created an account, you will need to go to the Disqus dashboard and create a shortname for your site.

After this you should see the dashboard which should like something like this. Disqus dashboard

Then you should move to the settings page where you can enable/disable features as you like to. For example I disabled ads and reactions as I do not like to be shown on my page.

Under the settings menu in the general tab you can find your shortname which we have to use in the next part to include this into Hugo.

How to use

As I mentioned before Hugo has a built in template for disqus.

First go to you hugo.toml file and include the following:

disqusShortname = 'yourDisqusShortname'

Replace yourDisqusShortname with the shortname which you can find in the general tab of the settings.

The last step is to include the template. I use the single.html in the _defaults folder where I included it at the bottom:

{{ template "_internal/disqus.html" . }}

And that’s it - you are finished.

Hints

If you just include it this way it can reduce the performance of your webpage as it downloads a big stuff from disqus directly.
If you running hugo locally with hugo serve it does not display anything. You get the following text Disqus comments not available by default when the website is previewed locally. comments powered by Disqus
If you want to take a see how it looks you can do the following. Build your project with hugo. Then go to your public folder and run a local server.
E.g. you can use python with
```
python3 -m http.server 9000
```
Now you can go in your browser localhost:9000 and move to your post. There you can see the disqus comment section.

You can also add the following code to the front matter of each blog post that you want to enable comments for:

disqus_identifier: my-blog-post-1
disqus_title: My first blog post
disqus_url: https://my-blog.com/my-blog-post-1

Alternatives

There are some alternatives which are great solutions, too. There you have to manually do more than just little configuration but maybe they are better for your usecase. Follow this link to the Hugo Documentation for the list.

Conclusion

As you saw to include disqus is very easy and a good way to start with a comment section. Try it out as it is free for personal projects. If you need more features and use it for commercial use take a look the the pricing tables.