Disqus comments setup for Jekyll

The Disqus comments plug-in allows you to engage with the audience of your static website, without the hassle of maintaining a server.

You can sign up for a Disqus account here if you haven't already.

Next register your 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
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 _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

Done!

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

• Jekyll
• Disqus