Add comments with Commento
Tags: webdev, gatsby, ghost, cms
Published: 2020-08-09 12:01:27

---
title: Add comments with Commento
published: true
date: 2020-05-12 07:00:00 UTC
tags: #webdev #gatsby #ghost #cms 
canonical_url: https://www.jamify.org/2020/05/12/add-comments-with-commento/
---

This guide explains how you can easily add the commenting system Commento to blog posts of your Jamify site. You'll learn how to add the theme and how to connect to managed or self-hosted back-ends. Get informed about other commenting systems and see how Commento fares against them.

 ![Add comments with Commento](https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

Comments are a great way to allow your readers to interact with you and leave valuable feedback right where it belongs. Popular blogger [Pat Flynn](https://patflynn.com/) once coined the much quoted sentence:

> Without comments, a blog isn’t really a blog. To me, blogging is not just about publishing content, but also the two-way communication and community building aspects behind it.

There is little to add to this statement, except that you need the willingness and capacity to respond to the comments you receive. If you can't respond within a few days, at least after a new article has been published, it's probably better not to enable comments on your website.

## Why Commento?

We looked at several commenting systems and believe [Commento](https://commento.io/) is currently the best fit for Jamify sites.

We choose it mainly for the following reasons:

- It's [open source](https://gitlab.com/commento/docs/-/tree/master) published under the MIT licence.
- It's privacy focused and GDPR compliant (no ads!).
- It's layout fits nicely into the standard Ghost theme.
- It provides a [managed service](https://commento.io/pricing) and an option for self-hosting their platform.

Commento has recently received the Mozilla Open Source Support award in recognition of Commento's contributions to make the internet more privacy-friendly.

## Preparations

Let's start by cloning the Jamify starter to create a playground for testing purposes:

```bash
$ git clone https://github.com/styxlab/gatsby-starter-try-ghost jamify-comments
$ cd jamify-comments
```

The `git clone` command puts all files into a _work directory_ named `jamify-comments`. The Jamify starter is a Gatsby site that is ready to source in all your content from a headless Ghost CMS.

Without further configuration, it provides a demo site replicating the standard Ghost Casper theme.

## Add the Commento plugin

Next, use the package manager `yarn` to add the [commento plugin](https://github.com/styxlab/gatsby-theme-try-ghost/tree/master/packages/gatsby-theme-ghost-commento) to your site:

```
$ yarn add gatsby-theme-ghost-commento
```

As is the case with all Gatsby projects, you have to also add the plugin to your `gatsby-config.js`:

```javascript
// In your gatsby-config.js
plugins: [
    {
        resolve: `gatsby-theme-ghost-commento`,
    },
]
```

We will discuss more configuration settings below. For a first test, run `yarn develop` to build your Jamify site. Invoke a post, for example the welcome post under `http://localhost:8000/welcome/`. Scroll down and you will see the following error message at the end of your post:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/jamify-commento-error-1.png)

This message is a bit misleading. By default, the plugin is configured to connect to `commento.io`, but as you are connecting from an unknown source, you'll see this message. The message will go away, after everything is properly configured.

## Commento local install

When you want to test comments from your Jamify site running on `localhost`, a local platform install is currently the only available option. You'll have more options for production sites as we'll see later.

As explained in the [self-hosting Commento docs](https://docs.commento.io/installation/self-hosting/) there are multiple install options: from source, from binaries and docker. For this demo, I'm going to select docker as this works in all environments where [docker is installed](https://docs.docker.com/get-docker/):

```bash
$ docker pull registry.gitlab.com/commento/commento
```

Next, create a work directory for commento and pull the latest `docker-compose.yml`:

```bash
$ mkdir commento
$ cd commento
$ wget https://gitlab.com/commento/commento/-/raw/master/docker-compose.yml
```

As we wish to run commento on `localhost`, replace the origin with this one liner:

```bash
$ sed -i "s|http://commento.example.com:8080|http://localhost:8080|g" docker-compose.yml
```

We are now fully prepared to fire up the commento platform:

```bash
$ docker-compose up
```

As commento uses a `postgresql` database, you will notice that those docker images are fetched when starting the service. Visit `http://localhost:8080/signup` and you'll be greeted with this signup page:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-signup.png)

That was easy! With just a few commands, you now have a fully functional commento platform running on `localhost`.

### Create a local account

Fill out the form as shown above. On `localhost`, you can a use a bogus email as the email sending has been disabled. It simply serves as a login name. Upon completion, you are directly brought to the login page:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-continue-login.png)

### Login locally

Enter the same email and password and click on the login button to enter the dashboard:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-dashboard.png)

### Register your domains

Now that you are logged onto the commento platform, you need to register all domains that you want to allow to connect to the platform.

Click on New Domain, enter a random name and `http://localhost:8000` as shown below:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-endpoint.png)

Submit the form to register. I also add a second domain right away with `http://localhost:9000`, so Jamify builds are allowed as well.

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-dashboard-general.png)

Please ignore the Installation Guide as it is not relevant here. I recommend you quickly browse through the categories to get an idea what functions the platform provides.

## Configure the plugin

Now that the commento back-end is up and running on `http://localhost:8080` and has been configured with your `localhost` domain, there is only one final configuration step needed.

Go to your Jamify work directory and add the following configuration option to `gatsby-config.js`:

```javascript
// In your gatsby-config.js
plugins: [
    {
        resolve: `gatsby-theme-ghost-commento`,
        options: {
            url: `http://localhost:8080`,
        },
    },
]
```

With this option, we tell the plugin where it can find the commento back-end. That's it!

## Test Drive Comments

It's time to issue the familiar build commands `yarn clean; yarn develop` and visit your Jamify site at `http://localhost:8000`. Hover to one of the posts and scroll down to the footer:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/jamify-commento-login.png)

