New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

baseurl / base-url: GitHub Pages Project Pages - Relative Links Fail #332

Closed
firemonkeyio opened this Issue May 15, 2011 · 38 comments

Comments

Projects
None yet
@firemonkeyio

firemonkeyio commented May 15, 2011

If you're not using a CNAME and hosting your Project Page on GitHub Pages it's served out of a "project-name" subfolder

http://user-name.github.com/project-name

Relative url's fail:

<a href="/">home</a>

resolves to

http://user-name.github.com/

Another example:

<a href="/blog">blog</a>

resolves to

http://user-name.github.com/blog

when I needed:

http://user-name.github.com/project-name/blog

The workaround I can think of for this is setting a "base-url:" in the _config.yml then put that in front of all href, src, url paths ... need it in .css and .js files, so they need to run through Jekyll (see: http://stackoverflow.com/questions/4305955/can-jekyll-act-over-css-or-js-files)... a "base-url:" is suggested in the wiki here: https://github.com/mojombo/jekyll/wiki/Configuration ... but I can't seem to find anything that explains how this should be implemented within your actual files. e.g.

<a href="{{ site.base-url }}/blog">blog</a>

... am I missing something here? Is there a more elegant solution?

@firemonkeyio

This comment has been minimized.

Show comment
Hide comment
@firemonkeyio

firemonkeyio May 15, 2011

Personally I would prefer it to be shorter since you would need to be typing this A LOT
<a href="{{ site.url }}/blog">

Then on a page you have {{ site.url }} == /project-name and {{ page.url }} == /blog/

firemonkeyio commented May 15, 2011

Personally I would prefer it to be shorter since you would need to be typing this A LOT
<a href="{{ site.url }}/blog">

Then on a page you have {{ site.url }} == /project-name and {{ page.url }} == /blog/

@Kwpolska

This comment has been minimized.

Show comment
Hide comment
@Kwpolska

Kwpolska May 15, 2011

Use the HTML base tag and it will work fine.

Kwpolska commented May 15, 2011

Use the HTML base tag and it will work fine.

@halfninja

This comment has been minimized.

Show comment
Hide comment
@halfninja

halfninja Aug 3, 2011

--base-url was added more as an option for the --server, so that WEBrick can serve your local content from the same /project-name as your project page. But you're right that it would make sense if GitHub Pages could pass a relevant --base-url in, just so that {{ site.baseurl }} is set to a useful value.

halfninja commented Aug 3, 2011

--base-url was added more as an option for the --server, so that WEBrick can serve your local content from the same /project-name as your project page. But you're right that it would make sense if GitHub Pages could pass a relevant --base-url in, just so that {{ site.baseurl }} is set to a useful value.

@fguillen

This comment has been minimized.

Show comment
Hide comment
@fguillen

fguillen commented Sep 24, 2011

+1

@andrewspiers

This comment has been minimized.

Show comment
Hide comment
@andrewspiers

andrewspiers Oct 5, 2011

My links to posts currently look like <a href="{{site.baseurl}}{{post.url}}">{{post.title}}</a> which seems inelegant and took a while to figure out.

Also why is it base-url at the command line and baseurl in the config file?

andrewspiers commented Oct 5, 2011

My links to posts currently look like <a href="{{site.baseurl}}{{post.url}}">{{post.title}}</a> which seems inelegant and took a while to figure out.

Also why is it base-url at the command line and baseurl in the config file?

@shareme

This comment has been minimized.

Show comment
Hide comment
@shareme

shareme Nov 3, 2011

Its simpler to use the config.yml baseurl line to add it as html base in head of html than you never are editing hrefs ever..:)

shareme commented Nov 3, 2011

Its simpler to use the config.yml baseurl line to add it as html base in head of html than you never are editing hrefs ever..:)

@darthdeus

This comment has been minimized.

Show comment
Hide comment
@darthdeus

darthdeus Dec 4, 2011

Is this still unfixed? Even if I add baseurl to my _config.yml, that might work on GitHub, but it will break the site when I running it locally. Is there any way to overcome this?

darthdeus commented Dec 4, 2011

Is this still unfixed? Even if I add baseurl to my _config.yml, that might work on GitHub, but it will break the site when I running it locally. Is there any way to overcome this?

@bilke

This comment has been minimized.

Show comment
Hide comment
@bilke

bilke Dec 6, 2011

I am also interested in a solution...

bilke commented Dec 6, 2011

I am also interested in a solution...

@bilke

This comment has been minimized.

Show comment
Hide comment
@bilke

bilke Dec 7, 2011

@7Andrew: unfortunately your solution does not work in platform redirect files such as:

    ---
    layout: os_redirect
    title: Set Up Git
    description: A quick guide to help you get started with Git
    categories: beginner
    redirect_win: {{site.baseurl}}/win-set-up-git
    redirect_mac: {{site.baseurl}}/mac-set-up-git
    redirect_linux: {{site.baseurl}}/linux-set-up-git
    ---

