本地HTML网站无需.htaccess修改URL Slug的可行方案

一、服务器URL重写（最直接） #

不用调整现有文件结构，通过服务器配置隐藏.html后缀，同时支持root/pages/的页面存放结构。

Apache 配置 #

在网站根目录创建.htaccess文件，写入以下规则：

RewriteEngine On

# 若请求的文件/目录不存在，自动追加.html后缀
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^\.]+)$ $1.html [NC,L]

# 若页面存放在pages目录（如root/pages/about.html），添加这条规则映射到/about
RewriteRule ^about$ pages/about.html [NC,L]
# 通用规则：所有非后缀路径都映射到pages目录下对应html文件
# RewriteRule ^([^\.]+)$ pages/$1.html [NC,L]

配置后，访问/about会自动指向/pages/about.html，链接直接写<a href="/about">About me</a>即可，无需相对路径。

Nginx 配置 #

在站点的Nginx配置文件中添加：

location / {
    # 优先访问原路径，不存在则尝试加.html后缀，或指向pages目录下的文件
    try_files $uri $uri.html /pages$uri.html $uri/ =404;
}

二、静态站点生成器（适合多页面场景） #

如果后续页面会增多，用静态站点生成器（如Jekyll、Hugo、Eleventy）更省心：

• 页面源文件统一放在pages目录（如pages/about.html）
• 生成站点时，工具会自动生成/about对应的目录结构（即about/index.html）
• 所有资源引用使用绝对路径（如/css/main.css），彻底避免相对路径错误
• 根目录仅存放生成的静态文件，源文件集中管理，结构更清晰

三、优化原有文件夹方案 #

如果坚持用手动文件夹结构，可解决你遇到的两个问题：

1. 根目录杂乱问题：把所有页面文件夹放到pages目录下（如root/pages/about/index.html），配合上面的服务器重写规则，将/about映射到/pages/about/index.html，根目录不会被堆满。
2. 相对路径问题：所有CSS、JS、图片等资源都用绝对路径引用，比如<script src="/js/main.js"></script>，不管页面在哪个层级，都能正确加载资源。

内容的提问来源于stack exchange，提问作者eligolf