A new Commento comment section has been added just after the post content. Login with your previously generated account data and play around with adding some comments:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/jamify-commento-play.png)

Nice, it's working great! Take a coffee and chill!

## Deploy your Jamify site

While everything is working perfectly fine in this test scenario, you surely want to get this to work on your public Jamify site as well.

I encourage you to stick to the deployment method that you always use when you publish your Jamify sites.

I'm going to deploy to [Netlify](https://www.netlify.com/) here, as it allows me to deploy with very little effort. If you want to follow the steps shown here, make sure to have their cli-tool installed:

```bash
$ sudo npm install netlify-cli -g
```

Change to the `jamify-comments` work directory and do the login from the command line:

```bash
$ netlify login
```

This command opens a browser window and takes you to their login page. Login success is also reported on the command line. Next, build your site as usual:

```bash
$ yarn build
```

which generates all static files in your `public/` directory. The final command does the actual deploy:

```bash
$ netlify deploy --prod
```

As this is a new project, you'll need to answer a couple of questions:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/netlify-questions.png)

Note that the site name is important here, as this will determine the publicly available domain name. A successful build will show a thumbnail preview of your start page.

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/netlify-jamify-commento-success.png)

> Take note of the endpoint (in this case https://jamify-commento.netlify.app) as you need to register it on commento.io.

## Commento Managed Service

Your public Jamify site needs a public Commento back-end to connect to. The quick and easy way to do this is to use the managed service from Commento. Let's look into how this can be accomplished.

### Signup on commento.io

We start by creating an account on the [Commento platform](https://commento.io/signup). If you are planning on hosting the platform yourself, you can skip this step and move to the next chapter.

> Commento takes an unorthodox approach in registering your site, which leads to the restriction that you cannot connect to the managed service from private endpoints such as localhost. Use the local commento install for testing your local development builds.

The signup procedure should be familiar to you as we discussed it in the previous chapters. It's important to provide a working email address now. Once you are logged in, add a new domain pointing to your public blog domain. Replace the name and [`https://jamify-commento.netlify.app`](https://jamify-commento.netlify.app) with your own website domain:

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/jamify-commento-io-domain.png)

### Configure your Jamify site

As the the `https://cdn.commento.io` endpoint is the default, you can remove the options section that we added before:

```javascript
// In your gatsby-config.js
plugins: [
    {
        resolve: `gatsby-theme-ghost-commento`,
    },
]
```

As stressed earlier, it's not possible to connect to `commento.io` from a local install. Thus, stay cool whenever you see the the error message at the bottom of your posts during local development.

After changing the configuration, don't forget to build and deploy again:

```bash
$ yarn clean
$ yarn build
$ netlify deploy --prod
```

### Check Comments in Production

Everything is in place now. Visit your site on the above domain and inspect the area at the end of the post.

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/netlify-deploy-1.png)

You can now see the commenting section added. It's time to celebrate success 🎉

## Self-hosting Commento

As you already managed to install Commento on `localhost`, you can take this one step further and run the Commento platform on your own server.

> You cannot install it on Netlify, because the Commento back-end is not a static site.

I assume that you managed to install headless Ghost CMS on one of your own domains, let's say on `https://your-blog.com`, so you are familiar with server installs. If you need a refresher, check out the tutorial on [Ghost CMS on Hetzner Cloud](https://cms.jamify.org/2020/04/07/ghost-cms-on-hetzner-cloud/).

Place Commento behind a sub-domain of your main site, for example on `https://commento.your-blog.com` so you do not interfere with existing routes.

### Server install

The instructions given for the local commento install apply here as well: you need to install docker, docker-compose and the commento docker image. Configure commento the same way, so it can be reached on endpoint `http://localhost:8080`.

On a server, it's essential to start the docker-compose in detached mode:

