静态网站部署 Remark42 留言板

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

安装 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

将域名 domian.com 解析到服务器后，安装 apache2。

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

按 i 进入编辑模式，并输入

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

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

1
2
a2ensite remark.conf
systemctl reload apache2

安装 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 端口

通过 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 的后端界面。

前端配置，在站点相应的位置，例如 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 配置见本站源代码。