给 gatsby 网站添加评论系统 commento

作者: 科技微讯

日期:

都有哪些评论系统

gatsby 不同于 wordpress, 后者自带评论功能, 前者需要自己搭建评论系统. 我上个月刚刚用 gatsby 重构了 kejiweixun.com, 接着尝试用 staticman 搭建评论系统, 不过 staticman 的使用体验无论对用户还是对博主而言都并不友好.

之所以受部分用户推荐, 主要是它有一个很特别的功能: 用户的评论会作为一个 pull request 提交到你的 github repo, 评论可以自动和文章合并, 成为文章正文的一部分. 于是评论也可以被搜索引擎搜索到, 并且只要你的文章不丢失, 评论就不会丢失. 但我觉得它最大的优点也是它最大的缺点, 这意味着读者评论后不能马上看到自己的评论, 可能会给读者带来疑惑, 这个问题似乎有解决方法, 但我不懂...所以 staticman 被我放弃了.

其实网上有很多评论系统可选择, 主要是通过 js 动态展示在文章底部, 评论和文章正文是分离的, 评论放在一个单独的数据库中. 例如很流行但比较臃肿并且可能会在评论区展示广告的的 Disqus, gatsby 官方还提到了 JustComments, TalkYard, Gitalk 等, 我后来还了解到 Remark42, schnack, utterances, Isso 等等, 大多是开源免费的.

我现在用的评论系统是 commento, 也开源, 可以部署在自己的服务器中, 如果你不想自己部署, 可以付费使用商业版本. (20191025 补充: 我已经换成了 isso 评论系统)

如何用 commento 搭建评论系统

接下来记录一下怎么部署 commento. 我不是程序员, 所以我选择了比较简单的部署方法: 通过 docker 部署.

上面提到的开源评论系统有一些也提供了 docker 镜像, 有镜像就用镜像, 镜像可比作压缩包, 环境阿/依赖阿/配置阿/什么的都帮你弄好了, 下载下来稍作调整就可以用, 不用自己配置, 可以省很多麻烦.

如果你还不知道 docker 是什么, 可以先看我之前写的两篇文章, 这篇文章不会解释 docker 的基础知识:

第一步: 运行 commento

新建文件夹, 比如就叫 test 吧, 在这个文件夹中新建 docker-compose.yml 文件, 参考 commento 的官方文档, 在里面添加以下内容:

version: "3"

services:
  server:
    image: registry.gitlab.com/commento/commento
    ports:
      - 8080:8080
    environment:
      COMMENTO_ORIGIN: localhost:8080 #根据实际情况填写
      COMMENTO_PORT: 8080
      COMMENTO_POSTGRES: postgres://postgres:postgres@db:5432/commento?sslmode=disable
    depends_on:
      - db
    networks:
      - db_network
  db:
    image: postgres
    environment:
      POSTGRES_DB: commento
      POSTGRES_USER: postgres #根据实际情况填写
      POSTGRES_PASSWORD: postgres #根据实际情况填写
    networks:
      - db_network
    volumes:
      - postgres_data_volume:/var/lib/postgresql/data

networks:
  db_network:

volumes:
  postgres_data_volume:

其中 COMMENTO_ORIGIN 的值需要根据实际情况填写, 因为通常我们都是先在本地电脑运行一次, 确定没问题了, 再部署到服务器, 所以这里填 localhost, 部署到服务器后, 我会改成诸如 https://xxx.kejiweixun.com 这样的子域名.

POSTGRES_USERPOSTGRES_PASSWORD 分别是 commento 用来存储评论的数据库的用户名和密码, 你可以随便改, 但现在只是测试, 所以先用 postgres 吧, COMMENTO_POSTGRES 后面的值要和这两个值对应.

接着执行:

docker-compose up -d

第一次执行会从网络下载 commento 和 postgres 这两个镜像, 可能有点慢, 执行完成后, 打开浏览器访问 localhost:8080, 你就能会看到 commento 的登录界面.