bilke commented Dec 7, 2011

@7Andrew: unfortunately your solution does not work in platform redirect files such as:

    ---
    layout: os_redirect
    title: Set Up Git
    description: A quick guide to help you get started with Git
    categories: beginner
    redirect_win: {{site.baseurl}}/win-set-up-git
    redirect_mac: {{site.baseurl}}/mac-set-up-git
    redirect_linux: {{site.baseurl}}/linux-set-up-git
    ---
@salzig

This comment has been minimized.

Show comment
Hide comment
@salzig

salzig commented Dec 22, 2011

👍

@rachelslurs

This comment has been minimized.

Show comment
Hide comment
@rachelslurs

rachelslurs Aug 12, 2012

Any solution? I would like to be able to have relative links work in GitHub pages as well as locally.

rachelslurs commented Aug 12, 2012

Any solution? I would like to be able to have relative links work in GitHub pages as well as locally.

@pacebl

This comment has been minimized.

Show comment
Hide comment
@pacebl

pacebl Aug 29, 2012

No solution for this yet?

pacebl commented Aug 29, 2012

No solution for this yet?

@jeffreycrow

This comment has been minimized.

Show comment
Hide comment
@jeffreycrow

jeffreycrow Nov 15, 2012

What I've done to make paths work both locally and on my ghPage is to create a _config.yml file that I then add to my .gitignore where I define a url variable for my local path. Then I use {{ site.url }} in paths to create full absolute urls. However, since the config file doesn't get uploaded when I push to GitHub, the {{ site.url }} is ignored there and the paths stay relative on my ghPage.

I just tried this and it works, but I am still in process of putting my ghPage together so I've only tried it on my index page and my test post.

jeffreycrow commented Nov 15, 2012

What I've done to make paths work both locally and on my ghPage is to create a _config.yml file that I then add to my .gitignore where I define a url variable for my local path. Then I use {{ site.url }} in paths to create full absolute urls. However, since the config file doesn't get uploaded when I push to GitHub, the {{ site.url }} is ignored there and the paths stay relative on my ghPage.

I just tried this and it works, but I am still in process of putting my ghPage together so I've only tried it on my index page and my test post.

@archSeer

This comment has been minimized.

Show comment
Hide comment
@archSeer

archSeer Feb 18, 2013

This is still a big issue for serving html pages in subfolders and linking them to css in root on Github Pages

archSeer commented Feb 18, 2013

This is still a big issue for serving html pages in subfolders and linking them to css in root on Github Pages

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Feb 18, 2013

Member

According to all of the documentation I have, baseurl is used by jekyll --server to serve Jekyll under an arbitrary base url via WEBrick. It doesn't interact with any of the links in your Jekyll source, nor is that configuration added to the site variable in Jekyll.

Member

parkr commented Feb 18, 2013

According to all of the documentation I have, baseurl is used by jekyll --server to serve Jekyll under an arbitrary base url via WEBrick. It doesn't interact with any of the links in your Jekyll source, nor is that configuration added to the site variable in Jekyll.

@archSeer

This comment has been minimized.

Show comment
Hide comment
@archSeer

archSeer Feb 24, 2013

@parkr The problem here is that if you serve a website via Github Pages, the url looks like http://username.github.com/repo/where the repo part acts as a subfolder. Let's say you have a multi-level site: there's pages in the root folder, as well as subfolders containing pages (index.textile and documentation/index.textile), and CSS is stored in the /css/ folder. The way you normally set the url's (and the way it works if your run jekyll --server locally) to the CSS assets is like so:

<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link href="/css/syntax.css" rel="stylesheet" type="text/css">

this makes sense, the browser will look for files under the root/css/, i.e. localhost/css/styles.css But, with Github Pages, what happens is this: http://username.github.com/css/styles.css, while we want `http://username.github.com/repo/css/styles.css... we could make the links relative

<link href="css/reset.css" rel="stylesheet" type="text/css">

which makes the site work for documents in the root, but still breaks for any subfolders.

archSeer commented Feb 24, 2013

@parkr The problem here is that if you serve a website via Github Pages, the url looks like http://username.github.com/repo/where the repo part acts as a subfolder. Let's say you have a multi-level site: there's pages in the root folder, as well as subfolders containing pages (index.textile and documentation/index.textile), and CSS is stored in the /css/ folder. The way you normally set the url's (and the way it works if your run jekyll --server locally) to the CSS assets is like so:

<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link href="/css/syntax.css" rel="stylesheet" type="text/css">

