I recently added Disqus to my Jekyll powered website. This guide will keep the code clutter free and as reusable as possible.

Openconfig.yml and add the following code. Remember to changemy_disqus_shortname to your own Disqus shortname.

# Disqus Commentsdisqus:    # Leave shortname blank to disable comments site-wide.    # Disable comments for any post by adding `comments: false` to that post's YAML Front Matter.    shortname: my_disqus_shortname

Create a file calleddisqus_comments.html in Jekyll’s_includes folder and add the following code and save the file.

{% if page.comments != false and jekyll.environment == "production" %}  <div></div>  <script>    var disqus_config = function () {      this.page.url = '{{ page.url | absolute_url }}';      this.page.identifier = '{{ page.url | absolute_url }}';    };    (function() {      var d = document, s = d.createElement('script');      s.src = 'https://{{ site.disqus.shortname }}.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" rel="nofollow">comments powered by Disqus.</a></noscript>{% endif %}

The above codeblock includes yourDisqus Universal Embed Code. You may have noticed that i wrapped the code between{% if page.comments != false and jekyll.environment == "production" %} and{% endif %} liquid if statement. This included if statement will allow you to disable Disqus comments on any blog post. You simply addcomments: false in that posts YAML front-matter. As an added bonus it will also prevent Disqus loading when Jekyll’s environment is set to development.

Finally, open yourpost.html file and add the following liquid include tag just after the end</article> tag. This will load Disqus comments right underneath your blog posts when Jekyll’s environment is set to production.

{% if site.disqus.shortname %}  {% include disqus_comments.html %}{% endif %}

To build your Jekyll site in production environment use the following command.

JEKYLL_ENV=production bundle exec jekyll build

Done!

Disqus comments should now be working correctly.

Let me know in the comments if you found this tutorial helpful?