Depending on how you generate your HTML assets to be hosted on Netlify, your URLs might end with
.html for example:
You might want to change this to a path name without the
.html extension i.e:
We are going to look at two ways to achieve this.
Removing .html by using a different folder structure
You can get rid of the
.html extension at the end of your URLs with a bit of folder restructuring.
URLs end with
.html because we likely have a folder structure similar to the one below.
01: . 02: ├── about.html 03: ├── contact.html 04: └── index.html
Naturally whenever you access a route say
/about most servers by default look for an index page to render. i.e:
index.html. We can take advantage of this to get our pages to render without the
In that case, our new folder structure will look something like this:
01: . 02: ├── about 03: │ └── index.html 04: ├── contact 05: │ └── index.html 06: └── index.html
We convert the HTML file to an
index.html file within a folder with the actual route name we want and this allows us to type the folder name
about and the browser by default picks up and renders the
index.html file from that folder.
Remove .html using Netlify
Another way to get rid of the
.html extension is to configure this from the Netlify dashboard.
Use the following steps to configure this for your site:
- Login to your Netlify dashboard.
- Choose which site you would like to configure.
- From the left hand menu select Build & deploy > Post processing.
- Click on the Edit settings button under the Asset optimization section.
- From there, you can tick Pretty URLs to allow Netlify remove the
.htmlextension from your URLs.
Here is another article you might like 😊 "What is Policy As Code (POC)?"