How to setup Comments using Commento on Docker Compose

Overview

Setup commento.io to add comments to your ghost blog for free on your own self-hosted docker-compose VPS without ads or any cookie tracking.

Before you begin

Here's a bit of an overview of what we're building on to host comments:

Configuring Docker Compose

Having deployed your Ghost blog with Docker compose in the previous episodes of this series, lets add the ability for users to interact with you directly - One of the best parts of a Blog. There are number of paid commenting platforms that you could potentially leverage but if your looking for a pure lightweight platform with a modern and clean design then Commento is a great option to explore.

In order for Commento operate we need two containers one to house Commento itself and one to cover off the postgres database that's used to store all the persistent data such as comments and accounts.  

Folder Structure

First off, lets setup the folder structure - we need a new folder, which I'm going to call 'alexgallachercomments'

• The .env file contains variables used for Commento

Create the required folder structure using the following commands:

mkdir alexgallachercomments
cd alexgallachercomments

Just a note - you can change the folder name to either match your website name or whatever you want!

Defining the services with Docker-Compose

Once you've created all the required folders lets jump straight and create our docker-compose.yml file that will allow us to define the two services we want to spin up:

nano docker-compose.yml

version: '3'
services:
  alexgallachercommento:
    image: registry.gitlab.com/commento/commento
    restart: unless-stopped
    container_name: alexgallachercommento
    expose:
      - "80"
    depends_on:
      - alexgallacherpostgresdb
    env_file:
      - .env

  alexgallacherpostgresdb:
    image: postgres:${POSTGRES_TAG}
    container_name: alexgallacherpostgresdb
    restart: always
    environment:
      POSTGRES_DB: commento
      POSTGRES_USER: RANDOMUSERNAME
      POSTGRES_PASSWORD: RANDOMPASSWORD
    volumes:
      - /home/akg/alexgallacher/commento/postgresdata:/var/lib/postgresql/data

networks:
  default:
    external:
      name: nginx-proxy

let's break down this down a bit to understand what we're defining:

• We're defining two docker containers one to house Commento the other houses the Postgres database
• We're using two images: "commento" and "postgres"
• The volume attached to the postgresdb ensures data is stored persistently for the container on the host - note you'll need to update the first half of this to reflect a location on your VPS
• I've updated the name of the containers to alexgallachercommento and alexgallacherpostgresdb just so it's easier for me to keep track of when you list all of the running docker images
• I'm exposing port 80 on the commento container which is the port that this docker image will communicate on with the host.
• I'm specifying an environment file env_file - .env which contains information that both containers will use to spin up such as postgres connection details for commento and SMTP settings for people to receive emails.
• We're attaching the docker container to the proxy network so it can talk to the reverse-proxy. This will make commento accessible to the web.

Setup the Docker-Compose .env file

Making sure you're in the same alexgallachercomments folder let's setup the .env file.

COMMENTO_ORIGIN=https://commento.alexgallacher.com
COMMENTO_PORT=8080
COMMENTO_POSTGRES=postgres://username:[email protected]:5432/commento?sslmode=disable
COMMENTO_FORBID_NEW_OWNERS=false (SET TO TRUE WHEN FIRST SIGN UP COMPLETE)
COMMENTO_SMTP_USERNAME=SMTP_USERNAME
COMMENTO_SMTP_PASSWORD=SMTP_PASSWORD
COMMENTO_SMTP_HOST=smtp.mailgun.org
COMMENTO_SMTP_PORT=587
COMMENTO_SMTP_FROM_ADDRESS=ADDRESS_TO_SEND_FROM
VIRTUAL_HOST=commento.alexgallacher.com
VIRTUAL_PORT=8080
LETSENCRYPT_HOST=commento.alexgallacher.com
[email protected]
POSTGRES_TAG=latest

let's break down this down a bit to understand what we're defining:

• The VIRTUAL_HOST & VIRTUAL_PORT specifies to the reverse-proxy that we want to setup this docker-image with the domain of commento.alexgallacher.com When someone hit's the url of https://commento.alexgallacher.com the reverse-proxy will know to forward the request to this container over port 80. This is port 80 and not 443 as our SSL demarcation point is handled by the reverse-proxy container at the edge of the VPS.
• The LETSENCRPYT_HOST & LETSENCRYPT_EMAIL values are used for the reverse-proxy to register a ssl certificate against the https:// commento.alexgallacher.com url and against my registered email address.
• COMMENTO_SMTP_* is everything to do with sending emails from the commenting system (think new comment, comment ready for review). This is not covered in this post.
• COMMENTO_POSTGRES defines everything to do with connecting to the postgres database we setup in the container

Setup Cloudflare

The DNS setup is relatively straight forward. You'll need to point the url that you defined, in my case this is commento.alexgallacher.com to the IP address of your VPS with the use of an A record.

It's worth noting DNS changes are typically fast to update with Cloudflare but have been known to take some time. If the website is not resolving I would suggest pouring a ☕ and coming back to it a bit later once you've fired up the docker image below👇

Firing up the Docker image

Alright, we're almost done. Let's spin up the docker image by using the following command in the alexgallachercommento folder:

docker-compose up

If you wish to run the image in detached mode once everything is setup and running, simply append -d to the end of the command:

docker-compose up -d

You'll need to wait a minute or two as Docker will download the two containers we've specified. Once the container has spun up the revere-proxy will detect that a new docker container has started and will attempt to register a SSL certificate for the container and will refresh its self to start forwarding traffic.

Configure Commento

Setting up your owner account on Commento

Now that we've got it working let's browse to the commento.alexgallacher website and create your own account.

Once you've setup your account you must make sure you stop the container with the following command and set COMMENTO_FORBID_NEW_OWNERS in your .env file to TRUE to ensure no one else can sign up as the owner of the installation!

docker-compose down

Browse to your comments website mine is commento.alexgallacher.com and setup a new domain:

Embedding comments in Ghost

Once you've finished setting up your domain on Commento and worked your way through some of the settings such as who you want to allow to comment on your website, lets embed the universal code snippet to your website.

1) Browse to the installation Guide and copy the HTML code.

2) Browse to your ghost blog and create a new post. You'll want to hit the big + sign and add a HTML code card. Paste the universal snippet from Commento into this card and publish the page.

3) Once this page has been published you should be able to browse to it and see the comments wherever you inserted the HTML card into the post.

Conclusion

When you reload your website it will call the script to populate the commento comments block within the page.