How to add Disqus comments to Jekyll

Updated · 1 min read

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

Sign up for a Disqus account.

Register your website with Disqus by creating a unique Disqus shortname.

Open your sites config.yml and add the following code. Remember to change my_disqus_shortname below which is just a placeholder for your own sites unique Disqus shortname.

# Disqus Comments
disqus:
    # 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 called disqus_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 id="disqus_thread"></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 your Disqus 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 add comments: 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 your posts layout file normally called post.html which is located in your _includes folder 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?