Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trailing slashes in Jekyll + GitHub Pages site cause 404

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

  • https://michaeledelstone.com/about
  • https://michaeledelstone.com/about/
  • https://michaeledelstone.com/about.html

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

like image 374
Michael Edelstone Avatar asked Feb 16 '19 21:02

Michael Edelstone


2 Answers

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.

like image 99
DC.Azndj Avatar answered Oct 13 '22 20:10

DC.Azndj


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/
like image 43
Charlie Triplett Avatar answered Oct 13 '22 20:10

Charlie Triplett