从零搭建个人导航站：赛博黑马的上线之旅

刚折腾完小龙虾(openclaw) 又出来一匹马（Hermes ），为了给这匹赛博黑马按个家，我把原来的个人导航站拆了，重新开发了一套。今天结束后来记录下这次重搭的全过程，包括技术选型、遇到的坑、以及一些心得。

为什么要重构

原来的导航站是我自己之前随便搭的，用的是Webstack模板，功能上能用但是代码里一大堆用不着的东西，我也没兴趣维护。现在有了赛博黑马这个助手，一切不一样了 —— 它可以帮我维护、部署、更新，所以我决定正式起一个干净的项目。

我的需求很简单：

• 深色主题，看着舒服
• 卡片式布局，一目了然
• 能搜索、能分类
• 手机上能看
• 以后放博客也在这个域名下

技术选型

我没有用什么前端框架，就是最原始的 HTML + Tailwind CSS（CDN）+ 一点点 JavaScript。理由是：

1. 无依赖：不用 npm install 半天，不用担心包管理器出问题
2. 静态部署：一个 HTML 文件就是全部，部署到任何服务器都行
3. 赛博黑马能维护：以后要加网站、改样式，告诉它就行，不用我自己动手

后端服务用的是 Node.js 内置的 http 模块，简单到就几行代码，负责静态文件服务和路由。用 systemd 守护，开机自启。

过程中遇到的坑

1. 端口问题

一开始服务跑在 8080 端口，但我想直接用 80 端口访问。本来想让 Node 直接监听 80，结果发现非 root 用户没权限。

后来的解法是 iptables 端口转发：

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080

这样外部访问 80 端口会自动转到 8080，Node 还是普通用户运行，安全。但这里有个隐藏坑 —— iptables-persistent 要安装，不然重启后规则丢失。

2. SSL 证书

证书是之前买好的，但配置 Nginx 时忘了检查是否监听 443 端口。配置文件写对了但 Nginx 没有重新加载，导致 HTTPS 访问拒绝连接。

后来用 sudo nginx -s reload 解决。经验是：改完配置一定要 reload，不能只停在 syntax ok。

3. JS 报错导致页面空白

这是最蠢的一个 bug。我让黑马改 footer 加上备案号，结果它把 updateTime 元素删了，但 JS 底部还在试图读取这个元素：

document.getElementById('updateTime').textContent = ...

报错后整个 JS 执行中断，render() 渲染函数没执行，所有导航卡片全消失。

修复很简单，加个空值判断：

const el = document.getElementById('updateTime');
if (el) el.textContent = ...

这个坑告诉我：只要动 JS，就要做错误处理，不然一行代码放倒整个页面。

最终架构

现在的架构是这样的：

用户 → 443 HTTPS → Nginx (SSL 终止)
              ↓
         8080 HTTP → Node.js 导航站
              ↓
         /blog/    → 静态 HTML 博客
      

• Nginx 处理 SSL 和 80 → 443 跳转
• Node.js 负责主站和博客的静态文件服务
• systemd 守护，开机自启

心得

这次重构最大的感受是：有 AI 助手维护，和没有，完全是两回事。

以前我自己搭站点，代码写完就不想管了，想加个功能都得自己动手。现在不一样，我告诉黑马“加个博客”、“改个链接”，它秒级完成。这种感觉很奇妙，像是自己的项目有了一个不休假的运维。

当然，也有需要注意的地方。AI 助手虽然强，但它不是全知全能，你得把需求说清楚，特别是涉及安全的操作（比如端口转发、证书配置），要自己把关。最后，一切代码部署上线前，备份始终是第一优先级。

---

这是我在这个博客的第一篇文章。以后会继续写关于 AI 开发、出海、AIGC 的实操经验。如果你也在搞独立开发，欢迎交流。