起点

最初只是工作区里的几个项目：两个聊天分析工具、一个 QQ 助手、一部长篇小说。它们散在不同文件夹里，启动方式各不相同。我想要一个页面，让别人一眼看到我做过什么；也想要一个入口，自己点开就能用。

于是先有了展示页，再有了本机项目台，最后把它们拆成“公网作品集”和“本地工具”两层。你现在看到的，是公网这一层。

DeepSeek Harness 在里面做了什么

这个站不是“一键生成”的。更准确地说，是把它当成一个能改文件、能跑命令、能截图对比的协作者：

  • 先用对话描述想要的感觉：“低调、单色、宋体标题、不要大标语”；
  • 它改 HTML / CSS / JavaScript，启动本地服务器；
  • 用浏览器截图看效果，再继续提意见：“字太小”“切换要过渡”“项目名换掉”；
  • 最后一起处理部署、域名、HTTPS、安全头和留言区。

有效的地方在于：每次只改一件事，改完立刻看效果。比一次性写一大段需求，再对着一个不满意的大成品发愁，要快得多。

文件结构

整站没有框架、没有构建步骤，双击 `index.html` 就能打开：

website/
├─ index.html
├─ assets/
│  ├─ style.css          # 配色、排版、响应式
│  ├─ theme-init.js      # 首屏前设置明暗，避免闪白
│  ├─ main.js            # 主题、留言、表单、动画
│  ├─ comments-config.js # Supabase 的两个值
│  └─ img/
├─ projects/             # 每个项目的详情页
├─ netlify.toml          # CSP / HSTS 等响应头
├─ comments.sql          # 留言表 + 防刷 trigger
└─ README.md

设计

颜色只有黑、白、灰三种，靠层次和留白，而不是靠颜色。标题用宋体，正文用等线；中文网站用宋体能压住气质，等线在小字号下更干净。

明暗两套主题全部用 CSS 变量控制，切换时只改 `data-theme`：

:root {
  --bg: #f6f5f1;
  --ink: #141414;
  --muted: #6b6861;
}

html[data-theme="dark"] {
  --bg: #0c0c0c;
  --ink: #f2f0ea;
  --muted: #928e85;
}

首屏不放自我介绍，只留头像、名字和一句很短的话；字号从最初的 115px 降到 48px。低调不是没有东西，而是把东西放在该在的位置。

功能

  • 项目详情页：每个项目单独一页，讲清楚它解决什么、怎么用、技术边界；
  • 想法区：访客可以留下想要的小工具，部署到 Netlify 后进后台；
  • 留言区：匿名，只填昵称；用 Supabase 存，RLS 只允许读和插入；
  • 明暗切换：跟随系统，也可以手动切换，选择记在 localStorage；
  • 安全头：CSP、HSTS、防点击劫持，写在 `netlify.toml` 里。

上线

部署用的是 Netlify：把 `website` 文件夹拖进去，拿到 `*.netlify.app`；然后在腾讯云 DNSPod 加两条记录——

@     A       75.2.60.5
www   CNAME   yqlong.netlify.app

DNS 生效后，Netlify 自动签发 Let's Encrypt 证书，HTTP 跳 HTTPS，`www` 跳主域名。证书会自动续，不需要买 SSL。

几个实际踩过的坑：`.cn` 域名必须先实名；DNS 没加记录时 Netlify 会一直 Pending，证书也会失败；证书签发通常几分钟，不要反复点重试；CSP 会拦外部脚本，之后加统计工具要同步改 `netlify.toml`。

如果重来一次

  • 先写内容，再做动效。没有内容的动画只是噪音；
  • 移动端要早点看，不要等桌面版“完美”了再适配；
  • 用真实截图/示例图，但不要把私人聊天记录放上去；
  • 先上线，再优化。一个能打开的网址，比一个永远在本地打磨的版本有用。

如果你也想做一个：从一个 `index.html` 开始，先放一张图、一段话；然后再加第二个页面、暗色模式、域名。它不需要一开始就长成现在这样。