How do I create Ugly URLs without the .html and having to use front matter?

[nefer_l]

I’ve noticed Hugo automatically appends a trailing slash on each page like this:

domain.com/dir1/dir2/file/

Ugly URLs removes the trailing slash, like I wanted, however I want to remove the .html part.

domain.com/dir1/dir2/file.html

How do I remove the trailing slash or the .html in the Ugly URL so it publishes like this?

domain.com/dir1/dir2/file

[jmooring]

Just out of curiousity, why?

[nefer_l]

Hi - It’s because search engines view directories and individual pages as two distinct elements of a website.

Also, search engines typically prioritize individual pages over directories when ranking websites in the search results.

Do a search and see for your self

[frjo]

Since Hugo produces static sites consisting only of files the URLs must point to an actual file. No way around that.

Hugo, like most other SSGs, take advantages of the fact that web servers by default will serve up a index.html file if it exist when the browser request a path that ends in a directory.

This make it possible to have nicer URLs like https://example.com/about/ instead of https://example.com/about.html.

The https://example.com/about/ example will in practice serve up https://example.com/about/index.html but the web server hides that fact from the user.

If you want to show https://example.com/about you can configure Hugo to use Ugly URLs so it produces https://example.com/about.html. Then you configure your web server to rewrite the URLs removing the .html part.

[nefer_l]

Thank you for pointing me in the right direction, @frjo.

Here’s the solution that worked for me to remove the trailing slash from a URL:

In the config.toml file, enter the following parameter:

uglyurls = true

This will produce a URL ending in .html.

As @frjo kindly suggested, you need to configure your web server to rewrite the URLs to remove the .html part.

I use Netlify for my website.

Go to Deploys > Deploy Settings > Post Processing > Asset Optimization > Enable asset optimization. Then enable Pretty URLs.

Here’s a screenshot.

Hope this is helpful!