Blog Comments with Matrix Using Cactus Comments

· 297 words · 2 minute read

I’m not sure if comments improve blogs, but I’m willing to try. But my blog is a static site and I don’t like the idea of forcing Disqus on readers of my blog. Luckily there exists a project built on matrix for adding comments to your site.

One option is to use Cactus Comments with the matrix home server the project hosts for free, as explained in the quick start guide. But since I already run a matrix server, I figured I could use that as the backend for the comments.

My matrix server is set up using the excellent matrix-docker-ansible-deploy project, but it doesn’t support cactus comments directly (yet). So I had to figure out how to make the two play nice together. I’m not the only one that wants to do that, so there were some pointers. I had to add the following to the ansible vars of the server:

matrix_synapse_allow_guest_access: true
matrix_synapse_container_extra_arguments:
  - '--mount type=bind,src=/srv/cactus/conf/registration.yaml,dst=/cactus.yaml,ro'
matrix_synapse_app_service_config_files:
  - '/cactus.yaml'

I also had to write a registration.yaml file as described in cactus' docs and configure cactus using the environment:

CACTUS_AS_TOKEN=# same as in registration.yaml
CACTUS_HS_TOKEN=# same as in registration.yaml
CACTUS_HOMESERVER_URL=http://matrix-synapse:8008
CACTUS_USER_ID=@cactusbot:totterman.name
CACTUS_REGISTRATION_REGEX=@paul.totterman.name

Let systemd run it:

[Unit]
Description=Cactus comments
Requires=docker.service
After=docker.service

[Service]
Restart=on-failure
ExecStartPre=-docker kill cactus
ExecStartPre=-docker rm cactus
ExecStop=-docker stop cactus
ExecStart=docker run \
--rm \
--name cactus \
--network matrix \
--env-file /srv/cactus/conf/env \
cactus:latest

[Install]
WantedBy=multi-user.target

Then I had to add the client code in my blog template:

{{ if or (and .Site.Params.enableComments (ne .Params.enableComments false)) (eq .Params.enableComments true) }}
  <div id="comment"></div>
  <script>
document.addEventListener('DOMContentLoaded', () => {
  initComments({
    node: document.getElementById('comment'),
    defaultHomeserverUrl: 'https://matrix.totterman.name',
    serverName: 'totterman.name',
    siteName: 'paul-totterman-name',
    commentSectionId: '{{.File.ContentBaseName}}',
  });
});
  </script>
{{ end }}

You should now be able to see a comment box after this blog article, when viewing it on the web.