Integrating Disqus Comments into Your Hugo Blog

by

Adding a comments section to your Hugo blog can increase user engagement and foster a community around your content. Disqus is a popular third-party commenting system that is easy to integrate into static sites like those built with Hugo. This guide will walk you through the steps to embed Disqus comments into your Hugo blog.

Why Use Disqus?

Disqus offers several advantages over native comment systems, including spam filtering, social media integration, and a user-friendly interface. It also provides moderation tools and analytics, making it a powerful choice for bloggers who want a robust commenting experience.

Steps to Integrate Disqus into Hugo

  • Create a Disqus account: Visit disqus.com and sign up for a free account if you haven’t already.
  • Register your site: Add your website details and choose a unique shortname. This shortname will be used to identify your site in Disqus.
  • Get the Universal Code: Disqus provides a universal embed code that you will insert into your Hugo templates.
  • Edit your Hugo layout: Locate your blog post layout file, typically found at layouts/_default/single.html.
  • Insert the Disqus code: Place the Disqus embed code where you want the comments to appear, usually at the end of your post content.
  • Configure your template: Replace YOUR_DISQUS_SHORTNAME with your actual shortname in the code snippet.
  • Build your site: Run hugo to generate your static site with the embedded comments.

Sample Disqus Embed Code

Below is an example of the code you should insert into your Hugo template:

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '{{ .Permalink }}';  
this.page.identifier = '{{ .File.UniqueID }}'; 
};
(function() { 
var d = document, s = d.createElement('script');
s.src = 'https://YOUR_DISQUS_SHORTNAME.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>

Remember to replace YOUR_DISQUS_SHORTNAME with your actual Disqus shortname. This code dynamically loads the Disqus comments for each post based on the URL and unique identifier.

Final Tips

Test your site after adding the code to ensure comments load correctly. You can customize the appearance and behavior of Disqus through their admin dashboard. Keep your Disqus shortname secure and avoid changing it once your site is live to prevent broken comment threads.