Desired Persona

How to add Disqus comments to your Jekyll blog

· 1 min read

Ah so you want to learn how to add Disqus comments to your Jekyll blog. Look no further, this guide will attempt to keep the code clutter free and as reusable as possible.

Let’s get started!

First sign up for a Disqus account if you haven’t already.

Next register your Jekyll website with Disqus by creating a unique Disqus shortname.

Open your Jekyll sites config.yml file and add the following code. Remember to change my_disqus_shortname below which is just a placeholder for your own websites unique Disqus shortname that you created earlier.

# Disqus Comments
    # 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>
    var disqus_config = function () { = '{{ page.url | absolute_url }}'; = '{{ page.url | absolute_url }}';
    (function() {
      var d = document, s = d.createElement('script');
      s.src = 'https://{{ site.disqus.shortname }}';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
  <noscript>Please enable JavaScript to view the <a href="" 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 _layouts 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


Your Disqus comment system should now be working correctly after you push these changes to your live website.

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