SSG should allow configuration of trailing slash for permalinks

[fitzage]

When running statamic dynamically, URLs get standardized to no trailing slash. However, when the SSG generates a site, every page is a directory, and webservers treat them this way. Since I'm not running an apache server where I can just add a fancy htaccess rule, all my page URLs have trailing slashes.

This isn't a big deal, except that in some deployments, I now end up with every URL that doesn't have a trailing slash getting redirected to the trailing slash. This is also not generally a big deal, but now my sitemap.xml, rss feeds, and nav links don't match up with the actual URLs.

This is also apparently not a big deal in general, until you get to my third part search tool (addsearch). I'm working with them to hopefully fix the issue their bot has with the 308 redirects that my static site hosting platform (CloudFlare Pages) implements for their URL normalization (and no, I don't have enough details to know all the pieces).

This appears like it would be resolved if the URLs discovered in my nav tags, and in my sitemap, and in my RSS feeds all had a trailing slash.

I could manually "fix" some of them, but not the sitemap generated by SEO Pro. It seems this might be a useful default (or just an option) for the SSG to handle when generating permalinks and urls.

[tao]

Sorry to drop into the conversation, but I thought I would add something and see if it could help clarify this issue because I think I have the opposite problem?

If I use Statamic with php artisan serve there are no trailing slashes and everything works fine. If I manually add a slash to the url it still works.

When I use SSG and generate a site, I run a small PHP web server to test the site with php -S localhost:9000 and there are no trailing slashes in the URLs and it works exactly the same as the dynamic site when using php artisan serve or Laravel Valet. When I manually add a slash to the end of the url it still works.

When I deploy the site to AWS CloudFront, it works normally when the url doesn't have a slash but when someone visits the website and puts a slash at the end of the url (by mistake) then I have to manually add an index.html with a Lambda function on every request or it breaks.

Something like this for example:

exports.handler = (event, context, callback) => {

    let newUri;
    let requestUrl = request.uri;
    
    // test url and skip assets with .jpg, .png, etc...

    // Match any '/' that occurs at the end of a URI. Replace it with a default index
    if (requestUrl === '/index.html') {
        // handle root url
        newUri = '/index.html';
    } else {
        // handle sub pages
        newUri = requestUrl.replace(/\/+$/, '') + '/index.html';
    }

    // Replace the received URI with the URI that includes the index page
    request.uri = newuri;
    
    // Return to CloudFront
    return callback(null, request);
}

So in all these cases it seems the default from webservers is no trailing slash, and when there is a trailing slash it breaks my site on CloudFront...

[fitzage]

So it seems this depends on the platform, which is helpful to know. Both URLs work on CloudFlare, but with a redirect to the trailing slash. That means I don't need a solution like yours, just a solution to get the trailing slash into the generated URLs.

[kyranb]

Does anyone have a workaround fix for this?

[jasonvarga]

One workaround would be to put slashes in the anchor tags.

<a href="{{ url }}/">

[nickebdon]

Having the option to configure trailing slashes on URLs would be a huge benefit for SSG sites, rather than having to put slashes in the anchor tags manually.

[RussBrown00]

This didn't seem to be an issue with Netlify, but now that I'm on Cloudflare Pages, all of my links get redirected to a URL with a trailing slash. Google search console definitely complains about it. It would be really nice if this was something we could configure on ssg export.

[el-schneider]

This didn't seem to be an issue with Netlify, but now that I'm on Cloudflare Pages, all of my links get redirected to a URL with a trailing slash. Google search console definitely complains about it. It would be really nice if this was something we could configure on ssg export.

I'm having the exact same issue and would also very much appreciate a global solution instead of putting slashes everywhere manually

[jasonvarga]

Can you tell Cloudflare to force trailing slashes?

https://renehernandez.io/snippets/cloudflare-page-rule-wp-admin-trailing-slash/

[RussBrown00]

So I wrote a quick and dirt modifier to use on my links. It works well enough for what I need until maybe this is natively supported.

https://gist.github.com/RussBrown00/684150ac1da971d01c9e019442626498

Usage:

<a href="{{ url | trailing_slash }}">...</a>

[RiaanZA]

So I wrote a quick and dirt modifier to use on my links. It works well enough for what I need until maybe this is natively supported.

https://gist.github.com/RussBrown00/684150ac1da971d01c9e019442626498

Usage:

<a href="{{ url | trailing_slash }}">...</a>

Statamic already has a modifier that can acheive that:

{{ url | ensure_right('/') }}

[RussBrown00]

But mine only applies the trailing slash in production mode when you export via ssg

[architchandra]

I just realised that I'm in the same boat. I was wondering why Google Search Console was showing me errors for pages that seemed to be otherwise perfect. 🤦🏽‍♂️

In general, I agree with Statamic's aesthetic of not having trailing slashes but that isn't really an option with SSG, since the URL to a directory will have a trailing slash. It would have been great (and a simple fix) had Statamic had a config option to allow trailing slashes for all URLs.

Unfortunately, I'm currently serving my static site using Netlify, which seems to be clearly in favour of using trailing slashes (and thus opposed to Statamic's choice). Other static hosting services like Cloudflare Pages mostly seem to be working like Netlify so I don't have high hopes of finding a straightforward solution with them either.

I'm now wondering if my only options are to add trailing slashes manually to URLs across the website (seems like a lot of work) or moving to a traditional server-based strategy to serve my website (overkill right now).

[nickebdon]

Unfortunately, I'm currently serving my static site using Netlify, which seems to be clearly in favour of using trailing slashes(and thus opposed to Statamic's choice). Other static hosting services like Cloudflare Pages mostly seem to be working like Netlify so I don't have high hopes of finding a straightforward solution with them either.

I’ve switched over to Vercel, as they don’t generate trailing slashes. I also found deploying to Vercel much easier and faster than Netlify too. Might be worth given them a try?

[architchandra]

@nickebdon - Thank you so much! Your suggestion was spot on. I have now switched to Vercel (quite easy), which offers a config option to set trailing slash behaviour. This has saved me a lot of time and money—you're a godsend. :)

[nickebdon]

@architchandra - Glad it worked out for you 😀

[anardil]

@RussBrown00

So I wrote a quick and dirt modifier to use on my links. It works well enough for what I need until maybe this is natively supported.

https://gist.github.com/RussBrown00/684150ac1da971d01c9e019442626498

Usage:

<a href="{{ url | trailing_slash }}">...</a>

Hello, I've got the same problem.

Your modifier doesn't fix the trailing slash in the sitemap.xml isn't it?