Login/Register
Trailing slashes in Jekyll + GitHub Pages site cause 404
Asked Answered
Solved urlyamljekyllconfiggithub-pages
F

4

8

Edit 7/13/2024: My site no longer uses GitHub Pages.

I would like all of the following URLs to resolve on my website, which is built with Jekyll and hosted on GitHub Pages:

Locally they all work correctly, but right now on the live site, the first and third option resolve, but the middle one with the trailing slash causes a 404 error.

I am not using permalinks at the moment. When I do add permalink: /about/ to the front matter in my page, the trailing slash issue is resolved, but then about.html does a 404. I suppose that's better than the current behavior but I'd prefer if all three options worked individually or redirected to one that does.

If it's relevant, I set a canonical reference in the <head> of my layout template like so:

<link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html',''}}">

And here is my my _site's file tree:

enter image description here

Fifield answered 16/2, 2019 at 21:5 Comment(0)
F
2

According to support at GitHub this is expected behavior in GitHub Pages:

Hello Michael,

Thanks for contacting GitHub Support with your questions about GitHub Pages.

There's is currently no way to change our trailing slash behavior at this time, though I do understand that a situation like this can be quite frustrating.

I'll share your use case with the team for consideration in future improvements. I can't say if or when a change will happen, but your feedback is in the right hands.

Thanks,

Steve @slgraff GitHub Support

Fifield answered 20/2, 2019 at 16:51 Comment(1)
I am 99% sure this is a regression, because this used to work before. As in: I migrated a website from Wordpress in July 2018 and it worked then but it no longer works now. – Heavenward
J
4

Solved: Ran into the same problem and fixed it by updating permalink settings in _config.yml

Add the trailing slash there. URLs missing the trailing slash will redirect to /:name/

https://jekyllrb.com/docs/permalinks/

collections:
  my_collection:
    output: true
    permalink: /:collection/:name/
Janus answered 18/2, 2021 at 23:35 Comment(1)
As I said in the initial issue, this then makes .html extensions 404. – Fifield
F
3

So if you look in the generated _site folder when you build your site locally, you'll see that there should be the following:

_site
  |--about
  |   |--index.html
  |   |
...

Using the permalink /about/ with the / at the end means that Jekyll will create the about folder and then inside create the index.html page. It's called index.html due to historical precedence. Browsers default to looking for this page whenever there isn't a specific file to retrieve.

With that in mind, here's what happens for each of those three options:

  1. /about: the browser is smart enough to know to insert a trailing / and will thus look inside the /about/ folder. You didn't specify a specific file to look for, so it defaults to looking for index.html. It finds index.html and renders it.
  2. /about/: same as above. It looks inside the /about/ folder. Since no specific file was specified, it looks for index.html. It finds index.html and renders it.
  3. /about.html: the browser is looking specifically for a file called about.html located in the root folder. /about/index.html is there, but that is not what the browser is looking for. about.html does not exist which is why it throws the 404.

So, there's no bug. That's just how the browser behaves when you give it trailing / in the url.

Flatworm answered 16/2, 2019 at 21:49 Comment(4)
This is good information, so thank you. To clarify, at the moment I'm not using any permalinks at all. My question is not about the proper use or expectation of permalinks, but rather how to get all of the scenarios a URL could be (no trailing slash, yes trailing slash, and .html extension) to work or redirect to one that does. That may involve permalinks or it may not; isn't super important to me. Seems like a pretty common thing, and it's not happening right now. – Fifield
Since using the /about/ permalink gets the first two scenarios to work. Adding the file /about.html to the project and having it redirect to /about/ would technically allow for all three scenarios to work. So, you would need /about/index.html and /about.html with the second redirecting to the first. You'll have "empty files" that only do redirects, but it does solve your problem. – Flatworm
Yeah I thought about that. I just kind of feel like something else is going on with GitHub Pages, because I feel like this is a recent problem, and a workaround like that shouldn't be necessary. Thanks for the suggestion. – Fifield
Your statements are incorrect: "Browsers default to looking for this (index.html) page " "...the browser is smart enough to know to insert a trailing / and..". It's not the browser but the server implementations doing that or not (depending on config), in the first case it might look if an index.html exist, in the second one through a 301 (permanent redirect) response.. So in this case is either Webrick (when running the site locally) or I believe github pages uses NGINX. – Beadsman
F
2

According to support at GitHub this is expected behavior in GitHub Pages:

Hello Michael,

Thanks for contacting GitHub Support with your questions about GitHub Pages.

There's is currently no way to change our trailing slash behavior at this time, though I do understand that a situation like this can be quite frustrating.

I'll share your use case with the team for consideration in future improvements. I can't say if or when a change will happen, but your feedback is in the right hands.

Thanks,

Steve @slgraff GitHub Support

Fifield answered 20/2, 2019 at 16:51 Comment(1)
I am 99% sure this is a regression, because this used to work before. As in: I migrated a website from Wordpress in July 2018 and it worked then but it no longer works now. – Heavenward
P
0

If you already have cloudlfare installed (for a custom domain + SSL for example), it's easy to add a new rule that redirects the pages with trailing slashes:

Trailing slash removal using Cloudflare

URL: https://example.com/*/

Destination URL: https://example.com/$1

Parik answered 9/1, 2023 at 10:25 Comment(1)
Interesting suggestion, and I assume this solves the problem. I actually was using Cloudfare for a while on my sites, but recently stopped because I only was using it for HTTPS and GitHub has had that functionality natively for a while now. Maybe I'll reconnect it and try this out. Thanks. – Fifield

© 2022 - 2024 — McMap. All rights reserved.