Jekyll is a popular static site generator that is perfect for blogging. In fact, this site uses Jekyll as well. Unlike WordPress, Jekyll does not use/have database at all. Which makes it extremely fast because it does need to make a trip to DB when fetching a blog. Since Jekyll is simply a static site generator, there are disadvantages. For example, it does have provide/have the ability for people to comment like WordPress did. However, you can still use a 3rd party library to complement that. Disqus is a popular library that allows you to add commenting system to your site easily. In this tutorial, I am going to show you guys how to add Disqus to your Jekyll site in two ways.

First way:

Create a disqus.html file and save it within the folder name _includes

Here is an example of the disqus.html file,

  <div id="disqus_thread"></div>
  <script type="text/javascript">
    var disqus_config = function () {
      // Here is an example,
      // this.page.url = "https://poanchen.github.io/blog/2017/07/27/how-to-add-disqus-to-your-jekyll-site";
      this.page.url = "[put_your_site_url_here]{{ page.url }}";
      this.page.identifier = "{{ page.url }}";
    };

    // You should be able to get the following lines of code from your Disqus admin.
    // https://disqus.com/admin/universalcode
    (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = '//[your_username].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">comments powered by Disqus.</a>
  </noscript>

source code hosted on GitHub

Use this way if you do not mind inline JavaScript.

And, go to any site that you would like comment included and do this,

  // some contents
  {% include disqus.html %}
  // some contents

Second way:

Create a disqus.html file and save it within the folder name _includes

Here is an example of the disqus.html file,

  <div id="disqus_thread"></div>
  <script src="/path/to/your/disqus.js"></script>
  <noscript>
    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
  </noscript>

source code hosted on GitHub

Create a disqus.js file and save it to anywhere you like, (we saved it in src/js/disqus.js)

  var disqus_config = function () {
    // we are using document.location.* here because Jekyll code does not work well in JS code.
    this.page.url = document.location.href;
    this.page.identifier = document.location.pathname;
  };

  // You should be able to get the following lines of code from your Disqus admin.
  // https://disqus.com/admin/universalcode
  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = '//[your_username].disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();

source code hosted on GitHub

And, go to any site that you would like comment included and do this,

  // some contents
  {% include disqus.html %}
  // some contents

Setting up the code this way allows you to enable commenting on a page-by-page basis.
It is that simple.

Wrapping Up

Hopefully this guide has help you to add Disqus to your Jekyll site. Thank you for reading!

Resources

I’ll try to keep this list current and up to date. If you know of a great resource you’d like to share or notice a broken link, please let us know.

Getting started