第二步: 把代码添加到网站

在登录界面注册, 注册成功后登录, 然后点左上角的 New Domain 添加一个新域名, 因为是在本地测试, 所以添加以 localhost 为开头的域名, 至于端口, 如果你的网站在 5000 端口运行, 那就填写 localhost:5000, 如果在 8080 端口运行, 就填 localhost:8080, 以此类推.

然后点击 Install Guide, 把这个界面显示的代码, 如下所示, 添加到你需要显示评论的网站页面中:

<div id="commento"></div>
<script src="http://localhost:5000/js/commento.js"></script>

不同网站有不同的添加方式, 比如用 react 搭建的网站, 包括 gatsby, 你可能要写一个 component, 用 useEffect() 把这两项代码插入网页中.

有些网站可能只要复制粘贴就可以了, 比如在开头创建的 test 文件夹中新建一个 index.html 文件, 在里面添加以下内容:

<html>
  <body>
    <h1>科技微讯</h1>
  </body>
</html>

这就是一个简单的网站啦! 这个网站添加 commento 评论系统很简单, 复制粘贴即可:

<html>
  <body>
    <h1>科技微讯</h1>
    <div id="commento"></div>
    <script src="http://localhost:5080/js/commento.js"></script>
  </body>
</html>

然后在 test 文件夹中, 通过命令行工具执行:

npx serve

这时你会看到两个域名, 其中一个往往是 http://localhost:5000, 刚才你在 commento 添加的域名要和网站的访问域名一致.

在浏览器访问这个域名, 就可以看到评论系统了:

commento1

第三步: 部署到服务器

假设你的服务器 ip 地址是 1.1.1.1, 域名是 kejiweixun.com. 首先你要随便想一个子域名, 例如 commento.kejiweixun.com 等, 并把这个子域名的 dns 指向 1.1.1.1

这里假设你的网站 kejiweixun.com 和评论系统 commento.kejiweixun.com 都部署在 1.1.1.1 这个服务器中, 一个 ip 地址对应两个域名, 这两个域名背后对应不同的程序, 那你需要通过 nginx 之类的工具把流量按照一定的规则转发给 kejiweixun.com 和 commento.kejiweixun.com 处理.

我的做法是, kejiweixun.com 和 commento.kejiweixun.com 都以 docker 部署, 再用 jwilder/nginx-proxy 这个 docker 镜像转发流量, 在服务器创建以下 docker-compose.yml 文件:

version: "3.7"
services:
  kejiweixun.com: #镜像 1
    image: kejiweixun/kejiweixun.com
    environment:
      - VIRTUAL_HOST=kejiweixun.com,www.kejiweixun.com
    expose:
      - "80"
    networks:
      - nginx-proxy
    restart: always
  nginx: #镜像 2
    image: nginx
    container_name: nginx
    networks:
      - nginx-proxy
    ports:
      - "80:80"
      - "443:443"
    restart: always
    volumes:
      - data:/etc/nginx/conf.d
      - certs:/etc/nginx/certs
  dockergen: #镜像 3
    image: jwilder/docker-gen
    container_name: docker-gen
    command: -notify-sighup nginx -watch /etc/docker-gen/templates/nginx.tmpl /etc/nginx/conf.d/default.conf
    networks:
      - nginx-proxy
    restart: always
    volumes:
      - certs:/etc/nginx/certs
      - data:/etc/nginx/conf.d
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - ./nginx.tmpl:/etc/docker-gen/templates/nginx.tmpl
  commento: #镜像 4
    image: registry.gitlab.com/commento/commento
    container_name: commento
    expose:
      - "8080"
    environment:
      VIRTUAL_HOST: commento.kejiweixun.com
      COMMENTO_ORIGIN: https://commento.kejiweixun.com
      COMMENTO_PORT: 8080
      COMMENTO_POSTGRES: postgres://postgres:postgres@db:5432/commento?sslmode=disable
    depends_on:
      - db
    networks:
      - nginx-proxy
  db: #镜像 5
    image: postgres
    container_name: postgres
    environment:
      POSTGRES_DB: commento
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
    networks:
      - nginx-proxy
    volumes:
      - postgres_data_volume:/var/lib/postgresql/data
