— Menu —

Hello!

I'm Keir Whitaker — I work in the Offline Marketing team at Shopify. You can my read latest blog posts, find out more about me & listen to the web industry podcast I co–host. You'll also find me on Twitter and Instagram.

Blog

Adding Comments to a Jekyll Blog

Earlier this year I published an article titled Rebuilding keirwhitaker.com with Jekyll which documented my move from the Slim PHP micro-framework to Jekyll.

In that article I described how I used Jekyll to add a blog function to this site. One thing I didn’t add at the time was the ability to leave comments on posts. I don’t intend to open comments on most posts but I figured it would be a quick win to add them to the site for the odd occasion that they might be required.

Third-Party Comment Systems

Jekyll doesn’t support comments out of the box. This is entirely understandable given that it’s a static site generator and comments are rather more dynamic. As such you’ll need to look for an alternative third-party solution.

Ultimately I stuck with Disqus — I’ve been a user for some time and find it pretty easy to implement and manage. You could also look at solutions like Facebook. While I haven’t tried it myself I imagine the integration will follow a similar process.

Adding Disqus

Once you have signed up to Disqus you’ll need to add the relevant JavaScript and HTML to your templates. Firstly you’ll need to grab a copy the Universal Embed Code:

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
    // Replace PAGE_URL with your page's canonical URL variable
    this.page.url = PAGE_URL;
    // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    this.page.identifier = PAGE_IDENTIFIER;
};

(function() {
    // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
    var d = document, s = d.createElement('script');
    // IMPORTANT: Replace EXAMPLE with your forum shortname!
    s.src = '//EXAMPLE.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>

I added this to a new include file called disqus.html and saved it to the _includes folder within my Jekyll project. The next step is to fill in the placeholders in the code snippet. In the example above you’ll notice the following three uppercase variables we need to edit:

Using Jekyll we can easily create these variables.

To form the PAGE_URL we use the {{ site.url }} variable. All the variables set via the command line and stored in your _config.yml are available through the site variable.

For example, I have url: https://keirwhitaker.com in my configuration file. I can access this in templates using {{ site.url }}. In order to give the full PAGE_URL I appended {{ page.url }}. This is the URL of the post without the domain, but with a leading slash. Together these will give us the posts unique URL. For my site this will look something like this (depending on the page being viewed):

https://keirwhitaker.com/blog/rebuilding-keirwhitaker-dotcom-with-jekyll

{{ page.id }} was a little harder to work out. Initially I couldn’t figure out why Disqus needed this additional variable. Thankfully the Disqus documentation cleared it up:

this.page.identifier — Tells the Disqus service how to identify the current page. When the Disqus embed is loaded, the identifier is used to look up the correct thread. If this.page.identifier is undefined, the page’s URL will be used. The URL can be unreliable, such as when renaming an article slug or changing domains, so we recommend using your own unique way of identifying a thread.

This approach means that your comments can live on even if you change domains and/or URL structures — handy! Disqus actually recommend you use an integer. This would be really easy to generate using a server based platform but no so easy with something like Jekyll. In the end I chose to use the URL of the post minus the domain. This is simply {{ page.url }}. There may be better ways to do this so please leave a comment if you know of one.

Finally EXAMPLE — this is the simplest of the three. All you need to do here is add the short name given when you sign up to Disqus. You could add this to your _config.yml or hard code it.

Once these are in place we can turn our attention to the blog article templates.

Front Matter

In order to turn comments on or off on a post by post basis we can simply add a new front matter item as follows:

comments: true/false

We can now use this flag to show or hide the comment widget during the build process.

Blog Layout

Next I wanted to make sure the front matter flag was working. In the relevant part of my blog.layout template I added the following Liquid code to show/hide the comment widget:

{% if page.comments == true %}
{% include disqus.html %}
{% endif %}

This will include the disqus.html file if the front matter is set to true. I also wanted to show a link to the comments at the top of the page. In order to do this I add another Liquid conditional as follows right next to the date beneath the title:

<p class="article-date">{{ page.date | date: '%B %d, %Y' }}{% if page.comments == true %} | <a href="{{ site.url }}{{ page.url }}#disqus_thread" class="disqus-comment-count">Comments</a>{% endif %}</p>

If clicked this will take the reader to the <div> with an id of #disqus_thread.

Finally, I added one more conditional piece of logic that should update the element with a class of disqus-comment-count.

{% if page.comments == true %}
<script id="dsq-count-scr" data-cfasync="false" src="//keirwhitaker.disqus.com/count.js" async></script>
{% endif %}

Wrapping Up

That’s really all there is to it. It’s a pretty simple addition which, when implemented, will allow your readers to leave comments on your site.

What’s not Working

The one issue I have had, and the reason for the should above, is that I haven’t been able to get the comment count working. Further investigation reveals that it is most likely due to my serving the site through Cloudflare. There are a number of published fixes to this issue but so far they don’t appear to be working — it’s not a big issue but one I will solve eventually, I am sure.

Got a comment? Feel free to leave one below.

This article was published by Keir Whitaker on May 30, 2017 in the Web Development category. You can view the blog archives, subscribe to RSS updates, and see a full list of my contributions to other publications. Articles are also availabe on Medium. Discuss this article with me by email.