```bash
[server]$ cd commento
[server]$ docker-compose up -d
```

Unfortunately, this will not survive a server restart. To make your service persistent, place it in a `systemd` unit. Use this [systemd template](https://github.com/MiGoller/dc-systemd-template#creating-docker-compose-powered-services-using-systemd-templates) so that you can enable and start your service as follows:

```bash
$ sudo systemctl enable dc@commento.service
$ sudo systemctl start dc@commento.service
```

### Reverse proxy

You need a proxy to route from `https://commento.your-blog.com` to your commento service endpoint at `http://localhost:8080`. I use `nginx` as a reverse proxy with a configuration similar to:

```text
// Place in /etc/nginx/conf.d/commento.conf
server {

  listen 443 ssl http2;
  listen [::]:443 ssl http2;

  server_name commento.your-blog.com;

  ssl_certificate /etc/letsencrypt/live/your-blog.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/your-blog.com/privkey.pem;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://127.0.0.1:8080;
  }

}
```

SSL certificates are generated with [Let's Encrypt](https://letsencrypt.org/) as is evident from the configuration file above.

Once `/etc/nginx/conf.d/commento.conf` is created, `nginx` must be reloaded with `sudo systemctl restart nginx` for the changes to take effect. Your firewall must be configured to allow outgoing and incoming tcp traffic on port `443`.

At this point everything should be up and running. After visiting Commento on the new public address `https://commento.your-blog.com` you should be greeted with the login page. Create an account as described earlier and register your public blog domain, which is `https://jamify-commento.netlify.app` in this demo example.

### Configure your Jamify site

The `gatsby-theme-ghost-commento` plugin needs to be told the new self-hosted commento endpoint:

```javascript
// In your gatsby-config.js
plugins: [
    {
        resolve: `gatsby-theme-ghost-commento`,
        options: {
            url: `https://commento.your-blog.com`,
        },
    },
]
```

Rebuild and deploy your site:

```bash
$ yarn clean
$ yarn build
$ netlify deploy --prod
```

### Final Result

Everything looks exactly as before 😊, but with a substantial difference. Now, Commento is served from your self-hosted platform!

![Add comments with Commento](https://cms.jamify.org/content/images/2020/04/commento-self-hosted.png)

## Other commenting systems

There is a large number of different external commenting systems that can be integrated with React static sites.

### Disqus

The most widely used external commenting system is [Disqus](https://disqus.com). We don't endorse this system here, because it is not GDPR compliant and monetizes on injected advertisements and tracking which many users find annoying.

> Note that Commento has an import functionality where you can easily import all your comments from Discus.

If Disqus is still your choice, the Gatsby docs on [Adding Comments](https://www.gatsbyjs.org/docs/adding-comments/) are a good starting point for integrating this system into your Jamify site.

### TalkYard

A viable alternative to Commento is [TalkYard](https://www.talkyard.io). It's open source, refrains from ads and tracking and looks cool. It's more than a commenting system and can be upscaled to full Forum use.

If that is your intend, it may be a good fit for you. It's main drawback is that it's not particularly lightweight and thus very memory consuming on your servers.

### Staticman

Specifically targeted towards static sites, [StaticMan](https://staticman.net/) is a commenting system to keep an eye on. Staticman's biggest plus is that it does not inject a javascript applet and fully preserves all static site benefits.

The drawback of this system is that it triggers lots of site rebuilds. As builds take at least a couple of minutes to complete, I'm a bit scared about every comment sending a new trigger.

I'd be more comfortable with a combination of this approach (rebuilding once a day) with the javascript applet approach (for immediate comment interaction). There must be a clever way to combine the benefits of the different strategies.

### Need more options?

If you search for even more alternatives, you'll come across [Facebook Comments](https://www.npmjs.com/package/react-facebook), [Discourse](https://www.discourse.org/), [NodeBB](https://nodebb.org/) and [Gitalk](https://gitalk.github.io) that all come with their own pitch. Another good source is this blog post on [privacy focused commenting systems](https://techroads.org/comparing-blog-comment-systems-with-privacy-features/).

## Summary

Well done 👏 You managed to add Commento to your Jamify site and learned how to set up and communicate with a local Commento back-end. You were given an example on how to make your Jamify site available on a public URL and connect to the managed service at commento.io.

Going one step further, you were introduced to moving the Commento platform onto a public server, effectively self-hosting the Commento back-end. Although I made the case for Commento here, I recognize that you may want to choose another commenting system. Use the discussion on alternative systems as an entry point for further investigations.

> [Do you want early access to Blogody, the brand new blogging platform that I am creating? Just sign-up on the new Blogody landing page and be among the first to get notified!](https://www.blogody.com/landing)

***

This post was originally published at [jamify.org](https://www.jamify.org/2020/05/12/add-comments-with-commento/) on May 12, 2020.