index.en.md

+++ date = "2021-06-19" title = "Great things with containers: Remark42 is my comment solution" difficulty = "level-1" tags = ["microservice", "docker", "vertical", "kommentare"] githublink = "https://github.com/terrorist-squad/knedelverse/blob/master/content/post/2021/june/20210619-docker-remark42/index.en.md" +++ If you run your blog as a static site, you might want a microservice/vertical that puts a dynamic comment function. For example, this blog is implemented in HUGO, a "website generator" written in GO for Markdown content.In my case, I customized this Docker compose file for me and started it with "docker-compose -f compose.yml up -d". I have stored API keys for authentication with Google and Facebook. I also entered mail server settings for interaction with readers.

version: '2'

services:
    remark:

        image: umputun/remark42:latest
        container_name: "remark42"
        restart: always

        logging:
          driver: json-file
          options:
              max-size: "10m"
              max-file: "5"

        ports:
          - "8050:8080"   

        environment:
            - REMARK_URL=https://www.christian-knedel.de/comments/ 
            - "SECRET=secret"          
            - SITE=www.adresse.de 
            - STORE_BOLT_PATH=/srv/var/db
            - BACKUP_PATH=/srv/var/backup

        volumes:
            - ./data:/srv/var

After configuration, the service is ready for use and can be integrated into the website:

<script>
  var remark_config = {
    host: "https://www.christian-knedel.de/comments", 
    site_id: 'www.christian-knedel.de',
    components: ['embed'], 
    max_shown_comments: 10,
    theme: 'dark',
    locale: 'de',
    show_email_subscription: false
  };
</script>
<script>
  (function(c) {
    for(var i = 0; i < c.length; i++){
      var d = document, s = d.createElement('script');
      s.src = remark_config.host + '/web/' +c[i] +'.js';
      s.defer = true;
      (d.head || d.body).appendChild(s);
    }
  })(remark_config.components || ['embed']);
</script>

<br>
<hr>
<br>
<div id="remark42"></div>

And this is what Remark42 looks like: {{< gallery match="images/1/*.png" >}}