logo科技微讯

给 GatsbyJS 网站添加评论系统 Commento

作者：科技微讯
日期：2019-10-24
📜 文章

都有哪些评论系统

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_USER 和 POSTGRES_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_KEY 和 COMMENTO_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 了。

donation赞赏
thumbsup0
thumbsdown0
暂无评论