Setting Up Disqus on Hugo
Table of Contents
God forgive me, for I have sinned. #
I dreamed of a fully static blog — fast, snappy, without even a shadow of PHP. Instead, I’m forced to bow to harsh reality to avoid descending into madness.
Unfortunately, setting up staticman is proving more complex and troublesome than expected, with a thousand unknowns and difficulties, so I’ve decided to fall back on the good old Disqus.
Here’s a short guide on how such a simple operation can become a pain.
Introduction #
This guide is specific to the hugo-papermode template. With a few tweaks, it can be adapted to other templates (e.g., instead of comments.html, the file might be called disqus.html).
Create the comments file #
Create the comments file in your layouts:
layouts/partials/comments.html
Leave it empty for now.
Create a new domain on Disqus #
Go to Disqus and create a new site following the guided procedure. The only thing to watch for is to carefully type the root link (in my case blog.halon.cc).
Once done: Installing Disqus -> At the bottom of the list there’s a button if your platform isn’t present in the list.
On the next page, at step 1, you’ll find the custom HTML code with your site’s data, something like:
(function() { // DON’T EDIT BELOW THIS LINE var d = document, s = d.createElement(‘script’); s.src = ‘https://EXAMPLE.disqus.com/embed.js'; s.setAttribute(‘data-timestamp’, +new Date()); (d.head || d.body).appendChild(s);
In the first part, there are some commented lines for customization. If you don’t know how to work with them, use it as-is.
Take all this stuff and dump it into layouts/partials/comments.html
Enable comments #
Comments need to be enabled in config.yaml by adding the following parameter:
params: comments: true
Done #
That’s it. Unlike other templates, here there’s nothing to add in the article headers. It’ll be automatically enabled on every article.
Some useful references #
Official Disqus comments guide for Hugo