this makes sense, the browser will look for files under the root/css/, i.e. localhost/css/styles.css But, with Github Pages, what happens is this: http://username.github.com/css/styles.css, while we want `http://username.github.com/repo/css/styles.css... we could make the links relative

<link href="css/reset.css" rel="stylesheet" type="text/css">

which makes the site work for documents in the root, but still breaks for any subfolders.

@oblitum

This comment has been minimized.

Show comment
Hide comment
@oblitum

oblitum May 26, 2013

@parkr I'm suffering from this issue too, just as @archSeer described. I've a custom domain properly setup at my older user GitHub page. Now I'm trying out a Jekyll project page, first I've checked that username.github.io/project was being redirected to customdomain/project and things were messed up in this fresh Jekyll page because baseurl wasn't configured for such, so everything was referring to customdomain/, then the solution I've found was to change baseurl to /project and fix source files, for example:

<!-- Custom CSS -->
<link rel="stylesheet" href="{{site.baseurl}}/css/main.css">

instead of previous

<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">

but still, this solved things partially, at the index page there's:

{% for post in site.posts %}
  <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}

When I load the page, {{ post.url }} get expanded to customdomain/post-page instead of customdoman/project/post-page.

So, how do I config a simple GitHub Pages hosted Jekyll new project site that get all this fixed?

oblitum commented May 26, 2013

@parkr I'm suffering from this issue too, just as @archSeer described. I've a custom domain properly setup at my older user GitHub page. Now I'm trying out a Jekyll project page, first I've checked that username.github.io/project was being redirected to customdomain/project and things were messed up in this fresh Jekyll page because baseurl wasn't configured for such, so everything was referring to customdomain/, then the solution I've found was to change baseurl to /project and fix source files, for example:

<!-- Custom CSS -->
<link rel="stylesheet" href="{{site.baseurl}}/css/main.css">

instead of previous

<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">

but still, this solved things partially, at the index page there's:

{% for post in site.posts %}
  <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}

When I load the page, {{ post.url }} get expanded to customdomain/post-page instead of customdoman/project/post-page.

So, how do I config a simple GitHub Pages hosted Jekyll new project site that get all this fixed?

@oblitum

This comment has been minimized.

Show comment
Hide comment
@oblitum

oblitum May 26, 2013

I got {{ post.url }} fixed by chaging it to {{ site.baseurl }}{{ post.url }}, now it seems the only issue lasting is that locally, jekyll serve doesn't work after all changes, and I can't browse it for tests.

Even then, I'm not sure it was the proper way to fix this.

oblitum commented May 26, 2013

I got {{ post.url }} fixed by chaging it to {{ site.baseurl }}{{ post.url }}, now it seems the only issue lasting is that locally, jekyll serve doesn't work after all changes, and I can't browse it for tests.

Even then, I'm not sure it was the proper way to fix this.

@oblitum

This comment has been minimized.

Show comment
Hide comment
@oblitum

oblitum May 26, 2013

ok, I figured it out for serving locally, I must put the ending slash: http://localhost:4000/project/ (I was doing http://localhost:4000/project).

So, everything is working, the only thing that I find cumbersome now is that I must put {{ site.baseurl }} before everything. Why baseurl configuration solely is not enough to configure / project wide?

oblitum commented May 26, 2013

ok, I figured it out for serving locally, I must put the ending slash: http://localhost:4000/project/ (I was doing http://localhost:4000/project).

So, everything is working, the only thing that I find cumbersome now is that I must put {{ site.baseurl }} before everything. Why baseurl configuration solely is not enough to configure / project wide?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 30, 2013

So, what is the solution?

ghost commented May 30, 2013

So, what is the solution?

@mjswensen

This comment has been minimized.

Show comment
Hide comment
@mjswensen

mjswensen Jun 5, 2013

Contributor

I finally figured out the trick, if you're looking for a solution with the standard URL for GitHub Pages (username.github.io/project-name/). Here's what to do:

In _config.yml, set the baseurl option to /project-name -- note the leading slash and the absence of a trailing slash.

Now you'll need to change the way you do links in your templates and posts, in the following two ways:

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 at localhost:4000 normally (without /project-name getting in there to muck everything up): 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.

Contributor

mjswensen commented Jun 5, 2013

I finally figured out the trick, if you're looking for a solution with the standard URL for GitHub Pages (username.github.io/project-name/). Here's what to do:

In _config.yml, set the baseurl option to /project-name -- note the leading slash and the absence of a trailing slash.

Now you'll need to change the way you do links in your templates and posts, in the following two ways:

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 at localhost:4000 normally (without /project-name getting in there to muck everything up): 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.

@aseemk

This comment has been minimized.

Show comment
Hide comment
@aseemk

aseemk Jun 5, 2013

Excellent solution, @mjswensen. Thorough and helpful. Thanks.

