Add Commenting System to Your Website in Hugo

Introduction

In this article, I will take you all step by step to add the Disqus commenting system to the Website built in Hugo using Relearn theme.

What is Disqus?

  • Disqus is a Commenting Platform that can be added to your website to increase user engagement for your website or blog.

Why Disqus ?

  • This is nice plugin that can be easily integrated in to your website
  • Disqus offers a free plan that can be used to enable comments to your blogs or website
  • This platform retains all the comments for your blog or website per page which is an awesome way to interact with the readers

Let’s add the Disqus to our Website

To add Disqus, we need to make changes to the relearn theme that we added in the previous post

Step 1 - Create and Configure Disqus Account

Let’s navigate to https://disqus.com/

  • Click on Get Started button

disqus

  • Select I want to install Disqus on my site

install Disqus

  • Provide a Website Name. In this example, we have provided the value as dilipsundarraj.

Website

  • Let’s go with Basic option and select Subscribe Now button

Website

  • Since Hugo is not displayed as an option, Lets select the Highlighted option below.

Manual Install

  • Go to the bottom of the page and select the Configure button
  • Click next and Complete Setup button

We have successfully created a disqus website named dilipsundarraj

Step 2 - Integrate Disqus in to our Website

Update the config.toml file with the disqus site that we create in the previous step.

disqusShortname = "dilipsundarraj"

Create a disqus.html file and add html file in this themes/hugo-theme-relearn/layouts/partials/ folder

disqus.html

<style>
  .disqus_thread{
    display: flex;
    width: 50%;
    margin:auto;
    height: 5%
  }
</style>

<div id="disqus_thread"
     class="disqus_thread"
></div>

<script type="text/javascript">

  (function() {
    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="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Open the footer.html and add this line

footer.html

  • footer.html is located in the themes/hugo-theme-relearn/layouts/partials/ folder
  • Add the below line after the </main> tag
        {{- partial "disqus.html" . }}

Step 3 - Let’s test it

Run the follow command

hugo serve

You should be able to see the below comments section show up in your website Comments Install

Conclusion

  • Congrats! We have successfully added the disqus commenting system to our website.
comments powered by Disqus