从零开始搭建你的免费博客评论系统(Remark42 + fly.io)

作者: pseudoyu | 4640 字, 10 分钟 | 评论 | 2024-07-22 | 分类: Tools

blog, commenting-system, fly.io, serverless

翻译: EN, DE

前言

在「2024 年了,我的博客有了什么变化」一文中,我介绍了自己使用 Serverless 平台和一些开源项目搭建的博客系统,也开启了这个系列教程来记录搭建和部署全过程。

本篇是关于评论系统的解决方案。

评论系统迭代

remark42_comments

我常常觉得评论不仅仅是读者与作者之间的沟通互动,其内容本身也是文章的一部分,甚至常常有些评论的思考与观点讨论会比文章本身更有价值,所以对于评论系统一直很重视,并不愿意信任一些第三方托管的服务,不希望有什么审查,也想风格尽可能简约,并与自己的博客风格相符。

在博客发展过程中,评论系统方案也经历过几次迭代,关于评论系统的类型和选择,我很喜欢的开发者 reorx 在「更换博客评论系统」中有详细的介绍了,我不作更多引申了,本文更重个人体验与详细的搭建过程。

Disqus

我最早使用的博客评论系统是万恶的 Disqus,一个笨重且会收集用户隐私的知名评论系统,因为加载比较慢,且免费版本经常会附带一些广告,实在难以忍受,再加上当时其实也基本上没什么评论,并没有什么迁移负担,用了没多久就直接弃用了。

Utterances

于是换成了另一个基于 GitHub issues 的评论系统 utterances,它会为每篇文章生成一个 issue,用户通过授权 GitHub 登录来对 issue 发表评论。这种方式的好处是只需要授权一个 utterances-bot 来进行管理,无需自己部署服务,维护数据库等。但是用了一段时间后,觉得有几点不足:

  • 基于 GitHub API 进行评论管理,如之后接口变动或对这类利用 issue 进行评论的方式进行限制,会不太稳定
  • 读者必须要授权 GitHub 登录,非技术人员或使用移动端阅读的读者使用起来很不方便
  • 会污染 GitHub 仓库的 Issues 记录,也不方便后续迁移到其他系统

Cusdis + Supabase + Vercel

Cusdis 是 Randy 做的一个注重数据隐私的开源的评论系统,十分轻量,经过 gzipped 后大约只有 5kb,从名字来看也知道是难以忍受 Disqus,自己做了一个替代版,因此它也是支持 Disqus 历史数据导入的,很贴心。

从 2021 年中就开始使用了,到现在整整三年了,除了最开始的时候因为 Heroku、Railway 相继收费而折腾了一下部署平台外,一直都稳稳地运行着,不过我在使用中也有遇到一些问题:

  • 大概是由于微信内置浏览器做了一些魔改,在博客从微信聊天/对话打开是看不到评论组件的
  • 尽管可以输入邮箱,但并不支持订阅评论回复
  • 需要管理员手动审核评论,但评论提醒的 TG Bot 时常失效而错过评论

不过整体来说时至今日依然是十分值得推荐的方案,轻量,方便自部署,风格也简约好看,搭建教程参看「轻量级开源免费博客评论系统解决方案 (Cusdis + Railway)」。

鉴于 Railway 从去年 8 月起已经取消了 Free Plan,如果依然想完全免费使用,可以使用 Vercel/Netlify/Zeabur 免费部署主项目,并在 Supabase 上部署一个免费的 PostgreSQL 数据库实例,把链接作为环境变量传入 Cusdis 服务中即可,其他流程大同小异。

另外因为其核心功能已经许久没有什么更新,比起其他较为成熟的评论系统也显得有些简陋,不过由于我也秉持着够用即可的原则,一直没动迁移/更新的念头,只有在其中一阵子在学前端时还参与了一些 Cusdis V2 版本的开发,不过也没做多久。

由于四月时 Vercel 部署升级的时候一直失败,导致接近几周的时间没收到评论,再加上确实有了一些功能需求,所以下定决心进行迁移,探究起了新的方案。

Remark42 + fly.io

调研了一圈后选择了 reorx 在「更换博客评论系统」一文中最后选定的 Remark42