aseemk commented Jun 5, 2013

Excellent solution, @mjswensen. Thorough and helpful. Thanks.

@mjswensen

This comment has been minimized.

Show comment
Hide comment
@mjswensen

mjswensen Jun 5, 2013

Contributor

@aseemk No sweat!

Contributor

mjswensen commented Jun 5, 2013

@aseemk No sweat!

@oblitum

This comment has been minimized.

Show comment
Hide comment
@oblitum

oblitum Jun 5, 2013

I doesn't seems different from what I've gone through, except that I never need to use --baseurl '', just jekyll serve works for me. Also, I'm starting up from jekyll-bootstrap themes that have links already done right as @mjswensen described.

oblitum commented Jun 5, 2013

I doesn't seems different from what I've gone through, except that I never need to use --baseurl '', just jekyll serve works for me. Also, I'm starting up from jekyll-bootstrap themes that have links already done right as @mjswensen described.

@sethburtonhall

This comment has been minimized.

Show comment
Hide comment
@sethburtonhall

sethburtonhall Jul 9, 2013

@mjswensen Thanks for the solution. That worked.

on a different note, what a PITA.

sethburtonhall commented Jul 9, 2013

@mjswensen Thanks for the solution. That worked.

on a different note, what a PITA.

@parkr

This comment has been minimized.

Show comment
Hide comment
@parkr

parkr Jul 9, 2013

Member

@mjswensen Would you want to write that up and submit a PR to the docs site for us?

Member

parkr commented Jul 9, 2013

@mjswensen Would you want to write that up and submit a PR to the docs site for us?

benjvi added a commit to benjvi/benjvi.github.io that referenced this issue Jun 13, 2015

DirtyF added a commit to sudweb/2016 that referenced this issue Dec 24, 2015

PyrApple added a commit to EVERTims/evertims.github.io that referenced this issue May 28, 2016

PyrApple added a commit to EVERTims/evertims.github.io that referenced this issue May 28, 2016

PyrApple added a commit to EVERTims/evertims.github.io that referenced this issue May 28, 2016

samuelbalogh added a commit to samuelbalogh/samuelbalogh.github.io that referenced this issue May 28, 2016

@almgwary

This comment has been minimized.

Show comment
Hide comment
@almgwary

almgwary Aug 23, 2016

it work with me when index.html file is in the root directory

almgwary commented Aug 23, 2016

it work with me when index.html file is in the root directory

@almgwary

This comment has been minimized.

Show comment
Hide comment
@almgwary

almgwary Aug 23, 2016

here example [ https://github.com/almgwary/almgwary_gallary/blob/gh-pages/index.html ]
file are loaded

almgwary commented Aug 23, 2016

here example [ https://github.com/almgwary/almgwary_gallary/blob/gh-pages/index.html ]
file are loaded

tomelam added a commit to Mashweb/zen that referenced this issue Aug 30, 2016

This:
http://stackoverflow.com/questions/16316311/github-pages-and-relative-paths
led me to this (almost didn't notice it!):
jekyll/jekyll#332 (comment)

This works on localhost. Now I'll see if it works on github.io.

@susanjrobertson susanjrobertson referenced this issue Sep 9, 2016

Closed

Perform QA on site #132

22 of 28 tasks complete

i2000s added a commit to i2000s/en that referenced this issue Nov 22, 2016

@gonsie gonsie referenced this issue Dec 2, 2016

Merged

Project links2 #4

boykoc pushed a commit to boykoc/should-i-start-a-startup that referenced this issue Jan 15, 2017

kratsg added a commit to cd2bit/deafchi.github.io that referenced this issue Jan 25, 2017

@ghost ghost referenced this issue Mar 6, 2017

Closed

Website Rewrite #10

11011110 added a commit to 11011110/blog that referenced this issue Apr 11, 2017

bbgvisualjournalist added a commit to bbgvisualjournalist/circumvention that referenced this issue Apr 17, 2017

electron0zero added a commit to electron0zero/ingenuity17 that referenced this issue Aug 25, 2017

Fix #52 - Broken Links
- When we moved from Custom Domain to Github Project few links were not working

- Fixed those links
- check jekyll/jekyll#332 to know how this fix works
@whoisjorge

This comment has been minimized.

Show comment
Hide comment
@whoisjorge

whoisjorge Aug 26, 2017

This simple set up works for me:
<a href="{{ "/sitemap" | relative_url }}">sitemap</a>

It will redirect to http://<absolute&belovedURI>/sitemap

whoisjorge commented Aug 26, 2017

This simple set up works for me:
<a href="{{ "/sitemap" | relative_url }}">sitemap</a>

It will redirect to http://<absolute&belovedURI>/sitemap

@jekyll jekyll locked and limited conversation to collaborators Aug 26, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.