HTML怎么做Nginx部署_html Nginx静态资源部署方法【入门】-html教程-PHP中文网

nginx部署index.html常见问题源于权限、root路径配置或spa路由缺失：需确保目录755/文件644权限、root设为html父目录绝对路径、spa必须加try_files $uri $uri/ /index.html，且每次修改后执行nginx -t && systemctl reload nginx。

html怎么做nginx部署_html nginx静态资源部署方法【入门】

直接把 index.html 丢进 /var/www/html/ 不一定能打开，403、404、空白页大概率是权限、路径或配置没对齐，不是 HTML 本身有问题。

确认 Nginx 进程能读到你的文件

Linux 下 Nginx 工作用户（通常是 www-data 或 nginx）必须对目录有执行权（x）、对文件有读取权（r）。常见翻车点：

ls -ld /var/www/html 应显示类似 drwxr-xr-x（即 755），否则 sudo chmod 755 /var/www/html
ls -l /var/www/html/index.html 应显示 -rw-r--r--（即 644），否则 sudo chmod 644 /var/www/html/index.html
若属主不是 Nginx 用户，加组更稳妥：sudo chown -R $USER:www-data /var/www/html
SELinux 启用时（如 CentOS），sudo setenforce 0 临时关掉可快速验证是否被拦截

root 路径必须指向 index.html 的父目录，且用绝对路径

root 指令不是指定文件，而是定义 URI 映射的起点。它不支持相对路径，也不能以 ./ 开头。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

错误写法：root ./dist; 或 root /home/user/myapp/index.html;
正确写法：root /var/www/myapp; → 请求 /about.html 就去找 /var/www/myapp/about.html
如果 HTML 在 /opt/webapp/pages/index.html，那 root 就该设为 /opt/webapp/pages，不是 /opt/webapp 或 /opt/webapp/pages/（末尾斜杠无实质影响，但语义清晰）
改完务必运行 sudo nginx -t，语法错一个分号就 reload 失败

SPA 页面刷新 404？必须加 try_files

Vue/React/Astro 等构建的单页应用启用 history 路由后，浏览器访问 /about 是前端逻辑，Nginx 默认只查物理文件，找不到就返回 404。

关键配置必须放在 location / 块里：try_files $uri $uri/ /index.html;
漏掉 $uri/ 会导致 /about/（带尾斜杠）请求失败；写成 try_files $uri /index.html; 也不行
不能放在 server 级别，只在 location 内生效
若部署在子路径（如 https://example.com/myapp/），root 和构建时的 base 需匹配，否则 /myapp/css/main.css 会 404

上传文件后页面还是空白？先看 Network 面板

别急着重传或改配置。打开浏览器开发者工具，切到 Network 标签页，刷新页面，观察：

HTML 是否返回 200？如果不是，重点查 root 和权限
CSS/JS 是否全部 404？说明路径写死（比如 /assets/main.js），但 Nginx root 没覆盖到 /assets，或构建输出结构和预期不符
是否有跨域或 MIME 类型警告？检查 Nginx 是否加载了 mime.types，或手动加 types { text/css css; }
Console 里有没有 JS 报错？可能是前端代码问题，和 Nginx 无关

最常被忽略的是：改了配置却没 reload，或者 reload 了但 nginx -t 其实失败了——它不会主动报错，只会静默跳过。每次修改后，nginx -t && systemctl reload nginx 必须连用。