Using Disqus in Hugo

Post added by

Tools / #hugo #site #disqus

Published

All right fine. Some visitor may want to leave a comment about one or another of my posts. I can do that with Hugo.

I used the documented steps for adding Disqus comments to Hugo. Though Hugo provides a usable internal template for Disqus, using it as-is will result in a record-keeping headache if you test your site locally.

  • You look at the page locally
  • The Disqus code is loaded
  • Disqus creates a new comment thread for your local page
  • Before you know it you have dozens of localhost:1313 comment threads obscuring the live threads.

To avoid that, use the following fragment described in the Hugo documentation. It will skip loading comments when viewing your content from localhost.

partials/disqus.html
<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
      // Don't ever inject Disqus on localhost--it creates unwanted
      // discussions from 'localhost:1313' on your Disqus account...
      if (window.location.hostname == "localhost")
                return;

      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      var disqus_shortname = '{{ .Site.DisqusShortname }}';
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

That template needs .Site.DisqusShortname, which you set in your site config.

config.yaml
disqusShortName: yourshortname # whatever you set up on Disqus

Now you can use the partial in the appropriate template. I put the call for mine in _default/single.ace.

    footer
      = include partials/timeline.html .
      {{ partial "disqus.html" . }}

There. Now if you really want to say anything, are viewing the live site, and have JavaScript enabled, you can in the section below.

I will probably adjust the template over time, since I don’t want to burden non-commenting visitors with the extra load from calling out to Disqus. I like the approach David Wheeler took with his site: do nothing until visitor directly uses the "Load Comments" button.