搭建记录

这个站是怎么从零跑起来的 · 技术架构与部署过程

01这是什么

一个收录全球主要 AI 公司的信息库,覆盖基础大模型、AI 应用、AI 编程、图像视频、语音音频、机器人、芯片算力、企业服务等多个领域,支持关键词搜索与按领域 / 国家筛选。

整站是一个轻量的静态网站:所有公司数据放在一个 data.js 文件里,页面读取后在浏览器端渲染,没有数据库、没有后端,因此加载快、好维护、几乎零运维成本。要增删公司,只需修改 data.js 中的数组再上传即可,刷新页面立刻生效。

02技术栈

原生 HTML / CSS / JavaScript 无框架 · 无构建 Ubuntu 24.04 LTS Nginx Let's Encrypt HTTPS 响应式 · 深色主题

前端刻意保持极简,不引入任何框架或打包工具,一个 HTML + 一个数据文件就是全部。服务器用 Nginx 提供静态文件服务并开启 Gzip 压缩,证书由 Let's Encrypt 免费签发并自动续期。

03部署过程

编写站点

在本地完成页面与数据文件,设计深色主题与搜索 / 筛选交互。

准备服务器

在一台 Ubuntu 24.04 的 VPS 上安装 Nginx,创建网站目录并上传站点文件。

绑定域名

在域名服务商处把根域名与 www 解析到服务器,几分钟内解析全球生效。

签发 HTTPS 证书

用 Let's Encrypt 通过 HTTP 验证签发证书,并配置 HTTP 自动 301 跳转到 HTTPS。

上线验证

确认域名、证书、跳转、页面渲染全部正常后正式对外开放。

04一个有意思的难点:端口共存

这台服务器上原本已经运行着另一个服务,占用了 HTTPS 标准的 443 端口。一个端口同一时间只能被一个程序监听,而新网站也需要 443 来提供 HTTPS,于是产生了冲突。

解决办法是让 Nginx 在 443 端口做 SNI 分流。浏览器在建立 HTTPS 连接的握手阶段,会先以明文告知自己要访问的域名(即 SNI)。Nginx 读取这个域名后再决定把连接交给谁:

这样两个服务在同一个 443 端口上和平共处,各走各的,互不影响,对访问者完全透明。

说明:本页只描述技术思路。服务器地址、账号口令、密钥等敏感信息均不在此公开。

05如何维护

日常维护几乎只有一件事 —— 更新公司数据:编辑 data.js 里的公司数组(增、删、改字段),把文件上传到服务器对应目录即可,无需重启任何服务、无需重新构建。证书会自动续期,网站本身无状态、无需备份数据库。