Setting up Disqus comments on a Jigsaw blog

Jigsaw comes with an awesome blog starter template that i'm using on my blog. It comes with a bunch of nifty features including searchable posts, code highlighting and a bunch of other stuff, but one thing it's missing is comments.

Disqus to the rescue! You've probably seen a disqus comments section before, as they are pretty popular. Their turn-key solution doesn't require any server, meaning we can drop it into a static jigsaw site pretty quickly.

Installing Disqus on Jigsaw

First off, you need to sign up and create a site. Note down your site's shortname, as you'll need it later.

Head over to your site's config.php. You'll need to add an option here with your shortname. In my case, i've added it under services.

// ...
'services' => [
    'disqus' => 'atymic',
],
// ...

Next, we'll need to add a comments partial to include in your post template. In the blog template, the partials folder is _components, but this is probably different if you started from scratch. In this folder, create a comments.blade.php file with the code below.

<div id="disqus_thread"></div>
<script>  
  var disqus_config = function () {
    this.page.url = '{{ $page->getUrl() }}';
    this.page.identifier = '{{ $page->getFilename() }}';
  };
  (function() {
    var d = document, s = d.createElement('script');
    s.src = 'https://{{ $page->services->disqus }}.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">comments powered by Disqus.</a></noscript>

On my blog, I'm going to add the comments section below the content on the post layout. If you want to add it to other pages, just include the partial in the respective layout.

<div class="border-b border-blue-200 mb-10 pb-4" v-pre>
    @yield('content')
</div>

@if($page->services->disqus && $page->comments !== false)
    <div class="mb-4 pb-4">
        @include('_components.comments')
    </div>
@endif

Testing Disqus

Unfortunately, disqus makes it a bit hard to test your comments section locally, as you need to be on a whitelisted domain and pass that same domain in the page URL.

The easiest way that I found to test was to add localtest.me as a trusted domain (it points to localhost) and update your dev config to set the base_url to http://localtest.me. This will allow disqus to load (make sure to revert the base_url change once you are finished).

Disabling comments

If you want to disable comments on one of your posts, you can add comments: false to the meta yaml at the top of your markdown file.

---
extends: _layouts.post
section: content
title: No Comments
comments: false
---

Wrapping up

Hopefully, you've now got a working comments section on your blog. If not, feel free to use my comments section below and I'll try my best to answer any questions you have.