Collecting my attempts to improve at tech, art, and life

Using Disqus in Hugo

Tags: hugo site disqus tools

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.

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

<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")

      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      var disqus_shortname = '{{ .Site.DisqusShortname }}';
      dsq.src = '//' + disqus_shortname + '';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<a href="" 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.

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.

      = 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.

Added to vault 2024-01-15. Updated on 2024-01-26