Trailing slashes in Jekyll + GitHub Pages site cause 404

Question

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:

Answer 1

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:

/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.
/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.
/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.

Answer 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

Answer 3

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/

Answer 4

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:

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

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

Trailing slashes in Jekyll + GitHub Pages site cause 404

Question

4 answers

solution1
2 2019-02-16 21:49:48

solution2
2 ACCPTED 2019-02-20 16:51:34

solution3
1 2021-02-18 23:35:54

solution4
0 2023-01-09 10:25:04

Trailing slashes in Jekyll + GitHub Pages site cause 404

Question

4 answers

solution1 2 2019-02-16 21:49:48

solution2 2 ACCPTED 2019-02-20 16:51:34

solution3 1 2021-02-18 23:35:54

solution4 0 2023-01-09 10:25:04

solution1
2 2019-02-16 21:49:48

solution2
2 ACCPTED 2019-02-20 16:51:34

solution3
1 2021-02-18 23:35:54

solution4
0 2023-01-09 10:25:04