/ Ghost

How to enable Disqus comments on Ghost (Casper Theme) via AWS Lightsail

In this short guide, I'll be walking you through how to enable the Disqus comments feature on Ghost's Casper theme. Like a few others, I host this Ghost blog using AWS Lightsail and I try to keep it secure by not activating FTP or mail accounts through the VPS. Below is a few quick steps on how to activate Disqus using command line on AWS.

Get your Disqus shortcode

Head over to Disqus.com and login or create an account. Once in, click on the dropdown menu in the top right of the screen to view your profile. Heading back to the menu from this page, you should see an option labelled 'Add Disqus to Site'.

disqus-add-to-site

Clicking this link will take you to a page listing all of the features of Disqus, read through it all if you like but once you're ready click the 'Get Started' button at the bottom of the page.

For the next option you will want to select I want to install Disqus on my site. The next page has a short form and you will be required to enter a unique website name. Make a note of what you enter here as you will need it later on.

Go through the rest of the options and when it comes up with a list of software, scroll to the bottom and click the 'Install manually' button. You will see a few boxes with some JavaScript code to embed in your site but you don't need to copy any of it. Just make sure you have your website shortcode (what you selected for your website name earlier).

Activate Disqus on your Ghost blog

OK, so the next thing you will need to do is make a file change to one of the theme files on your Ghost installation. I will go through as though you are accessing via the AWS Lightsail SSH console. If you have FTP access then you can simply access the required file through there instead.

Login to your AWS Lightsail account and select the instance running your Ghost blog. Once you've found it, click the small console icon on the right hand side to open the terminal window.

aws-lightsail-ssh-console

Head over to the root folder of your installation using the following command (make sure to change it if you have installed it in a different location.

cd /var/www/ghost

Now, we need to open up the editor in order to make changes to a file. Be exceptionally careful here if you're not used to making changes in command line. Type in:

sudo nano content/themes/casper/post.hbs

The full file should open up here so use the arrow keys to navigate towards the bottom until you see <section class="post-full-comments">. A few lines underneath this, you will see a small piece of javascript code which the Ghost devs have helpfully hidden away for you. All you need to do is edit the line with s.src = 'https://test-ABCDEFG.disqus.com/embed.js';.

Note: I think the actual string of text after the 'test-' bit might be randomised so don't worry if it is different.

Simply enter the shortcode which you got from Disqus earlier (in the Website Name input) and replace the default string so it now looks like: s.src = 'https://yourshortcode.disqus.com/embed.js'; instead.

Lastly, just delete everything between the {{!-- and the <section class="post-full-comments">" (otherwise you will have a random paragraph on your post pages). Don't forget to delete the end comment tag as well which should look like --}} which should be just under that section of HTML.

Press CTRL+O (letter O not zero), press enter to rewrite the file and then press CTRL+X to come out of editing mode.

Now, just restart Ghost by typing ghost restart (make sure you're in the root folder of your Ghost installation).

Head back to one of the blog posts on your Ghost blog and you should now see the Disqus comment section underneath the author block towards the bottom.

Parting Note

If you're using FTP just download the post.hbs file in content/themes/casper and make the same changes in your editor of choice.

These steps should also work for any Ghost theme but, depending on whether the developer has already added the Disqus code, you may need to copy the entire code block from your Disqus account and paste it somewhere in the post.hbs file to make it appear. Try a few different placements to see how it looks, ideally you want it to appear after the author acknowledgement of course.


That's it. Feel free to leave a comment below if this has been helpful or if you've run into any issues and need a hand.

Jack W. Davis

Jack W. Davis

I am a software engineer specialising in PHP/MySQL based web applications. Originally from a marketing background, I enjoy coding, reading and gaming. Currently exploring NodeJS.

Read More