Last updated 2022-11-04 01:47:30

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.

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:

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.

Netlify Asset optimization tab [→]

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