How to add comments on your Jekyll sites

How to add comments on your jekyll sites

I have selected Disqus for adding comments on my posts. Disqus is one of the easiest comment platform you can implement in static sites such as Jekyll. Jekyll is made using Ruby and is one of the best static framework used today especially in making documentations, blogs and portfolio. In fact this site you are viewing is made using jekyll. Isn't it awesome?

So how do we implement comments in our site using disqus?

First you need to create account and organization on Disqus. There will be informations they require you to fill, but it will only take a minutes.

After you create your account organization on disqus, you have to copy your disqus shortname located at admin»settings»general and put it on your _config.yml folder. Like this:

disqus:  
  shortname: (Put your Disqus shortname here)

Then you have to create comments.html inside your _includes folder and paste this code:

  {% if page.comments %}

    <!-- Add Disqus comments. -->
    <div id="disqus_thread"></div>
    
    <script type="text/javascript">
      var disqus_config = function () {
        this.page.url = "{{ site.url }}{{ page.url }}";
        this.page.identifier = "{{ site.url }}{{ page.url }}";
      };

      (function() {
        var d = document, s = d.createElement('script');
        s.src = '//{{ 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">comments powered by Disqus.</a>
    </noscript>

  {% endif %}

If you allow your post to have comments you will have to add boolean variable: comments at the top of your post and set it to true:

  ---
  layout: [your layout]
  comments: true
  # other options
  ---

Last, you have just to render your comments.html from your _includes folder to the bottom part of your post.html layout file. Like this:

    {% include comments.html %}

You’re all set.


Authors Note

Prince Karlo Prince Karlo

I no longer use this commenting system for some reason. I switched to Valine which is an open-source. You can see valine comment below.

See valine at @github.