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.

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 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 is currently the best fit for Jamify sites.

We choose it mainly for the following reasons:

• It's open source 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 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:

$ 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 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:

// 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:

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 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:

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

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

$ 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:

$ 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:

$ 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:

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:

Login locally

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

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:

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

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:

// 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:

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:

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 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:

$ sudo npm install netlify-cli -g

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

$ 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:

$ yarn build

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

$ netlify deploy --prod

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

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.

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. 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 with your own website domain:

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:

// 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:

$ 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.

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.

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:

[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 so that you can enable and start your service as follows:

$ 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:

// 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 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:

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

Rebuild and deploy your site:

$ 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!

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. 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 are a good starting point for integrating this system into your Jamify site.

TalkYard

A viable alternative to Commento is TalkYard. 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 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, Discourse, NodeBB and Gitalk that all come with their own pitch. Another good source is this blog post on privacy focused commenting systems.

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!

This post was originally published at jamify.org on May 12, 2020.