How do I create root-relative links in a static site?

Question

When building a static HTML site, you can set the base url like so <base url="http://localhost:8888/mysite" />. Supposedly when you insert, say, an image, you can do so from that base url like so <img src="/img/logo.png" />, which is equivalent to <img src="http://localhost:8888/mysite/img/logo.png" />

My problem is that these relative links don't work when I move the site around, which is a pain because I'm trying to share it with someone on Dropbox. I thought I could just chage the base url to <base url="http://dl.dropbox.com/u/xxxxxxxx/mysite" />, but the image links are looking here: <img src="http://dl.dropbox.com/img/logo.png" /> instead of the full base URL I set in the head.

Why is this?

That's what I thought too, but if I remove the base tag and drag my website over to an arbitrary folder like the desktop and hover over a link, it looks for it in `http://localhost/assets/img`. It should be something like `~/Desktop/website_folder/assets/img`. — sea_monster, Apr 18 '12 at 14:22
No matter what level of hierarchy I'm at in the site, I want to be able to call an image from `/assets/img/foo.png`. If I treat each page as its own base, I'll have to create relative links and have to worry about this situation: `../../../../../assets/img/foo.png`. — sea_monster, Apr 18 '12 at 14:25

score 15 · Accepted Answer · edited Jul 17 '17 at 04:00

15

Lose the leading / to make it a relative URL:

<img src="img/logo.png" />

There are 3 types of URL:

Fully Qualified, e.g. http://example.org/path/to/file
Absolute, e.g. /path/to/file (assuming the link comes from any page in the example.org domain)
Relative, e.g. path/to/file (assuming the link comes from the root (/) "folder" or there is a base URL http://example.org/) or to/file (assuming the link comes from within the 'path' "folder" or the base URL is http://example.org/path/)

edited Jul 17 '17 at 04:00

Nisse Engström

4,738
23
27
42

answered Apr 18 '12 at 04:15

tobyodavies

27,347
5
42
57

Using relative URLs gets a lot stinkier when creating a site with a complex hierarchy. Depending on the page, I would have to use `path/to/file` or `../path/to/file` or `../../path/to/file`, which I would like to avoid. I'm using [Middleman](http://middlemanapp.com) as a static site generator to pull in the links for the main nav, so they need to look the name on every page of the site. – sea_monster Apr 18 '12 at 14:12
3

I've always heard urls with a leading slash (`/`) termed _root relative urls_. In addition, there's _protocol relative_ (sometimes called scheme relative) urls: ` – steveax Apr 18 '12 at 21:29
1

@sea_monster you can use the `` tag to solve that particular problem: have a base url the same in each page, then use `img/logo.png' then it's one edit per page to move the site. – tobyodavies Apr 19 '12 at 05:59
1

Thanks, tobyodavies, that fixed my problem. When you set a base URL you need to make sure that you don't include a leading (`/`) before your assets. – sea_monster Apr 19 '12 at 15:02

score 2 · Answer 2 · edited Apr 01 '16 at 02:03

I'm aware that I'm a little late to the game on this one, but you should really be using Rails asset tags instead of raw HTML here.

For instance, instead of using:

<img src="/img/logo.png" />

You should use:

<%= image_tag 'logo.png' %>

Assuming that:

You're using .erb files for your source pages
You've set the image asset path to /img/ in your config.rb file

Alternately, you could reference CSS with:

<%= stylesheet_link_tag 'file.css' %>

Javascript files can be included with:

<%= javascript_include_tag 'file.js' %>

Since Middleman allows you to control whether or not assets are referenced relatively (by uncommenting some lines in config.rb), using Rails asset tags make much more sense than static HTML ones. I highly recommend switching if you haven't already done so. If you have any further questions about ay of these tags or the ERB syntax, feel free to ask away on here!

How do I create root-relative links in a static site?

2 Answers2

Linked