Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GitHub pages and relative paths

Tags:

html

github

I have created a gh-pages branch for a project that I am working on at GitHub.

I use Sublime text to author the website locally and my problem is that when this is pushed to GitHub, all the links to javascrips, images, and css files are invalid.

For instance, I have this in my head section.

<link href="assets/css/common.css" rel="stylesheet"> 

This works great locally, but it does not work from GitHub as the links are not resolved using the repository name as part of the URL.

It asks for:

http://[user].github.io/assets/css/common.css 

when it should have been asking for:

http://[user].github.io/[repo]/assets/css/common.css. 

I could of course put the repo name as part of the URL, but that would prevent my site to work locally during development.

Any idea how to deal with this?

like image 445
seesharper Avatar asked May 01 '13 10:05

seesharper


People also ask

Why are images not loading in GitHub Pages?

The reason the images on your GitHub Pages site will not display is because you're trying to call to the photos in a directory that does not exist. For example, in lasagna. html , you're trying to call to /images/lasagna. html , which does not exist within the folder that lasagna.

What is base URL in GitHub?

When you deploy to GitHub Pages, the base URL of your website has the following structure: https://{org}.github.io/{repo} . A subdomain is created for your GitHub organization and your repository's name is appended as a fixed path.

What is URL for GitHub Pages?

The GitHub Pages repository URL is always https://{userid}.github.io/{reponame} The GitHub Pages URL is based on the GitHub repo URL, and takes the format https://{userid}.github.io/{reponame} . The moment you use it, GitHub Pages will generate a website based on the contents of your repo.

Can GitHub Pages have multiple pages?

GitHub Pages' automatic generator only generates one page. You can add the new file directly, github page publishes all data (including data inside the subfolders) for you.


2 Answers

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.

  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 ''

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

like image 118
Anubhav C Avatar answered Sep 21 '22 15:09

Anubhav C


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.

like image 34
Ivan Zuzak Avatar answered Sep 19 '22 15:09

Ivan Zuzak