Adding Commento++ To Your Blog

Some blogs (like this one) are primarily intended to provide assistance and guidance to those who need it. Other blogs may be people's thoughts and ramblings, poetry or content they've created, or any number of other things.

What they all have in common though is community, and one of the best ways to show appreciation, give feedback or make requests is via a comments section. This tutorial will help you introduce your own, fully controlled, fully self-hosted comments section called Commento. It allows for anonymous comments which can be moderated, signups for repeat users, and the latest version allows users to delete both their comments and their own user, rather than having to rely on an admin to do it.

Prerequisites

1. You need to have Docker and docker-compose installed on your machine
2. You need to be able to SSH into your machine, or use CLI/terminal
3. You should have your own self-hosted blog already up and running (I use Ghost) accessible at an URL such as https://myblog.my.domain
4. You should have your own domain name with a fully functioning reverse proxy (check out my SWAG article, and I recommend Cloudflare as an incredibly feature-packed, not to mention free CDN)
5. A proxy docker network (either called proxy or something else, this is the network you use for your reverse proxy/SWAG container to communicate with the services it acts as RP for)

Let's get started.

Set up your CDN and reverse proxy configuration

We're going to do this first, as it will save us some confusion later on.

• Access your CDN's DNS page, and create a new A or CNAME record for commento.YOUR.DOMAIN (i.e. for me, it is commento.pointtosource.com)
• Access your reverse proxy's configuration page/files and create a new entry that points commento.your.domain to port 8080. If you're using SWAG or another nginx non-gui method, your proxy.conf file would look something like this:

## Version 2021/04/17
# make sure that your dns has a cname set for commento and that your commento config is not using a subdirectory.

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name commento.*;

    include /config/nginx/ssl.conf;

    client_max_body_size 0;

    #enable for ldap auth, fill in ldap details in ldap.conf
    #include /config/nginx/ldap.conf;

    # enable for Authelia
    #include /config/nginx/authelia-server.conf;

    location / {
        #enable the next two lines for http auth
        #auth_basic "Restricted";
        #auth_basic_user_file /config/nginx/.htpasswd;

        #enable the next two lines for ldap auth
        #auth_request /auth;
        #error_page 401 =200 /ldaplogin;

        # enable for Authelia
        #include /config/nginx/authelia-location.conf;

        include /config/nginx/proxy.conf;
        include /config/nginx/resolver.conf;
        set $upstream_app commento;
        set $upstream_port 8080;
        set $upstream_proto http;
        proxy_pass $upstream_proto://$upstream_app:$upstream_port;

    }
}

note that the above is reliant on the commento front end being on the same docker network as your proxy service, as per the prerequisites listed above, and shown in the docker-compose.yml file below

Creating the Commento++ container

I initially heard about Commento when I came across another walkthrough for Commento++. When I followed it, it unfortunately didn't work due to an issue with the latest postgres image using an authentication hash which the frontend Commento app hadn't caught up with yet. The below solves that issue.

Creating your Commento file system

• Using whatever method you prefer, navigate to your docker or compose directory, and create a commento folder
• Inside the commento folder, create another called db
• Inside your commento folder, create two files, one called docker-compose.yml and one called .env

if you're doing all of this from terminal/CLI, then once you've navigated to your docker directory, you can copy paste the following:

mkdir commento && cd commento && mkdir db && touch docker-compose.yml && touch .env

Populating the docker-compose.yml and .env files

• Open/edit the compose.yml file and paste in the following

### NETWORKS ###
networks:
  commento:
    name: commento
    ipam:
      config:
        - subnet: 172.XX.0.0/29 #change 'XX' to your preferred subnet
  proxy:
    external: true

### SERVICEs ###
services:
  commento:
    container_name: commento
    image: caroga/commentoplusplus:v1.8.6
    restart: unless-stopped
    ports:
      - 8080:8080 #change before the `:` if necessary
    networks:
      - commento
      - proxy
    security_opt:
      - no-new-privileges:true
    environment:
      - COMMENTO_ORIGIN=https://commento.$DOMAINNAME
      - COMMENTO_PORT=8080 #DO NOT CHANGE THIS EVEN IF YOU CHANGE THE MAPPED PORT ABOVE
      - COMMENTO_POSTGRES=postgres://$DBUSER:[email protected]:5432/$DB?sslmode=disable
      - COMMENTO_GZIP_STATIC=true
      #- COMMENTO_FORBID_NEW_OWNERS=true # enable this after your own registration
      
#IF YOU WANT TO SET UP YOUR SMTP FOR EMAIL NOTIFICATIONS, UNCOMMENT THE FOLLOWING AND MODIFY THE .env
      #- COMMENTO_SMTP_HOST=$SMTPHOST
      #- COMMENTO_SMTP_PORT=$SMTPPORT
      #- COMMENTO_SMTP_USERNAME=$SMTPUSER
      #- COMMENTO_SMTP_PASSWORD=$SMTPPW
      #- COMMENTO_SMTP_FROM_ADDRESS=$SMTPUSER
    volumes:
      - $LOCALTIME
    depends_on:
      - commento-db
  
  commento-db:
    container_name: commento-db
    image: postgres:12.5-alpine
    restart: unless-stopped
    networks:
      - commento
    security_opt:
      - no-new-privileges:true
    environment:
      - POSTGRES_DB=$DB
      - POSTGRES_USER=$DBUSER
      - POSTGRES_PASSWORD=$DBPW
    volumes:
      - ./db:/var/lib/postgresql/data
      - $LOCALTIME

