DEV Community

loading...

Disqus comments setup for Jekyll

desiredpersona profile image Desired Persona Originally published at desiredpersona.com on ・2 min read

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

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
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 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 %}
Enter fullscreen mode Exit fullscreen mode

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

JEKYLL_ENV=production bundle exec jekyll build
Enter fullscreen mode Exit fullscreen mode

Done!

Disqus comments should now be working correctly.

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

Discussion (2)

pic
Editor guide
Collapse
jeky_zero profile image
Jeky

I was thinking about this the other day. Thanks for the tutorial! Going to add comments to my blog 👍

Collapse
desiredpersona profile image
Desired Persona Author

You’re welcome