记录部署评论系统的过程。

1. 简介

  • 网站框架：Hugo
  • 网站主题：Hugo PaperMod
  • 评论系统：Twikoo
  • VPS操作系统：Ubuntu 24.04.3 LTS
  • 后端部署方式：Docker

备注：配置文件内容由AI生成，请自行检查是否正确。

2. 后端部署

2.1 Docker部署

因为有VPS，我选择了Docker私有部署。

在VPS里安装Docker。参照官方文档，运行下面的命令就可以通过Docker快速部署。

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

在VPS上运行命令curl http://localhost:8080/，测试部署是否成功。出现类似下面的结果，就部署成功了。记录其中的version版本信息，比如我这里是1.7.14，后面部署前端时需要对应这个版本。

{"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.7.14"}

可以注意到，这时候twikoo走http。如果尝试用https访问，访问会失败。接下来配置nginx反向代理，让twikoo评论走https。

2.2 Nginx配置

nginx配置有两个方案。假设博客的域名是<domain>.com，两个方案如下：

  • 使用子目录，通过https://<domain>.com/twikoo/访问twikoo。
  • 使用子域名，通过https://twikoo.<domain>.com/访问twikoo。使用子域名时，需要在DNS服务商里添加记录，把子域名指向VPS的IP地址。

我选用了子域名方案。

创建/etc/nginx/sites-available/twikoo文件，写入下面的内容。需要修改其中的域名、证书密钥文件路径。

# HTTP 自动跳转 HTTPS
server {
    listen 80;
    server_name twikoo.<domain>.com; # 替换为你的域名
    return 301 https://$host$request_uri;
}

# HTTPS 服务器配置
server {
    listen 443 ssl http2;
    server_name twikoo.<domain>.com; # 替换为你的域名

    # 替换为你的真实证书路径
    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;

    # 推荐的 SSL 安全配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
        # 转发到 Docker 的 8080 端口
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

然后运行下面的命令：

# 创建软链接启用配置
sudo ln -s /etc/nginx/sites-available/twikoo /etc/nginx/sites-enabled/

# 检查 Nginx 语法是否正确
sudo nginx -t

# 重载 Nginx
sudo systemctl reload nginx

不出意外的话，nginx配置就完成了。

在命令行输入curl https://twikoo.<domain>.com，或者在浏览器访问https://twikoo.<domain>.com。如果看到“Twikoo 云函数运行正常”之类的信息，说明nginx配置没有问题。

3. 前端部署

修改hugo网站根目录下的配置文件hugo.yaml。添加下面的内容，默认开启全局评论功能。

params:
  comments: true

接下来添加twikoo前端代码。在网站根目录下创建layouts/partials/comments.html文件，添加下面的内容。需要保证其中的版本信息和前面部署后端时的版本信息一致。还需要把域名改成自己的域名。

<div class="post-comments">
  <!-- 放置 Twikoo 评论框的容器 -->
  <div id="tcomment"></div>
  
  <!-- 引入 Twikoo 的前端 JS，版本号与你的后端保持一致 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js"></script>
  <script>
    twikoo.init({
      // 将此处替换为你刚才部署成功的域名
      envId: 'https://twikoo.<domain>.com', 
      
      el: '#tcomment',
      
      // 语言配置（默认与你的浏览器一致，若想固定写死可以取消下面注释）
      // lang: 'zh-CN', 
    });
  </script>
</div>

<!-- 下面是一小段可选的 CSS，让评论框与 PaperMod 主题更协调 -->
<style>
  .post-comments {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
  }
</style>

到这里，twikoo博客的前端、后端部署都完成了。在网站根目录下运行命令hugo，就可以更新网页内容、添加评论功能。