单纯就配置选项来说比起 Cusdis 还是丰富了不少,目前配置了常用的几种社交账号登录(GitHub、Twitter、Telegram、邮箱)、可以匿名评论、支持邮件订阅回复提醒并且也设置了 TG bot 提醒,并且部署在 fly.io,go 单二进制 + 数据库单文件,很舒服的解决方案,更详细的 Remark42 的介绍和优势可以参看上面那篇文章。

虽然 Remark42 提供了一些迁移方案,但本身并不支持我使用的 Cusdis,但好在它是用 Golang 写的,我自己添加了迁移逻辑,将这些年沉淀下来的 438 条评论数据都无缝迁移过来了。

Remark42 + fly.io 部署说明

Remark42 + fly.io 的方案仅牵扯到单个服务,数据库使用的是 boltdb 挂载于 volume 中,但所有操作都在 fly.io 的 Free Plan 中。

下面将从零开始介绍如何搭建这个免费评论系统。

Remark42 本身代码开源 —— 「GitHub - umputun/remark42」,并提供了官方维护的镜像,文档清晰易读,可以根据自己的实际需求进行配置。

安装 flyctl 命令行工具

fly.io 与我之前使用的 Railway、Zeabur 等很大的一个不同点是它大部分操作基于命令行与配置文件,而不是在网页端管理后台进行操作,所以首先需要根据文档安装 flyctl 命令行工具。

以 macOS 为例,我使用 brew 进行安装:

brew install flyctl

授权登录

打开终端工具,使用以下命令进行授权登录:

flyctl auth login

fly_auth_login

fly_auth_web

在 Web 端进行账户登录或新建账号,完成后点击 Continue as xxx 即完成 flyctl 命令行的授权登录。

创建应用目录

create_fly_config

由于我通常会手动进行进行配置管理,而不是用它官方的模板,所以我会新建一个类似 remark42-on-fly 的目录,并将所有的配置文件、环境变量等放在这个路径下。

并使用 VS Code 进行编辑(也可以使用 vim 或者其他编辑器/IDE)。

配置文件

fly.io 主要是使用 .toml 格式的配置文件进行服务管理,以下是我部署的服务对应的配置文件:

app = 'yu-remark42-01'
primary_region = 'hkg'

[build]
  image = 'umputun/remark42:latest'

[[mounts]]
  source = 'remark42_data_01'
  destination = '/srv/var'

