静态网页的404.html必须放在根目录且命名为404.html,GitHub Pages自动支持但限于绑定路径,Netlify/Vercel需配置重定向规则,页面需兼顾SEO与离线可用性。

静态网页没有后端,404 页面不能靠服务器动态返回,但只要文件存在、路径正确、被服务器识别,就能生效——关键不在“怎么写”,而在“放哪”和“怎么让服务器用它”。
你的 404.html 文件必须放在网站根目录
这是最常踩的坑:很多人把 404.html 放在子目录(比如 /pages/404.html)或本地测试时双击打开,结果 404 始终不触发。
- 静态托管服务(如 GitHub Pages、Vercel、Netlify、Cloudflare Pages)默认只认根目录下的
404.html - 本地用浏览器直接双击打开
file://协议,根本不会触发 404(没有 HTTP 状态码概念),必须通过本地服务器预览(如npx serve或 VS Code Live Server) - 文件名必须严格是
404.html,不是error404.html、404.htm或带大小写混用(某些服务器区分大小写)
GitHub Pages 自动支持,但有隐藏限制
GitHub Pages 不需要额外配置,只要根目录有 404.html 就会自动接管所有 404 请求——但仅限于你绑定的域名或 github.io 子路径下。
- 如果你用的是项目站点(
username.github.io/repo),404.html只对/repo/xxx路径有效;访问/other这类非本项目路径,仍会跳 GitHub 默认 404 - 自定义域名下,
404.html生效;但若 DNS 解析异常或证书错误,用户根本到不了页面,自然也看不到你的404.html - 页面内链接建议用相对路径(如
./index.html),避免硬编码https://yoursite.com/导致离线失效
Netlify / Vercel 需要明确声明重定向规则
这些平台默认不自动 fallback 到 404.html,尤其当使用了前端路由(如 React Router)时,必须显式配置 404 行为。
功能列表:底层程序与前台页面分离的效果,对页面的修改无需改动任何程序代码。完善的标签系统,支持自定义标签,公用标签,快捷标签,动态标签,静态标签等等,支持标签内的vbs语法,原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统,可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率,稳定性和容错性,即使模版中有错误的标签也不会影响页面的显示。所有的标
立即学习“前端免费学习笔记(深入)”;
- Netlify:在根目录加
_redirects文件,内容写一行:/ * /404.html 404
- Vercel:在根目录加
vercel.json,写{ "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }] }——但注意这会覆盖所有 404,包括真实缺失的资源(如图片、CSS),更稳妥的是只重写 HTML 路由:{"rewrites": [{ "source": "/(.+)", "destination": "/404.html" }]},再配合cleanUrls: true - 如果用了
index.html的 history 模式路由,别把404.html当作兜底页来处理所有路径,否则真实 404 资源请求也会返回 HTML,导致控制台报错却没提示
HTML 内容本身要兼顾可用性与 SEO
404.html 是纯静态文件,但用户可能从搜索引擎点进来,也可能输错 URL,页面得自己“说清状况”。
- 必须包含
,否则搜索引擎可能误判为首页重复404 Not Found - 加一个明确的
,别只靠 CSS 隐藏文字或用图片替代Page not found
- 提供至少一个有效导航:回到首页的链接(
Go home)、搜索框(前端 JS 实现,不依赖后端)、或 Sitemap 链接 - 避免在
404.html中加载外部 JS/CSS(如统计脚本、CDN 字体),否则网络异常时页面可能白屏或样式崩溃
真正难的不是写个好看的 404.html,而是确保它在各种部署环境里被正确识别——不同平台对“404 响应”的解释逻辑差异很大,同一份代码在 GitHub Pages 上好使,在 Netlify 上可能完全不触发,问题往往出在重定向配置或路径约定上。









