Getting started

If you haven’t used Disqus before, it’s a fantastic service for offloading your comments to a third party service. Since we’re doing this in the context of Jekyll, that means we don’t need to run a server in order to handle user comments. Disqus offers tools for moderating and managing feedback from users. To follow along with this example, create a Disqus account here, and then setup your site here[https://disqus.com/admin/create/].

I’ve included what you’ll need in the next section for configuration and setup. You can compare the Universal Code option with what is provided below.

We’re going to make this as repeatable and easy as possible. I want it to:

  1. .. centrally manage my configuration in _config.yml.
  2. .. be able to optionally use Disqus anywhere in my site (about pages, posts, etc). Basically, make it globally available.
  3. .. be able to specify the pages that I want to use Disqus in. I don’t always want a Disqus section.
  4. .. be able to disable Disqus while I’m doing dev work on the site.

Centrally Managed configuration

Add your Disqus domain that you created during the site setup to the bottom of your _config.yml:

disqus_domain: spockrocks.disqus.com

Create the Comments template

Create a file in the _includes directory called comments.html.

Since we want to disable comments when we aren’t in production, and we will look at the environment to determine if it’s production. See these docs for more information on how to setup your environment at build time.

Since we want to be able to specify the pages that use Disqus, we’re going to set a page level setting that will tell Jekyll whether or not to display the contents of comments.html. For this example, we’ll call the page level setting comments. The example below will only show a Disqus section if it’s in the production environment when comments are enabled for the page.

{% if page.comments and jekyll.environment == "production" %}
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//{{ site.disqus_domain }}/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>
{% endif %}

The only difference with the above script and what you will get from the Universal Code section from Disqus is the s.src line. We have swapped it out for the variable we defined in _config.yml.

Adding Comments to the Layout

Since we want comments to be available to all types of pages, we’re going to edit _layouts/default.html. Here we want to include our comments.html page that we created in the previous section. Add {% include comments.html %} below the {{ content }} line. If you still have a vanilla default layout, the entire file will now look like this:

<!DOCTYPE html>
<html>

  {% include head.html %}

  <body>

    {% include header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ content }}
        {% include comments.html %}
      </div>
    </div>

    {% include footer.html %}

  </body>

</html>

Giving Pages a Comments Section

Since we only want comments sections where we explicitly specify, we need to add a comments configuration for pages where we want Disqus available. Here is one of the posts without comments enabled:

---
layout: post
title:  "Starting with Jekyll"
date:   2016-03-16 10:22:52 -0500
categories: tech
---

Here is the comments section enabled for this post. Remember that with our setup, this will only display the comments section when the JEKYLL_ENV is set to production:

---
layout: post
title:  "Starting with Jekyll"
date:   2016-03-16 10:22:52 -0500
categories: tech
comments: true
---

Verify it works

We want to test the comment section is loading before we commit and push our changes. To do this, set the JEKYLL_ENV to production. This can be done as you launch the process:

$ JEKYLL_ENV=production jekyll serve