Remove .html From The End Of URLs | Netlify

Depending on how you generate your HTML assets to be hosted on Netlify [↗], your URLs might end with .html for example: example.com/about.html.

You might want to change this to a path name without the .html extension i.e: example.com/about

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.

✅ Wrap📋
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 .html extension.

In that case, our new folder structure will look something like this:

✅ Wrap📋
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 .html extension from your URLs.

Here is another article you might like 😊 Repeat words x times |PHP