Bootstrap CSS location and github pages

Question

I'm trying to upload a webpage to github pages using jekyll and want to make sure all my pages and posts 'see' the bootstrap 3 stylesheets, which in my working directory is simply in a css folder in the root directory: ./css/

If I use the following in my home page:

<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="./css/custom.css" type="text/css"/>

Then the homepage (index.html in root) loads and is formatted correctly, however if I have pages located in other places or folders, they wont see this because ./ is relative to the current directory - as far as my understanding goes. I tried to get around this issue with Jekyll:

<link href="{{site.url}}/css/bootstrap.css" rel="stylesheet">
<link href="{{site.url}}/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="{{site.url}}/css/custom.css" type="text/css"/>

Which results in:

<link href="ward9250.github.io/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="ward9250.github.io/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="ward9250.github.io/HybRIDS/css/custom.css" type="text/css"/>

However if this is in the homepage it does not load correctly formatted with any of the settings or styles of bootstrap or my custom modifications and overrides.

What am I doing wrong? How can I fix this so all my pages, no matter where they are can see my stylesheets.

Thanks, Ben.

EDIT

I've just found something strange - if I set my HTML to:

<link href="/HybRIDS/css/bootstrap.css" rel="stylesheet">
<link href="/HybRIDS/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="/HybRIDS/css/custom.css" type="text/css"/>

Then the page loads correctly. However I thought we were to avoid absolute paths like /?

Answer 1

You probably have solved the issue, but to future readers: Yes, the solution is to include direct path due to github project pages' url structure. The following excerpt is taken out from Jekyll docs.

Project Page URL Structure

Sometimes it’s nice to preview your Jekyll site before you push your gh-pages branch to GitHub. However, the subdirectory-like URL structure GitHub uses for Project Pages complicates the proper resolution of URLs. Here is an approach to utilizing the GitHub Project Page URL structure (username.github.io/project-name/) whilst maintaining the ability to preview your Jekyll site locally.

1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.
2. When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css – note the slash immediately following the variable (just before “path”).
3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between the two variables.
4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty string to the --baseurl option, so that you can view everything at localhost:4000 normally (without /project-name at the beginning): jekyll serve --baseurl ''