• Make sure you change (or do not change) the lines where it says change is necessary
• Save the file
• Note that we are using this docker-compose file to create a new network called commento, and that we are also relying on a previously created proxy network. We are doing it in this way so that the db and front end can communicate, but we are stopping the db from having direct access to the outside world

• Open/edit your .env file and copy paste the following:

DBUSER=
DBPW=
DB=
DOMAINNAME=
LOCALTIME=/etc/localtime:/etc/localtime:ro

#uncomment the following lines and complete if you are setting up your smtp credentials
#SMTPHOST=
#SMTPUSER=
#SMTPPW=
#SMTPPORT=

• Complete each line of the .env by adding your preferred information after the = symbol without any spaces (e.g. DBUSER=pointtosource)
• Make sure that your DOMAINNAME is your root domain without any https e.g. pointtosource.com
• Save the file

• Once you've completed the above, it's time to run the following command to spin up your containers:

docker-compose -p "commento" up -d

• After a few minutes, check out the logs for the db and the front end, and you should see that the db is ready to accept connections, and that the front end has in fact connected already
• Provided we've done everything correctly, we should be able to now access our commento instance at https://commento.your.domain

we can also access the container at http://yourmachineIP:8080, however note that this will automatically redirect to https://commento.your.domain

Setting up your Commento++ admin

When you access your commento instance, you should be presented with the following screen:

• Click the Signup button at the top, and enter your credentials as you want them
• Once you have done this, we now need to recreate the container
• Access your docker compose file again, and uncomment the line COMMENTO_FORBID_NEW_OWNERS=true
• Save the file
• Back in your terminal window, copy and paste the following to recreate the container, taking the change we just made into effect:

docker-compose -p "commento" up -d commento

what we have just done is remove the ability for new admin users to be created by signing up. It does not stop other regular users for signing up

• Go back to your commento page in the browser and hit 'refresh' (you may need to log in again)
• The screen should look a little like this, but without the 'Academy' site on the left:

• Click the + New Domain button, and fill out the name and URL of the site you want to add commento to

Once you click ADD DOMAIN you'll be through to the main part of commento, which gives you a number of admin settings you can configure, as well as showing you the html snippet to add to your site's code, which is what allows you and others to leave comments on your articles/blog posts:

• Head over to your blog's html page and paste in the universal snippet where you'd like the comment to appear. I like them at the bottom, so that's where I pasted the snippet
• Go through the rest of the settings and make choose your preferences (don't forget to hit the SAVE CHANGES button before you change screens)

From now on, when you or anyone else accesses your blog or site, your comment section should appear, ready for you and them to log in or leave anonymous content.

A note on styling your Commento for your site

You'll notice in the screenshot immediately above that it directs you to a configuration page for further reading, which includes a section about using custom css overrides:

Personally, I didn't want to create a whole stylesheet, it's not really what I do, nor is it something I can do quickly (I'm not great at this coding stuff).

I bashed into the container, and was able to find that there was a directory called /commento/css, inside which is a stylesheet called commento.css.

This was great. I tried to nano and I tried to vim, but they don't exist in the container. Nor does apt, so you can't add them.

Next I tried to map the css folder to my machine, by adding the volume variable - /commento/css:/commento/css (after having created the right folders first). The mapping was successful, but there must be a permissions something or other going on, as the folder on my machine was empty. When I bashed back into the container, the css folder was empty there too. I removed the volume mapping and recreated the container, and the .css files returned. Ok.

Final try, I decided to map the container using a volumes: block to create the folder within the docker file system (on a Synology this is created in the /volume1/@docker/volumes folder. I did this by adding the following to the commento compose file:

service:
  commento:
    volumes:
      - css:/commento/css

volumes:
  css:

This created a volume called commento_css.

By typing nano /volume1/@docker/volumes/commento_css/_data/commento.css into my CLI as the root user (I did a couple ls commands in those folders to find my way) I was then able to modify the specific styles I wanted to, rather than creating a whole style sheet. In case you're wondering, I changed the text box background from white to black.

Worth it.

Related Articles

Tips and tricks for those who self-host Ghost Blog

Coding tips and tricks to get the most out of your ghost theme, using CSS, scripts and the built-in handlebars language of ghost

Academy @ PointToSourcePTS

Swag, Authelia and Reverse Proxies

A step-by-step walkthrough to self-host your Reverse Proxy with SWAG, and providing SSO and 2FA security using Authelia, all in docker

Academy @ PointToSourcePTS

Local DNS to serve your apps via URL instead of IP

Tired of remembering a raft of port numbers to access your service GUIs? Here’s a way to access them all using easier-to-remember URLs

Academy @ PointToSourcePTS