How to remove the trailing slash of a URL on a Hugo static website running on Netlify

I recently migrated www.oprea.rocks from Gatsby.js to Hugo. My biggest complaint was not being able to remove the trailing slash on all pages. Assuming your website is on Netlify, here are the steps to remove trailing slashes on your Hugo website/blog.

Enable asset optimization on Netlify

You can hand-pick your settings but for this purpose I left them all on — especially the “Pretty URLs” setting. That turns the HTML files generated by Hugo into nicely formatted URLs, but without that ugly, trailing slash.

Disable pretty URLs in config.toml

Hugo generates pretty URLs from your file names. Assuming you have judiciously named your files so they already look like nice slugs/permalinks, this shouldn’t affect you in any way.

# [...]

uglyURLs = true

# [...]

Read more about this option in the official Hugo docs.

Redeploy your static site

Once you’ve performed these settings, redeploy your site. If you were judicious enough and did not commit and push your update to config.toml before making the changes on Netlify, you can save a couple of build minutes by running a single build.

What if I don’t use Netlify?

There’s good news for you, too. As long as you’re running a static website on AWS, for example, using Amazon Cloudfront and Amazon S3, you can easily rewrite all your URLs so that whenever /path-to-my-article is accessed from the browser /path-to-my-article.html is served.

More information about it: Configuring a static website on Amazon S3

For more advanced concepts Amazon has this thing called AWS Lambda Edge. Learn more about its uses here: Using AWS Lambda with CloudFront Lambda@Edge

What next?

If you need any help with your static websites, or have any JAMStack questions, you can always get in touch.