科技微讯

给 GatsbyJS 网站添加评论系统 Commento

都有哪些评论系统

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

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

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

我现在用的评论系统是 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 了

暂无评论