ROUTE 01 / DEPLOYMENT
从静态网页到正式上线
目标很朴素:让一套 HTML、CSS、图片和 JavaScript,从本地目录稳定地出现在自己的域名下。先把静态站点跑顺,再引入需要长期运行的 API 服务,这是更容易排错的顺序。
STEP 01
整理一份可交付目录
上线目录只放浏览器真正需要的静态文件。源代码、构建脚本、密钥和服务端程序留在另一处,避免意外公开。
- 入口文件保持为
index.html,站内链接优先使用相对路径。 - 将图片、脚本、样式放入
assets/等固定目录,并在本地用浏览器走一遍链接。 - 为服务端程序单独建项目目录,例如
C:\Projects\my-site-service。
STEP 02
上传到站点根目录
在 Windows Server 上,将准备好的静态文件同步到 Nginx 站点目录,例如 C:\wwwroot\my-site。更新时使用临时目录解压、检查,再同步到站点根目录,减少半更新状态。
STEP 03
让 Nginx 提供静态文件
站点配置的核心只有三件事:server_name 匹配访问域名,root 指向静态目录,index 指向首页。配置保存后先测试,再重载。
- 静态页面无需 IIS,也不需要运行 Node.js。
- 只有像技术雷达 AI 解读这样的服务端能力,才通过
/api/反向代理到本机服务。 - 配置错误时先看 Nginx error log,不要反复覆盖文件猜原因。
STEP 04
域名、HTTPS 与必要信息
将域名 A 记录指向服务器公网 IP,再在 Nginx 的站点配置中加入域名。证书生效后把 HTTP 统一跳转到 HTTPS。中国大陆服务器还需按实际要求展示备案信息。
阅读 HTTPS 与网站安全基础说明↗STEP 05
做一次上线后的回看
用无痕窗口和手机网络各访问一次,确认不是浏览器缓存造成的“看似成功”。服务端密钥只写入环境变量或仅服务器可读的配置文件,绝不放进网页 JavaScript。
- 检查首页、二级页、图片与下载链接是否都能访问。
- 确认 HTTPS 无混合内容警告,备案链接可打开。
- 为更新前的静态目录和配置文件留一个带日期的备份。
发布前检查
勾选状态只保存在当前浏览器,不会上传。
这次上线准备完成。下一次更新时,先从备份与配置检查开始。
下一篇:把一个浏览器工具接入 AI,但不暴露 API Key。届时会加入“AI 陪练”入口,仍然只在你主动提问时调用模型。