静态网站部署 Remark42 留言板

陈华 ⋅ 2023-02-03

过去尝试了个诸多评论系统,各有各的优缺点:Disqus 广为流行但网络受限;来必力速度太慢,不合心意;Valine 前端惊艳,后台糟心;Utterances 简单易用,但受限于 GitHub 用户。偶然间发现了 Remark42 评论引擎,它具有自托管、易部署和迁移的特点。本文介绍在 Ubuntu 18.04 LTS 服务器通过 docker 搭建 Remark42 评论引擎,在 Apache 设置反向代理绑定域名作为后台,最后为 Hugo 进行必要的前端配置。

  1. 安装 docker,详情见官方文档。Ubuntun 服务器的安装设置如下:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    
    sudo su # 管理员模式
    apt update
    apt install ca-certificates curl gnupg lsb-release
    # 添加官方 GPG 密钥
    mkdir -p /etc/apt/keyrings
    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
    # 建立仓库
    echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
    # 安装 docker engine
    apt update
    apt install docker-ce docker-ce-cli containerd.io docker-compose-plugin
    

    安装 docker-compose

    1
    
    apt install docker-compose
    

    启动 docker 并设置

    1
    2
    
    systemctl statr docker
    systemctl enable docker
    
  2. 将域名 domian.com 解析到服务器后,安装 apache2。

    1
    2
    3
    4
    5
    6
    7
    8
    
    # 安装 apache2
    apt install -y apache2
    # 启用 ssl 和反向代理模块
    a2enmod rewrite headers env dir mime ssl proxy proxy_balancer proxy_http
    # 重启 Apache 服务
    systemctl restart apache2
    # 创建文件名为 remark 的配置文件
    vim /etc/apache2/sites-available/remark.conf
    

    i 进入编辑模式,并输入

    1
    2
    3
    
    <VirtualHost *:80>
    ServerName domain.com
    </VirtualHost>
    

    Esc 退出编辑,输入 :wq 回车保存、退出。

    1
    2
    
    a2ensite remark.conf
    systemctl reload apache2
    
  3. 安装 Letscrypt 生成 SSL 证书并设置反向代理。最佳方式参考官方文档。但官方是通过 snap 安装,国内没有 snap 源镜像,因此可能无法下载。因此使用较老的安装方式

    1
    2
    3
    
    apt install certbot python3-certbot-apache # 安装 certbot
    certbot --apache -d domian.com # 其中一个选项选择 2 redirect,实现 http 到 https 跳转
    vim /etc/apache2/sites-available/remark-le-ssl.conf # 打开生成的 ssl 配置文件
    

    </VirtualHost> 前输入以下内容,实现反向代理(以下端口设置为 8080,可自行更改)

    1
    2
    3
    4
    5
    6
    7
    8
    
    ProxyPreserveHost On
    ProxyRequests Off
    <Proxy *>
        Order allow,deny
        Allow from all
    </Proxy>
    ProxyPass / http://localhost:8080/
    ProxyPassReverse / http://localhost:8080/
    

    防火墙打开对应端口

    1
    2
    
    ufw allow 8080
    ufw status #查看端口,确保打开了 80 和 443 端口
    
  4. 通过 docker 部署 Remark42 服务。以官方文档为准,非常详细!

    1
    2
    3
    
    mkdir remark42 # 新建 remark42 文件夹
    cd remark42
    vim docker-compose.yml
    

    配置如下

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    
    version: '2'
    
    services:
      remark42:
        image: umputun/remark42:latest
        restart: always
        container_name: "remark42" # 容器名
    
        ports:
         - "8080:8080" # 冒号左边的端口需要与上述设置一致
        #  - "443:443"
    
        environment:
          - REMARK_URL=https://domain.com # Remark42 服务器网址,对应上述绑定的域名
          - SITE=站点id # 将与前端 site_id 一致,也作为数据库名
          - SECRET= # 密钥
          - AUTH_ANON=false # 匿名评论
          - EMOJI=true # 表情
          - AUTH_EMAIL_ENABLE=true # 通过邮箱登录评论
          - AUTH_EMAIL_FROM= # 负责发送 tokens 认证的邮箱地址
          - SMTP_HOST=smtp.mxhichina.com # smtp 服务器提供者
          - SMTP_PORT=465 # smtp 端口
          - SMTP_USERNAME= # 负责发送 tokens 认证的邮箱地址
          - SMTP_PASSWORD= # 邮箱密码或授权码
          - SMTP_TLS=true
          - StartTLS=true
          - NOTIFY_USERS=email # 通过 email 或 telegram 方式通知用户
          - NOTIFY_ADMINS=email # 通过 email 或 telegram 方式通知管理员
          - NOTIFY_EMAIL_FROM= # 负责发送评论通知的邮箱地址
          - ADMIN_SHARED_EMAIL= # 管理员接收评论通知的邮箱地址
          - AUTH_EMAIL_SUBJ=验证你的邮箱并获得token  # 自定义邮件通知信息
          - ADMIN_SHARED_ID= # 设置管理员账号。登录评论框后点击头像,出现侧边页,将名字下一长串灰色代码复制过来。用逗号隔开多个管理员账号
          - NOTIFY_EMAIL_VERIFICATION_SUBJ=Email verification #邮件认证说明
          - VOTES_IP=true # 投票 IP 限制
          - ANON_VOTE=true # 匿名投票,需要同时启用 VOTES_IP
          - ADMIN_EDIT=true # unlimited edit for admins
          # Enable it only for the initial comment import or for manual backups.
          # Do not leave the server running with the ADMIN_PASSWD set if you don't have an intention
          # to keep creating backups manually!
          #- ADMIN_PASSWD=
          - IMAGE_PROXY_HTTP2HTTPS=true # 为图片评论设置 SSL 链接 
          # 谷歌和 GitHub 授权登录设置见官网 https://remark42.com/docs/configuration/authorization/
          #- AUTH_GOOGLE_CID=
          #- AUTH_GOOGLE_CSEC=
          #- AUTH_GITHUB_CID=
          #- AUTH_GITHUB_CSEC=
        volumes:
          - ./var:/srv/var # 数据存放在 /remark/var/ 目录下
    
        labels: # 反向代理
          reproxy.server: domain.com # 与上述绑定的域名一致
          reproxy.port: "8080"
          reproxy.route: "^/(.*)"
          reproxy.dest: "/$$1"
          reproxy.ping: "/ping"
    

    拉取 docker 镜像,创建和后台运行容器

    1
    
    docker-compose pull && docker-compose up -d
    

    打开 https://domain.com/web/ 应能看到 Remark42 的后端界面。

  5. 前端配置,在站点相应的位置,例如 footor 中添加

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    <script>
      var remark_config = {
        host: xxx, //与上述的 REMARK_URL 一致
        site_id: xxx, // 与上述的 SITE 一致
        components: ['embed'],
        // url: {{ .Permalink }}, // Hugo 的当前页链接
        max_shown_comments: 20, // 留言展示数目
        locale: 'zh', // 界面语言
        no_footer: 'true' //是否在页脚链接(指向 remark42 官网)
      };
      (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>
    

    在需要显示评论框的位置插入<div id="remark42"></div>。因为本站仅需要在文章页面启用留言板,因此在 Hugo 配置文件 layout/single.html 中添加上述代码。更详细的 Hugo 配置见本站源代码