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:
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With