Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
Netlify has this great feature that allows me to create a number of duplicate pages, by adding them to the _redirects file in the public root of the project (public/_redirects in Hugo, for example).
I use it to power some of my websites.
If I have a bunch of pages under content/original, by writing:
/copy/* /original/:splat 200I can use the URL
/copy
and when I access https://mysite.com/copy I have the content stored inside https://mysite.com/original, and the URL does not change. It’s not a redirect (despite the _redirects file name), it’s a rewrite because I used the 200 code at the end. Had I used 301, that would have been a 301 redirect.
Anyway, the problem I stumbled upon is this: there’s no way to automatically add the trailing slash at the end, so if you access /copy and /copy/, and you use relative URLs for images and links, without a trailing slash URLs will lead to 404 and images will be broken.
I looked for a solution in my static site generator, to see if it could replicate redirects in another way, but in the end my solution was client side.
And it’s very simple.
I added this JavaScript snippet at the bottom of my pages:
<script>
(function() {
if (!location.href.endsWith('/')) {
window.location = location.href + '/'
}
}())
</script>And now the page, if there’s no trailing slash, will immediately reload with the slash appended at the end.
The process is so quick it’s almost invisible to the user.