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