In this post I describe how I modified my Ghost Template to include Disqus comments in my blog posts.

The blog platform I use is a self-hosted version of Ghost.

One of the drawbacks is it doesn't have a built-in comment system. However, there exist some third party services that let you add comments to your site.

One such service is Disqus.

Sadly, adding this to my Ghost instance wasn't just a matter of checking a checkbox and filling in some parameters.

Setting up Disqus

I actually already had Disqus set up from older blogs. So I was able to use the existing Ghost project. In fact, the posts that got migrated from my previous blogs still have the comments from when I was running it on OpenShift (long time ago).

But to set it up, there's a guide here: Install Disqus on a Website (the links requires you to be logged in to Disqus)

Updating the theme

To add Disqus I had to modify the Theme I use a little. I use a slightly modified version of the standard Ghost theme, called "Casper".

Disqus requires me to add a small block of HTML / JavaScript to the page where I want to embed comments. This block of code make the browser load the comment form from Disqus directly.

In my case, I want this under every blogpost.

To do that, in the template I must update the "post.hbs" file and add the block of code somewhere. The standard Ghost theme's "post.hbs" file contains a place to put this already, by default it looks like this:

{{!--
<section class="post-full-comments">
    If you want to embed comments, this is a good place to do it!
</section>
--}}

So I uncommented the section and replaced the text with the Disqus code block.

The disqus block looks like below:

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = '{{url absolute="true"}}';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'ghost-{{comment_id}}'; // 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 = 'https://blog-aaronlenoir.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>

When you have an account at Disqus, it will provide you with the appropriate code. The only thing Ghost specific is the URL and Identifier:

  • URL: '{{url absolute="true"}}'
  • Identifier: 'ghost-{{comment_id}}'

This is information I got from the Ghost documentation: Apps & Integrations: Disqus

Fetching the new Theme

On the server where I run my Ghost blog I have a script to stop and start the webserver(s). Each application runs in a docker container, fronted by an Nginx (OSS webserver) container.

Every time I start the blog, first the latest version of the theme is fetched from github:

git -C blog/data/ghost/themes/casper-custom pull

CSP

I have implement "Content Security Policy" on my website. This informs the browser from which domain my website is allowed to fetch data. By default loading the disqus platform wouldn't have been allowed, so I had to add the domain in my nginx CSP configuration:

add_header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://code.jquery.com blog-aaronlenoir.disqus.com";

Possible Improvements

I would like to configure the comment section to only load on demand: click here to load the comments

I had that in my previous version of the blog, so I will add that back in the future.

Code

Find my customized Casper template here: github.com/AaronLenoir/Casper

Find my nginx configuration here: github.com/AaronLenoir/aaronlenoir.com/blob/master/nginx/vhost.d

Find the complete set up for my containers here: github.com/AaronLenoir/aaronlenoir.com

Conclusion

Adding Disqus comments to a Ghost blog requires modifications to the theme you are using.

I'm not sure what the SaaS solution of Ghost Pro offers. It's quite possible over there it can simply be checked on or off, but I haven't actually looked at that.