volumes:
  postgres_data_volume:
  data:
  certs:
    driver: local
    driver_opts:
      type: none
      device: home/ubuntu/docker/ssl_certs
      o: bind
networks:
  nginx-proxy:
    name: nginx-proxy

我在如何同时运行多个 docker 容器, 并通过不同的域名访问对这个文件有详细的解释, 如果你没看懂, 可以先看看这篇文章.

这个文件包括 5 个 docker 镜像, 第一个是 kejiweixun.com 这个博客的镜像, 第二和第三个镜像就是 jwilder/nginx-proxy, 第三和第四个就是 commento 了, COMMENTO_ORIGIN 已经改成 https://commento.kejiweixun.com.

最后执行 sudo docker-compose up -d, 这 5 个镜像都会运行起来, 然后访问 https://commento.kejiweixun.com 登录 commento 的后台, 在后台添加 kejiweixun.com 这个域名, 在 kejiweixun.com 的网页代码中, 插入 commento 后台提供的代码, 更新一下 kejiweixun.com 的镜像, 替换旧的 kejiweixun.com, 搞掂!

第四步: 添加登录方式

commento 支持匿名评论, 也可以通过 twitter, google, github 三种方式登录后再评论, 我暂时添加了 google 和 github 两种登录方式, 如下所示:

commento2

怎么添加呢? 可以参考官方文档, 文档告诉我们, 要添加 github 的登录方式, 只要在 docker-compose.yml 文件中添加 COMMENTO_GITHUB_KEYCOMMENTO_GITHUB_SECRET 这两个环境变量就可以啦, google 和 twitter 也有类似的变量, 具体看官方文档. 即:

#.....前面省略......
commento: #镜像 4
  image: registry.gitlab.com/commento/commento
  container_name: commento
  expose:
    - "8080"
  environment:
    VIRTUAL_HOST: commento.kejiweixun.com
    COMMENTO_ORIGIN: https://commento.kejiweixun.com
    COMMENTO_PORT: 8080
    COMMENTO_POSTGRES: postgres://postgres:postgres@db:5432/commento?sslmode=disable
    COMMENTO_GITHUB_KEY: xxxxxxxxxxxx #添加在这里
    COMMENTO_GITHUB_SECRET: xxxxxxxxxxxx #添加在这里
#.....后面省略......

那这两个变量的值怎么获取呢? 去 github 获取, 你需要到 github 创建一个很简单的 oauth 应用. 怎么创建呢? 找到一篇文章, 教你怎么一步一步地创建, 包括 twitter, google 和 github.

更多配置选项请参考官方文档, 有一些还是很有必要开启的, 例如 gzip 压缩等. commento 本身就有反垃圾功能, 不过也可以撘配 Akismet 使用, Akismet 是 wordpress 最常用的反垃圾评论插件, 这个也要通过环境变量开启.

第五步: 自定义评论系统的外观

commento 还是挺好看的, 不过我嫌它太占地方了, 尤其是底部的 commento 字样, 不过 commento 允许我们添加自定义样式. 方法是在你前面获取的代码中, 给 <script> 元素添加 data-css-override 属性, 并把其值指向你自定义的样式表, 例如:

<div id="commento"></div>
<script
  src="http://commento.kejiweixun.com/js/commento.js"
  data-css-override="http://example.com/my-custom-styling.css"
></script>

其他配置选项可以继续参考官方文档.

总结

评论系统终于搞掂啦, 大家评论试试? commento 我不知道自己会用多久, 不想用的时候可以把评论导出为 json 文件, 轻松备份.

20191025 更新: 只用了不到一天, 我已经换成 isso 了.