Adding Disqus to Jekyll Site

Dec 19, 2015

As I mentioned in my Hello Jekyll! post, I’m administering this site with Jekyll. I’ve got all of my code in GitHub and am using Travis CI for continuous integration / continuous delivery of the site. That’s been working quite well thus far, though I’d like to add more testing utilities.

One thing that was missing once I moved my blog from Blogger to Jekyll was a commenting system. I’ve seen Disqus used quite frequently and it seemed like a nice way to get a commenting system introduced without adding annoyances to users (or for me) since it allows people to use Disqus credentials or credentials from various other providers (e.g. Facebook).

Process

The process was fairly simple. You basically just do the following:

1. Register your site
2. Add the Universal Embed Code to your site however you’d like, or follow their instructions for Jekyll
3. Edit the variables in the code to provide your canonical URL and page identifier

The nice thing about Jekyll is that you can use Liquid to fill this in for you. So here’s what I ended up doing to suit this need within my template file specifically for Disqus:

<script>
  var disqus_config = function () {
    this.page.url = "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}";
    this.page.identifier = "{{ page.id }}";
  };
  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    {% if jekyll.environment == "production" %}
      {% assign disqus_id = 'harringa' %}
    {% else %}
      {% assign disqus_id = 'harringadev' %}
    {% endif %}
    s.src = '//{{ disqus_id }}.disqus.com/embed.js';

  ...

You’ll notice that I’m also using separate Disqus shortnames for environments per their recommendation. Jekyll provides a jekyll.environment which defaults to ‘development’ if you haven’t set a JEKYLL_ENV environment variable. So, in my Travis CI configuration, I simply do just that. This way I can test out Disqus without worrying about accidentally posting test comments to my production site.

Editorial note: I was using Snap CI from ThoughtWorks but they have recently shut down that product. I’ve moved this to Travis CI and have updated the links.