GitHub pages and relative paths
Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include
<link href="assets/css/common.css" rel="stylesheet">
in an HTML document at http://www.foo.com/bar/doc.html
, the link to assets/css/common.css
will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html
), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css
, not to http://www.foo.com/assets/css/common.css
as you claim.
For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">
. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css
, i.e. it does include the repo name.
You'll need to use Jekyll.
Copying verbatim from the relevant documentation:
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.
In
_config.yml
, set thebaseurl
option to/project-name
– note the leading slash and the absence of a trailing slash.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”).When doing permalinks or internal links, do it like this:
{{ site.baseurl }}{{ post.url }}
– note that there is no slash between the two variables.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 atlocalhost:4000
normally (without /project-name at the beginning):jekyll serve --baseurl ''
This way you can preview your site locally from the site root on localhost, but when GitHub generates your pages from the
gh-pages
branch all the URLs will start with/project-name
and resolve properly.
(Apparently someone figured this out only a few months ago.)