更新

  • 2019/11/01 增加服务自启配置
  • 2019/08/07 增加邮件通知配置
  • 2019/08/04 初次发布

介绍

由于目前使用的 Disqus 在国内很多地区无法访问,而且体积大加载速度慢,因此准备自行搭建一个评论系统。

Hugo 的文档评论页面 Comments | Hugo 介绍了几个评论系统。

搜索时又找到了一个非常好的比较网站 Open-source comments,将各种条件都列出来,形成一个表格,可以按照任意要求排序,使用非常方便。

出于部署简单的考虑,因此主要选择使用 Go 语言开发的系统,然后在 Remark42 与 Commento 之间选择,看起来 Remark42 不错,但是安装部署过程看起来非常麻烦,而且没有搜索到其他人搭建的教程,因此最终选择使用 Commento。

搜索到两篇安装 Commento 的文章:

Commento 一个开源,轻量级和无跟踪评论引擎。

环境

  • Commento 1.7.0
  • CentOS 7.6.1810
  • Docker 19.03.1

准备

操作系统

刚开始的时候 CentOS 是 7.1.1503,并未升级,但是发现使用 curl 安装 Docker Compose 时会报 curl: (35) Peer reports incompatible or unsupported protocol version. 错误,手动升级 sudo yum upgrade curl 后就可以了。

不确定其他包是否还会有各种兼容性问题,因此直接使用 sudo yum upgrade 将系统升级到最新版本 7.6.1810。

升级前建议评估当前安装的软件是否会存在兼容性问题,如果只是托管一个网站,只安装了 nginx 那么可以直接升。

域名

建议添加一个 Commento 专用的 commento.yourdomain.com A 记录,直接去域名控制面板添加即可。

安装

安装 Docker

直接按照官方教程走即可:

需要使用 root 用户登录后安装,使用官方的源安装较为方便:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# Docker
$ sudo yum install -y yum-utils \
  device-mapper-persistent-data \
  lvm2
$ sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
$ sudo yum install docker-ce docker-ce-cli containerd.io
$ sudo systemctl start docker
$ sudo systemctl enable docker

# Docker Compose
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
$ docker-compose --version
docker-compose version 1.24.1, build 1110ad01

注意:需要设置 Docker 自启动,否则主机维护时重启使用 Docker 安装的服务不会自动启动。

安装 Commento

按照官方文档 Using Docker · Commento 使用 Docker 安装。

首先下载 docker-compose.yml · master · Commento / Commento · GitLab,然后修改 COMMENTO_ORIGIN 环境变量的地址为刚才添加的 A 记录,端口不需要修改。

1
2
3
4
mkdir commento
scp ~/Downloads/docker-compose.yaml vps:~/commento
cd commento
docker-compose up -d

注意:这里官方文档中使用 $ docker-compose up -f /path/to/docker-compose.yml 启动是错误的,Docker Compose 不会报任何错误,只会输出帮助信息后退出了,而且返回值是 1。必须先 cd 到 docker-compose.yml 所在的目录再执行 docker-compose up -d

这时可以使用刚才创建的 A 记录加端口 http://commento.yourdomain.com:8080 访问测试。如果能看到登录页则证明安装成功。

端口转发

由于容器使用的是 8080 端口,想要使用 1024 以下端口必须使用 root 用户启动进程,因此这里使用之前安装的 nginx 配置端口转发即可:

vi /etc/nginx/conf.d/commento.yourdomain.com.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
server{
   listen 80;
   server_name commento.yourdomain.com;

   access_log /home/commento.yourdomain.com/access.log;
   error_log /home/commento.yourdomain.com/error.log;

   location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
}

portforwarding - Unable to forward port 80 to 8080 using NGINX - Stack Overflow

HTTPS 证书

nginx

参考 Let’s Encrypt 官方文档 Certbot - Centosrhel7 Nginx 安装 certbot 用来安装证书:

1
2
3
4
5
yum install epel-release
yum -y install yum-utils
yum-config-manager --enable rhui-REGION-rhel-server-extras rhui-REGION-rhel-server-optional
sudo yum install certbot python2-certbot-nginx
sudo certbot --nginx

在安装证书过程中建议选择 HTTP 强制跳转到 HTTPS

地址协议

修改 docker-compose.yml 中的 COMMENTO_ORIGIN 协议为 https

配置

创建账号配置网站

经过端口转发和 HTTPS 配置后,可以使用 https://commento.yourdomain.com 访问 Commento 了。

然后创建账号,登录后添加网站。添加网站时为避免出错,可以从浏览器地址栏直接拷贝内容,必须包含域名与端口信息。

注意:网站地址必须包含端口,80 与 443 除外,否则评论区域会出现 This domain is not registered with Commento. 错误。

关闭管理员账号注册

管理员账号可以创建新的评论网站,因此要关闭注册功能。

打开 docker-compose.yml 文件,在 COMMENTO_ORIGIN 行上面添加 COMMENTO_FORBID_NEW_OWNERS: "true"

1
2
environment:
  COMMENTO_FORBID_NEW_OWNERS: "true"

然后在服务器上执行

1
2
docker-compose stop
docker-compose up -d

检查验证,浏览器可以新建一个无痕窗口,然后访问 Commento 并创建账号,在最后点击 Sign Up 时网页中会提示 New user registrations are forbidden and closed.,这样证明正确配置了。

