背景

评论区是一个博客的应有功能，但静态博客本身不具备实现评论区的能力，想要引入评论区，需要借助第三方服务

需求:

1. 支持匿名评论: 降低评论门槛
2. 无广告与用户追踪: 保证用户体验和隐私
3. 免费/低成本: 服务持久化

方案对比:

最终选型: Waline。其满足所有核心需求，虽然需要一次性投入部署时间，但长期收益最高

2. 后端服务部署 (Waline + Vercel + LeanCloud)

采用 Waline 官方推荐的免费部署方案：Vercel (Serverless Function) + LeanCloud (数据存储)

2.1 LeanCloud 数据存储配置

1. 注册 LeanCloud 国际版
2. 创建一个开发版应用
3. 设置 > 应用 Keys ，获取 App ID, App Key 和 Master Key

2.2 Vercel 服务部署

1. 通过 Waline 官方提供的“一键部署”按钮，使用 GitHub 登录 Vercel 创建新项目

遇到的问题：环境变量未在部署时配置

• 现象: Vercel 在首次部署流程中未提示输入环境变量。
• 解决方案:
  1. 进入Settings > Environment Variables
  2. 手动添加 LEAN_ID, LEAN_KEY, LEAN_MASTER_KEY 三个环境变量
  3. 执行 Redeploy，使新环境变量生效

部署成功后，Vercel 会提供一个 xxx.vercel.app 格式的域名，即 Waline 的 Server URL

3. Waline集成

在文章模板中添加 Waline 的初始化脚本

<!-- 评论区容器 -->
<div id="waline"></div>

<!-- Waline 初始化脚本 -->
<script type="module">
  import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';

  init({
    el: '#waline',
    serverURL: 'https://[你的Vercel域名].vercel.app',
    requiredMeta: ['nick'], // 强制要求填写昵称
  });
</script>

遇到的问题：评论区无样式

• 现象: 评论区功能正常，但 UI 元素（输入框、按钮等）没有应用任何 CSS 样式
• 原因分析: 只引入了 Waline 的 JavaScript文件，没引入样式文件
• 解决方案: 在网站的 head.html 内，添加 CSS 文件的链接

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css" />
  

4. 性能瓶颈

集成完毕后，评论区迟迟无法加载出来

现象:

• 加载时间极长（10-20秒以上）
• 频繁出现加载失败，控制台报错 net::ERR_CONNECTION_TIMED_OUT
• 加载速度极不稳定

原因分析:

访客 (中国) -> Waline 后端 (Vercel 服务器, 美国) -> LeanCloud 数据库 (中国) -> Waline 后端 (美国) -> 访客 (中国)

1. 物理延迟: 部署在 Vercel 美国节点的后端服务，与国内的访客和 LeanCloud 数据库之间存在巨大的地理距离，导致网络请求耗时过长
2. 网络可达性: *.vercel.app 公共域名在国内的访问质量不稳定，是导致连接超时的主要原因

解决方案：绑定自定义域名 在彻底迁移后端服务前回国之前，尝试一个低成本的优化方案：为 Vercel 服务绑定一个自定义子域名

操作步骤:

1. 在 Vercel 的 Settings > Domains 中，添加一个自己的子域名（ comments.unendev.com）并按指引配置好 DNS 解析
2. 修改前端 Waline 初始化脚本中的 serverURL

   serverURL: 'https://comments.unendev.com',
   

结果:

修改后，评论区加载速度从 10-20 秒优化至 1-2 秒内，加载失败问题基本消失

原理: 自定义域名通过 Vercel 的全球 CDN 网络进行路由，相比于直接访问公共的 .vercel.app 域名，其在国内的网络可达性和稳定性得到了显著改善，从而解决了连接超时问题

总结

• 环境变量与重新部署: 在 Vercel 等 PaaS 平台，修改环境变量后，必须执行 Redeploy 才能使变更生效
• JS 与 CSS 分离: 集成第三方前端库时，需确认是否要分别引入 JavaScript 逻辑文件和 CSS 样式文件
• 网络链路是性能瓶颈: 当应用涉及跨国数据交互时（用户在中国，服务在美国），网络延迟和可达性是首要排查的性能瓶颈
• 自定义域名的价值: 为部署在 Vercel 等国外平台的服务绑定自定义域名，可以显著改善其在国内的访问速度和稳定性，是一种低成本、高回报的性能优化手段