[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = false
  auto_start_machines = true
  min_machines_running = 1
  processes = ['app']

[env]
  REMARK_URL = 'https://yu-remark42-01.fly.dev/'
  SECRET = 'remark42-secret'
  SITE= 'remark42-demo'
  ADMIN_SHARED_ID= ''

[[vm]]
  cpu_kind = 'shared'
  cpus = 1
  memory_mb = 256

这是详细的配置说明:

  • app:应用名称,这里我使用了 yu-remark42-01,可以根据自己的实际情况进行修改
  • primary_region:部署区域,可以从这个列表中选择自己想部署的区域,我选择了香港
  • [Build],这个部分主要是服务镜像相关的配置
    • image:服务镜像,使用了官方提供的 umputun/remark42:latest,如有需要可以指定 tag 版本
  • [[mounts]],这个部分主要是挂载数据卷的配置,由于 Remark42 使用 boltdb 数据库,需要持久化存储
    • source:数据卷名称,这里我使用了 remark42_data_01
    • destination:挂载目录,这里我挂载到了 /srv/var,这个目录是 Remark42 默认的数据存储目录
  • [http_service],这个部分主要是服务相关的配置
    • internal_port:服务内部端口,使用 8080
    • force_https:强制使用 HTTPS
    • auto_stop_machines:设置为 false
    • auto_start_machines:设置为 true,即自动启动
    • min_machines_running:最小运行机器数,设置为 1
    • processes:服务进程,设置为 app
  • [env],配置环境变量
    • REMARK_URL:Remark42 服务的 URL,这里我使用了 https://yu-remark42-demo.fly.dev/,这是 fly.io 自动生成的,后续如果有了自定义域名则需要更改
    • SITE:站点名称,这里我使用了 remark42-demo
    • SECRET:自定义的 JWT Token,这里我使用了 remark42-secret
    • ADMIN_SHARED_ID:管理员 ID,这里我使用了空字符串,即没有管理员,后续可以补充
  • [[vm]],这个部分主要是机器相关的配置
    • cpu_kind:CPU 类型,设置为 shared
    • cpus:CPU 数量,设置为 1
    • memory_mb:内存,设置为 256MB

创建服务

完成并检查配置后,运行以下命令进行服务创建:

flyctl launch

fly_launch_remark42

环境变量配置

目前只是部署了服务,并没有设置环境变量,因此服务启动会有问题,接下来我们设置环境变量,放在prod.env 文件中:

AUTH_GITHUB_CID=<your_github_cid>
AUTH_GITHUB_CSEC=<your_github_csec>
AUTH_TWITTER_CID=<your_twitter_cid>
AUTH_TWITTER_CSEC=<your_twitter_csec>
AUTH_ANON=true
AUTH_TELEGRAM=true
TELEGRAM_TOKEN=<your_telegram_token>
NOTIFY_ADMINS=telegram
NOTIFY_TELEGRAM_CHAN=<your_telegram_group>
NOTIFY_USERS=email
AUTH_EMAIL_ENABLE=true
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_TLS=true
[email protected]
SMTP_PASSWORD=<your_password>
[email protected]
[email protected]

环境变量的部分相对比较复杂,具体参数参看文档

登录/授权配置

我配置了匿名评论、GitHub、Twitter 与 Telegram 几种方式,可以根据自己的情况配置其他登录方式。

  • 匿名登录
    • AUTH_ANON:是否允许匿名评论,我选择了允许,即用户可以不登录评论
  • GitHub 登录
    • AUTH_GITHUB_CIDAUTH_GITHUB_CSEC:GitHub OAuth App 的 Client ID 与 Client Secret
  • Twitter 登录
    • AUTH_TWITTER_CIDAUTH_TWITTER_CSEC:Twitter OAuth App 的 Client ID 与 Client Secret
  • Telegram 登录
    • AUTH_TELEGRAM:是否允许 Telegram 登录
    • TELEGRAM_TOKEN:Telegram Bot Token,通过 botfather 创建
  • 邮箱登录
    • AUTH_EMAIL_ENABLE:是否允许邮箱登录
    • AUTH_EMAIL_FROM:邮箱登录的发送邮箱

通知配置

  • Telegram 通知管理员,参看文档这部分进行 Telegram Bot 的创建和配置
    • NOTIFY_ADMINS:通知管理员的方式,选择 telegram
    • NOTIFY_TELEGRAM_CHAN:如启用 telegram 通知管理员,需要配置对应 Channel id,只需要填写 t.me/xxx 后面的 id 部分即可,如 pseudoyuchat
  • Email 通知用户,参看文档这部分进行邮箱 SMTP 等配置
    • NOTIFY_USERS:通知用户的方式,我选择了了 email, 即邮件通知,则需要配置下文的 SMTP
    • NOTIFY_EMAIL_FROM:邮箱通知的发送地址

邮件 SMTP 配置

上文的邮箱登录与邮箱通知都需要配置 SMTP 服务器,这部分也可以根据自己的邮箱服务商参照文档进行配置。

  • SMTP_HOST:SMTP 服务器地址
  • SMTP_PORT:SMTP 服务器端口
  • SMTP_TLS:是否启用 TLS
  • SMTP_USERNAME:SMTP 用户名
  • SMTP_PASSWORD:SMTP 密码

导入环境变量到服务

根据以上说明完成环境变量配置后,在配置文件和环境变量文件所在目录运行以下命令导入环境变量:

fly secrets import < prod.env

fly_secret_import

deploy_status_remark42

执行完成后到 fly.io 控制台查看服务状态即可,如为 Deployed 状态即表示部署成功。

配置自定义域名(可选)

如果你不想使用 fly.io 提供的默认域名,可以配置自定义域名。

custom_domain_flyio

进入 fly.io 控制台,选择刚部署的 yu-remark42-01 服务,点击左侧的 Certificates 选项,然后点击右上角 Add a Certificate,按照提示添加自定义域名即可。

custom_domain_dns_in_fly

点击 Create Certificate 后,会有一个页面显示你所需要添加的 DNS 记录,按照提示添加即可。

cloudflare_dns_remark42

flyio_certificate_success

例如我的域名托管在 Cloudflare,我按照提示添加了两条 DNS 记录,返回页面后点击 Check again 或等待一段时间后刷新查看,都显示绿色即为配置成功。

change_remark_url

此时,我们可以在 fly.toml 中修改 REMARK_URL 为自定义域名,然后执行以下命令重新部署服务即可,之后对配置文件进行任何改动都可以使用该命令进行更新:

fly deploy

博客配置 Remark42

上文我们完成的 Remark42 服务的部署,现在则需要在我们的博文中加入 Remark42 评论组件,以我使用的 Hugo 博客为例。

定义 Hugo 主题 Comments 组件

我在 Hugo 博客的 layouts/partials 目录下新建了一个 comments.html 文件,用于定义 Remark42 评论组件:

<div class="comments">
  <div class="title">
    <span>Comments</span>
    <span class="counter"><span class="remark42__counter" data-url="{{ .Permalink }}"></span></span>
  </div>
  <div id="remark42">
  </div>
</div>

<script>
  var remark_config = {
    host: 'https://comments.pseudoyu.com',
    site_id: 'pseudoyu.com',
    components: ['embed', 'counter'],
    max_shown_comments: 20,
    simple_view: true,
    theme: 'light',
  }
</script>

<script>
    (function () {
      // init or reset remark42
      const remark42 = window.REMARK42
      if (remark42) {
        remark42.destroy()
        remark42.createInstance(remark_config)
      } else {
        for (const component of remark_config.components) {
          var d = document, s = d.createElement('script');
          s.src = `${remark_config.host}/web/${component}.mjs`;
          s.type = 'module';
          s.defer = true;
          // prevent the <script> from loading mutiple times by InstantClick
          s.setAttribute('data-no-instant', '')
          d.head.appendChild(s);
        }
      }
    })();
</script>

remark_config 中的 hostsite_id 需要根据自己的实际配置进行修改,其他部分配置可以保持不变,或根据文档进行调整。

配置好 commnets 组件后,在 layouts/posts/single.html 中文章底部引入:

{{ partial "comments.html" . }}

add_comments_code_in_hugo

大体位置如图所示,如使用的是其他主题或博客系统,则需要找到自己文章对应的模板文件进行修改。

本地预览/部署网站

test_remark42_embedded

此时可以在本地预览或部署网站以查看评论系统是否正常显示,至此我们的服务部署完成。

获取 User ID 并配置 Admin

get_user_id_remark42

登录授权完成后并测试评论后,可在 Remark42 中点击头像打开管理页面,双击后 CMD/Ctrl+C 可以获取以 github_ 或其他平台开头的 User ID,可以将其配置到 ADMIN_SHARED_ID 中(更改 fly.toml 配置文件并运行 fly deploy 重新部署,即可成为管理员,管理员有权限对其他用户的评论进行删除等管理操作。

其他

我把之前 Cusdis 中的评论数据按照一定条件导出 json 格式的数据,并通过 go 程序进行格式转换与迁移,因此保留了之前所有的评论。

因为 Cusdis 本身不提供导出功能且迁移的需求太过小众,我并没有直接向上游贡献代码,也没有写成完善的脚本,有类似需求的朋友可以参考这个 PR 进行处理 —— 「feat: add cusdis to remark42 migrator support by pseudoyu · Pull Request #1 · pseudoyu/remark42」。

总结

以上就是我的博客评论系统的搭建过程,评论系统的搭建与配置相对繁复,且本文的配置方式或许会随时时间而过时,遇到问题可多参照官方文档

这是我的博客搭建部署系列教程之一,如对数据统计系统、博客内搜索等搭建感兴趣,请持续关注,希望能对大家有所参考。

相关文章

2024-08-06
使用 GoatCounter 与 Zeabur 搭建网站数据统计系统
2024-07-02
使用 WebP Cloud 与 Cloudflare WAF 为你的图床添加隐私和版权保护
2024-06-30
从零开始搭建你的免费图床系统(Cloudflare R2 + WebP Cloud + PicGo)
2022-05-29
Hugo + GitHub Action,搭建你的博客自动发布系统
2022-05-24
轻量级开源免费博客评论系统解决方案 (Cusdis + Railway)
pseudoyu

作者

pseudoyu

后端 & 智能合约研发工程师,HKU ECICer。喜欢探索新技术,空闲时也折腾博客搭建、效率工具等。 在 GitHub 关注我。在我的 Telegram 频道了解更多。


Comments