注意:这里关闭的是管理员账号注册,而不是普通评论账号注册。

邮件通知配置

密码

这里使用的是 Gmail,其他邮箱配置方法类似:

  1. 打开 IMAP,以便使用 SMTP 发送邮件 - 使用 IMAP 在其他电子邮件客户端上查看 Gmail - Gmail帮助
  2. 如果注册两步验证,则需要使用应用专用密码登录,阅读官方文档了解如何生成应用专用密码 - 使用应用专用密码登录 - Gmail帮助
  3. 如有不明,请直接查阅 从打印机、扫描仪或应用发送电子邮件 - G Suite 管理员帮助

Docker 配置

然后修改 docker-compose.yaml 配置文件,在 environment 区域的环境变量下面增加以下内容,注意将用户名与密码替换掉。

1
2
3
4
5
      COMMENTO_SMTP_HOST: "smtp.gmail.com"
      COMMENTO_SMTP_PORT: "587"
      COMMENTO_SMTP_USERNAME: "example@gmail.com"
      COMMENTO_SMTP_PASSWORD: "hunter2"
      COMMENTO_SMTP_FROM_ADDRESS: "no-reply@example.com"

注意:这里必须使用 docker-compose.yaml 文件的 YAML 语法,官方文档上 Backend · Commento 给出的只是环境变量的语法。

同时需要配置服务自启,需要在配置文件 image 字段后增加 restart: always,具体参考:Compose file version 3 reference | Docker Documentation

然后重启服务即可:

1
2
docker-compose stop
docker-compose up -d

Commento 配置

登录 https://commento.yourdomain.com,选择当前网站配置,前往 Moderation Settings | Email Schedule,勾选 Whenever a new comment is created,这样就可以接收到所有评论通知邮件了。

结果

经过实际测试,博主可以成功收到评论通知邮件,评论的人也可以收到博主的回复通知邮件。

COMMENTO_SMTP_FROM_ADDRESS 字段实测并没有效果,Gmail 与 Outlook 都只显示 COMMENTO_SMTP_USERNAME 字段配置的发件人。

Commento 默认情况下每隔 10 分钟发送一次通知邮件,在测试时要注意需要耐心等待通知邮件。发送邮件的间隔配置既没有在文档中,也没有在控制面板中。

集成

功能选项

需要在 config.toml 中增加以下配置

1
2
3
4
5
  [params.comments.commento]
      enable = true
      enableLocal = false
      host = "https://commento.networm.me"
      js = "/js/commento.js"

由于在使用 Hugo 本地预览时,如果启用远程的 Commento 会导致网页加载变慢,因此刷新后会过几秒才能滚动到刷新前的位置,因此增加 enableLocal 开关控制本地预览时是否开启 Commento。

HTML

评论代码需要添加到主题代码中,这里使用的是 Even 主题,因为主题分块合理,评论系统相关的代码都放在了 themes/even/layouts/partials/comments.html 文件中,因此只需要将以下代码添加到文件最后的 {{- end }} 之前。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  <!-- commento -->
  {{/* Only include commento if it's configured */}}
  {{- if or (and (not .Site.IsServer) .Site.Params.comments.commento.enable) (and .Site.IsServer .Site.Params.comments.commento.enableLocal)}}
    {{- if and (isset $.Site.Params.comments.commento "host") (isset $.Site.Params.comments.commento "js") -}}
      <div id="commento"></div>
      <script type="text/javascript"
        defer
        src="{{ $.Site.Params.comments.commento.host }}{{ $.Site.Params.comments.commento.js }}"
      ></script>
      <noscript>Please enable JavaScript to view the <a href="https://commento.io/">comments powered by commento.</a></noscript>
    {{- end -}}
  {{- end -}}

支持 comment 开关

添加代码时注意不要破坏原有的评论开关,即每篇文章可以控制是否显示评论。

字体变化 Bug

非常奇怪,在打开网页加载 Commento 时,发现网页在加载过程中会出现几次字体变化。因此使用调试工具仔细对比了开启与关闭 Commento 时不同的设置,最终发现所有的属性都是一样的,只有显示的字体发生了变化。

注意:Safari 并不显示使用的字体,Chrome 会显示实际使用的字体,还会告诉你字体是来自网络还是本地。

仔细检查发现 Even 主题使用的全局字体样式是 $global-font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif !default;,由于系统上没有 Source Sans Pro 字体,默认使用的是 Helvetica Neue 字体。 但是 Commento 自带了 Source Sans Pro 字体,因此在 Commento 加载后,字体会发生变化。

找到问题原因就好办了,采用了粗暴的解决方案,直接将 Even 主题中的 Source Sans Pro 字体删除掉,重新生成 css,再次打开网页就不会出现字体变化的问题了。

迁移

迁移 Disqus 评论数据到 Commento

  1. 前往 Disqus admin export | Disqus 然后点击 Export 按钮导出。
  2. 等待导出完成的通知邮件,收到后复制导出的存档地址到 Commento 的 Import Comments 中的输入框,然后点击 Import 即可导入。
  3. 成功后左下角会有绿色背景文字提示,成功导入了多少条消息。

建议

由于评论系统是与他人交流的,而匿名发表评论功能是无法联系到匿名评论者的,因此禁用匿名评论功能。