Setting up a simple Blog with a Static Website Generator - Part 10: Hugo Disqus

Sun Jan 3, 2016

Draft - Raw, Un-edited

1/6/2016 Disqus

My disqus shortname:  yourDisqusShortname

Global config file disqusShortname variable needs to be under params

  disqusShortname: "yourDisqusShortname"

Disqus admin page

Install also worked with the following (but without the logic for localhost):

NOTE: the following shows example for the if statement


<aside id=comments>
<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 disqus_shortname = '{{ .Site.Params.disqusShortname }}';
        var disqus_identifier = '{{if isset .Params "disqus_identifier" }}{{ index .Params "disqus_identifier" }}{{ else }}{{ .Permalink }}{{end}}';
        var disqus_title = '{{if isset .Params "disqus_title" }}{{ index .Params "disqus_title" }}{{ else }}{{ .Title }}{{end}}';
        var disqus_url = '{{if isset .Params "disqus_url" }}{{ index .Params "disqus_url" | html  }}{{ else }}{{ .Permalink }}{{end}}';
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        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>

NOTE: the following will create unwanted disqus discussions when running as localhost, so refer to
to have a conditional detect localhost - see layouts/chrome/disqus.html


$ cat partials/disqus.html
<aside id=comments>
    <div><h2> Comments </h2></div>
    {{ template "_internal/disqus.html" . }}

from a typical post front-matter meta data in
disqus_identifier: 1162
disqus_title: WP GitHub Code Viewer


The front matter is one of the features that gives Hugo its strength. It enables you to include the meta data of the content right with it. Hugo supports a few different formats, each with their own identifying tokens.