Warning: although the Ghost tutorial is very good and self-explanatory, I don’t think it covers other themes rather than Casper, which is why I’m doing this. In no way I’m saying their tutorial is not good.

As you already know, Ghost does not natively support comments. (But don’t worry!)

In this tutorial, I’ll show you how to install Commento, with any theme, the right way!

For the record, Commento it's an open source project that comes with automatic spam detection out of the box and is completely free from ads or tracking.

Assuming you don’t want any hassle, and you will just use their hosted Cloud Service, then follow these next steps:

1. Sign Up and Register your Blog

Create a Commento account and register your site by adding the domain in the signup process:

2. Obtain your Snippet

Commento uses a universal embed snippet, which you will use to embed the comments in your blog. After you register your site, this code will appear so you can copy it:

<div id="commento"></div>
<script defer
  src="https://cdn.commento.io/js/commento.js">
</script>

All your settings, themes, and comments would be automagically loaded. Commento is mobile-responsive too, as it simply fills the container it is put (Not really, more on that later).

3. Paste the Code in your Theme

Next, in your Ghost theme, locate the template file where you want to insert comments on your site. This is usually inside post.hbs - right after the content of your posts.

In Casper, Ghost's default theme, you'll see a line of code specifically reserved for inserting comments. This is where you'll want to paste the Commento embed code:

Make sure you remove the comments on line 65 and 69.

In other themes, such as Maido(this current one), you will find it in a similar comment section. Normally, there’s a section/div class about comments (post-full-comments/comments-content/etc). In this section/div, is where placeholders for disqus services are normally placed.

Then, just proceed to paste the code inside:

<div class="comments-section global-section">
    <div class="comments-wrap">
        <div class="comments-content">
            <div id="commento"></div>
            <script src="https://cdn.commento.io/js/commento.js">
            </script>
            {{#if access}}
            {{>services/disqus}}
            {{/if}}
        </div>
    </div>
</div>

4. Update your Theme

Zip your theme, upload it and make it active so you can see your Commento comments section in every post.

Now, if you are not using Casper, I would advise to also do the following:

5. Check Commento Responsiveness with Multiple Browsers

Although on desktop everything seemed fine, when using Safari on my iPhone Commento looked out of place. It was as if the section wasn’t responsive at all.

With the help of the developer, I found a solution. You only need to add this code in the Site Header – Code Injection area:

<!-- Commento Responsive -->
<style>
    .commento-root {
       -webkit-box-sizing: border-box;
       box-sizing: border-box
    }
</style>

And that’s it! Now everything will look fantastic (as it should be).

I hope this tutorial is helpful to you. Please let me know if you are going through something similar in the comments section.

Massive thanks to Fueko, the developer of this theme, and the Ghost team for the initial information aiding this tutorial.