A Jekyll blog is not backed by a database. Out of the box, there is no way for people to comment on or discuss blog posts. Disqus is a third party service that can be used to get around that limitation. This post covers adding Disqus to a Jekyll blog.

Software Versions

$ date
February 15, 2016 at 05:56:57 PM JST
$ uname -vm
FreeBSD 11.0-CURRENT #0 r287598: Thu Sep 10 14:45:48 JST 2015     root@:/usr/obj/usr/src/sys/MIRAGE_KERNEL  amd64
$ ruby --version
ruby 2.1.8p440 (2015-12-16 revision 53160) [amd64-freebsd11]
$ jekyll --version
jekyll 3.0.1

Instructions

First, install Jekyll and register your site with Disqus.

Add the following code to _includes/disqus.html. Remember to change the this.page.url line to the URL of your blog. The s.src line will need to point to your Disqus short name URL. Consider copying the Universal Embed Code directly from Disqus instead of this post.

{% if page.comments %}
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "http://BLOG.host.com{{ page.url }}"; // <--- use canonical URL
this.page.identifier = "{{ page.id }}";
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//SHORTNAME.disqus.com/embed.js'; // <--- use Disqus shortname

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 %}

Add the following line to the end of _layouts/post.html or anywhere else you want to display comments.

{% include disqus.html %}

Add the following line to the YAML front matter of a post to enable comments on a post by post basis.

comments: true

For example, the front matter of this post looks like this.

---
layout: post
comments: true
title:  "Adding Disqus to a Jekyll Blog"
date:   2016-02-15 05:56:57 +0900
categories: jekyll disqus
---

Optionally, to facilitate displaying comment counts add the following to _layouts/default.html before the closing body tag. Change SHORTNAME to the Disqus shortname you are using.

<script id="dsq-count-scr" src="//SHORTNAME.disqus.com/count.js" async></script>

Add #disqus_thread to the end of a URL and Disqus will count the comments on the page the link points to. For example, my _layouts/post.html contains the following code. Note the comment count at the top of this post.

{% if page.comments %} • <a href="https://sgeos.github.io{{ page.url }}#disqus_thread">0 Comments</a>{% endif %}

index.html contains the following code to display the comment count for each post in the list.

<a href="https://sgeos.github.io{{ post.url }}#disqus_thread">0 Comments</a>

Note that moving a post from _drafts/ to _posts/ may change the URL of the post. This will cause any comments added to the draft to disappear. The Disqus Migration Tools can be used move comments to the new URL.

References: