How to Remove .html from URLs
There are two main options for how to remove the file extension from your static site's URL.
- Include a
.htaccess
file at the root of your project which contains aRewriteRule
.
There are reasons to not use a .htaccess
file if you can help it though.
Or, the preferred method, you can:
- Place the file into a folder with the desired name, and rename the file to
index.html
.
If you are using a static site generator to render your content, it will probably be taking care of this already. This site uses 11ty. At build time 11ty places each of the posts / content files into a folder of the same name in the correct sub-folder and renames the file to index.html
.
For example this post, pre-build, is written in a markdown file called how-to-remove-html-from-urls.md
, and is in a folder /posts
. At build time 11ty does it's magic and within the /_site
folder (that is the folder which is actually served to the user) we have a neat structure that looks like this: /posts/how-to-remove-html-from-urls/index.html
.
This use of folder and index.html
mean that the end user only sees the correct slug and not the file extension: https://example.com/posts/how-to-remove-html-from-urls
.
But you knew that already because you are reading this post.