I’ve had comment setup on my to-do list for quite some time. Now that school is over, I finally got around to doing it!

I thought the setup process was more confusing that it should’ve been – here’s how I got it working on this Jekyll site. (It’s actually easy, I promise.)

1. Set up Disqus

Go to Disqus and create an account. Once you do, you’ll see an option to “install Disqus on my site.” Click that, then fill out the appropriate info and proceed.

You’ll be asked what platform your site is on. Click Jekyll. You’ll see a page with some brief instructions. Ignore them; they’re incomplete and confusing :) . Then click “Continue,” fill out the short form, and proceed.

2. Edit your site’s config file.

In your site’s _config.yml, edit the following lines:

  • Set the url variable to your site’s actual URL if you haven’t already (i.e. “http://hudsonburgess.com”)
  • Add the following lines to tell your site where to load comments from:
    disqus:
      shortname: <YOUR SITE'S SHORTNAME> # i.e. "hudsonburgess"
    
  • Add the following lines to enable comments on all your posts. They’re pretty self-explanatory:
    # Default post options
    defaults:
      -
        scope:
          path: "_posts"
        values:
          comments: true
    

3. Create the disqus_comments partial.

We’ll put the following comment code in _includes/disqus_comments.html. _includes/ contains all the partials for your site; you can learn more about Jekyll partials here.



<div id="disqus_thread"></div>

<script>
  var disqus_config = function () {
    this.page.url = "{{ site.url }}{{ page.url }}";
    this.page.identifier = "{{ page.id }}";
  };
  (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" rel="nofollow">comments powered by Disqus.</a></noscript>


If you set up _config.yml correctly, you should be able to copy and paste this directly.

4. Add the disqus_comments partial to your post layout.

Add the following line to _layouts/post.html (or whatever you call your post layout) before the closing </article> tag:

{% include disqus_comments.html %}

  • If you don’t have this file already, you may need to copy it from your theme’s default location and edit it. See here for how to find your theme’s default files.



That should do it! You can preview the site as usual with bundle exec jekyll serve to make sure everything works.

H/T to these two blog posts for helping me figure this out: