How to add Disqus comments to Jekyll - Desired Persona
Desired Persona
Desired Persona
Desired Persona Subscribe
Affiliate marketer. Media buyer. Developer.
Updated 13 Dec 2016 · 1 min read

How to add Disqus comments to Jekyll

It's easy to add Disqus comments to your blog

I will show you the steps i took to keep the code clutter free and as reusable as possible for other Jekyll websites.

Open config.yml and add the following code. Remember to change my_disqus_shortname to your own 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

It’s worth noting that leaving this disqus_shortname blank will disable Disqus site-wide.

Create a file called disqus_comments.html in Jekyll’s _includes folder and add the following code. This codeblock includes your Disqus Universal Embed Code in the correct format for Jekyll wrapped between {% if page.comments != false and jekyll.environment == "production" %} and {% endif %} liquid tags.

{% 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 included if statement allows you to disable Disqus comments on any blog post. You simply add comments: false in that posts YAML front-matter. It also prevents Disqus loading when Jekyll’s environment is set to development.

Finally, open your post.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 run Jekyll in production environment use the following command to view your site.

JEKYLL_ENV=production bundle exec jekyll serve

Disqus comments should now be working correctly on your Jekyll website. Let me know if you found this tutorial helpful?

Jekyll Disqus Comments
Desired Persona
Desired Persona Subscribe
Affiliate marketer. Media buyer. Developer.