如何用AI建站给个人博客加上评论和点赞功能？

学完这篇，你能给自己的 AI 生成的个人博客接上两样最常用的互动功能：评论区（Giscus）和点赞按钮（Supabase），全程不用自己写后端，所有代码都让 AI 帮你生成。

第一步：先定方案，别一上来就写代码

这一步要做的，是把"评论"和"点赞"拆成两个独立问题，各自选一个现成服务。做完你会得到一张清晰的技术清单。

• 评论：用 Giscus。它把评论存在你 GitHub 仓库的 Discussions 里，免费、无广告、不需要服务器。
• 点赞：用 Supabase。免费额度足够个人博客，一个数据表就能存每篇文章的点赞数。

注意：不要用"存到 localStorage"的方式做点赞，那只是自己骗自己——换个浏览器就归零，读者也不会觉得这功能存在。

第二步：开通 GitHub Discussions，拿到 Giscus 配置

这一步要做的，是让 Giscus 有地方存评论。做完你会拿到一段可以直接贴进页面的 <script> 标签。

1. 打开你的博客仓库页面，点顶部 Settings → 左侧 General → 往下滚到 Features 区域 → 勾选 Discussions。
2. 回到仓库首页，点 Discussions 标签 → 点右侧 New discussion 旁的分类下拉，确认存在 Announcements 分类（没有就在分类管理里新建一个，类型选 Announcements）。
3. 打开 giscus.app，在 Repository 框里填 你的用户名/仓库名，格式必须完整。Discussion Category 选 Announcements，Mapping 选 pathname，主题随便挑一个。页面下方会自动生成一段代码，先复制出来。

注意：仓库必须是 public，私有仓库 Giscus 读不到讨论区，页面会一直转圈加载。

第三步：让 AI 生成评论组件

这一步要做的，是把上一步的配置变成你项目里的一个 React 组件。

在项目根目录执行：

npm i @giscus/react

然后在 Cursor 里按 Cmd + K（Windows 是 Ctrl + K），输入这样的指令，不要只说"帮我加评论"：

在 components/Comments.tsx 新建一个组件，用 @giscus/react 的 Giscus 组件，参数如下：repo="xxx/xxx"，repoId="上一步复制的值"，category="Announcements"，categoryId="上一步复制的值"，mapping="pathname"，lang="zh-CN"，theme="light"。用 'use client' 标记为客户组件。

生成后，把这个组件插到文章详情页正文下方。

第四步：建 Supabase 项目并创建点赞表

这一步要做的，是建一个能原子自增的点赞计数表。做完你会拿到两个环境变量。

1. 登录 supabase.com，点 New project，填名字和数据库密码，区域选离你读者近的（国内读者多可选 Singapore），等 2 分钟初始化完成。
2. 左侧点 SQL Editor → New query，粘贴并点右下角 Run：

create table likes (
  slug text primary key,
  count int not null default 0
);
alter table likes enable row level security;
create policy "read_likes" on likes for select using (true);

create or replace function increment_like(page_slug text)
returns integer language plpgsql security definer as $$
declare new_count integer;
begin
  insert into likes (slug, count) values (page_slug, 1)
  on conflict (slug) do update set count = likes.count + 1
  returning count into new_count;
  return new_count;
end; $$;

1. 左侧 Project Settings → API，复制 Project URL 和 anon public 两个值。

注意：只复制 anon public 那个 key，service_role 的 key 绝对不能放进前端代码，那等于把数据库的管理权限公开了。

第五步：让 AI 写点赞按钮

这一步要做的，是让 AI 生成按钮组件和数据访问代码。在 Cursor 里新建 components/LikeButton.tsx，然后按 Cmd + K 输入：

用 @supabase/supabase-js 创建客户端，URL 和 key 从 process.env.NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY 读取。组件接收 slug 参数，挂载时查询 likes 表拿当前 count，点击按钮时调用 rpc('increment_like', { page_slug: slug })，用返回的整数更新显示。按钮文案用"👍 赞一下"，点赞后禁用防止重复点击。

第六步：配环境变量并部署

这一步要做的，是让线上环境能读到 Supabase 的配置。

在本地 .env.local 里写入两行环境变量，然后把它们同步到 Vercel：进入项目 → Settings → Environment Variables → 逐个 Add New，Key 填变量名，Value 填值，Environment 三个都勾上 → Save。最后回到 Deployments，点最新一条右侧的 ⋯ → Redeploy。

部署完成后打开任意一篇文章，评论能加载出登录框、点赞数字点一下从 0 变 1，就算成功。

注意：如果评论区域一片空白，先按 F12 看 Console，八成是仓库名写错或 Discussion 分类不是 Announcements 类型。

小结

• 评论交给 Giscus，点赞交给 Supabase，自己只写 UI，不碰服务器。
• GitHub 仓库必须 public，Discussion 分类必须是 Announcements 类型。
• 点赞数用数据库的原子自增函数，不要在前端读出来加一再写回去，那样并发会丢数据。
• 环境变量改了之后必须重新部署才生效。
• 给 AI 的指令要带文件名、参数名、字段名，越具体生成质量越高。