Sebastian's blog

Adding Disqus comments to a Jekyll blog

Posted on May 2, 2014

Because Jekyll only serves static html pages, I need to use another component/system, that will handle and store the comments for me. Disqusis one of the different solutions out there and is definitely the one that handles the most traffic in the web (interesting read How Disqus Went Realtime With 165K Messages Per Second And Less Than .2 Seconds Latency).

How to setup Disqus in your Jekyll blog

Step1: Sign up for an account

Head to Disqus and sign up for an account. They have a really simple sign up process that gets you started in less than 2min.

Step2: Get the code

After setting up your site, Disqus will propose install instruction for several blog tools. In our case, you should use “Universal Code”.

Get the code and put save it in _include/comments.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'YOUR_SHORTNAME'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Modify your layouts/post.html and add {% include comments.html %} wherever you want to include the comments (usually… at the bottom!)

And that would be it! Simple!