Nginx不生成静态页面，仅高效托管预构建的静态资源（如Hugo、VuePress输出的dist目录），并支持通过try_files实现SPA路由回退及反向代理/API动静分离。
Nginx 本身不生成静态页面，它只负责托管和分发已存在的静态文件。所谓“静态页面生成工具的目录托管代理”，实际是指：用 Nginx 托管由 Hugo、Jekyll、VuePress、Docusaurus 等工具生成的静态站点输出目录（如 public/ 或 _site/），同时可结合反向代理将特定路径（如 /api）转发给后端服务。
关键不是让 Nginx “生成”页面，而是让它正确识别并高效服务这些预构建的 HTML/CSS/JS 资源，同时不干扰其他动态请求。
以下是实用配置要点：
1. 明确静态资源根目录位置
确保你的静态生成工具已执行构建命令（如 hugo build、npm run build），输出目录（如 ./dist、./public）路径清晰且权限可读。例如：
# 假设 VuePress 构建后输出在 /var/www/mydocs sudo mkdir -p /var/www/mydocs sudo cp -r ./docs/.vuepress/dist/* /var/www/mydocs/
2. 配置独立 server 块服务静态站点
不要修改 nginx.conf 主配置，新建站点配置（如 /etc/nginx/conf.d/docs.conf）：
server {
listen 80;
server_name docs.example.com;
root /var/www/mydocs; # 指向生成后的静态目录
index index.html;
# 支持 SPA 路由：所有未匹配文件的请求都 fallback 到 index.html
location / {
try_files $uri $uri/ /index.html;
}
# 可选：禁止访问敏感文件
location ~ ^/(.git|node_modules|package.json|README.md) {
deny all;
}
}3. 在同一域名下做动静分离（静态 + 反向代理）
比如前端静态页走 /，API 请求走 /api → 转发到后端 Node.js 服务：
server {
listen 80;
server_name docs.example.com;
root /var/www/mydocs;
index index.html;
# 静态资源直接返回（含 .js/.css/.png 等）
location / {
try_files $uri $uri/ /index.html;
}
# 将 /api/* 请求代理到后端
location /api/ {
proxy_pass http://127.0.0.1:3000/; # 注意末尾斜杠，保证路径重写正确
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}4. 注意几个易错细节
-
root指令值是目录路径，Nginx 会自动拼接请求 URI；不要写成root /var/www/mydocs/;后再加location / { alias /var/www/mydocs/; }——root和alias不要混用。 -
try_files $uri $uri/ /index.html;是支持前端路由（如 Vue Router history 模式）的关键，否则刷新子页面会 404。 - 若静态站点含带 hash 的资源（如
app.a1b2c3.js），确保gzip_static on;和expires配合使用提升缓存效率。 - 修改配置后务必检查语法并重载：
sudo nginx -t && sudo nginx -s reload
不复杂但容易忽略。
