Disqus partial for Hugo

Disqus is a very popular service to integrate a fully featured comment system to your site. No hassle for spam protection where own solutions always struggle. Disqus works well for static pages since you don't need a special server infrastructure and you can provide a lot of interactivity to your page. In this article you find a shorthand partial to integrate Disqus into your Hugo page.

Embedding a Disqus thread into your Hugo Static Site is a very easy task. Let’s create 2 partials - one for the Disqus thread and another one for the counter script. To make it a completely dynamic solution we will put the Disqus page name into the theme config.toml.

partials/disqus.html

<div id="disqus_thread"></div>
<script>
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = '//{{- .Site.Params.disqus -}}.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

partials/disqus-counter.html

<script id="dsq-count-scr" src="//careerboost.disqus.com/count.js" async></script>

config.toml Update your config.toml with the following Param:

[params]
    disqus = "yourpagesdisqusname"

Usage Example

layouts/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>just a test</title>
</head>
<body>
<!-- some content !-->

{{ partial "disqus" . }}

<!-- some content !-->

{{ partial "disqus-counter" . }}
</body>
</html>

Read more about partials in the official documentation.