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?

Azotize

why don't you just eliminate that weird <base url thing and just move the main folder...? (since it's not a dynamic site, I don't get it... your base url is the one where your current file resides...) – Sentiment

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. – Azotize

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. – Azotize

Answer 1

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

Burnish

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 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. – Azotize

I've always heard urls with a leading slash (/) termed root relative urls. In addition, there's protocol relative (sometimes called scheme relative) urls: <script src="//domain.com/... – Depolarize

@Azotize you can use the <base> 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. – Burnish

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. – Azotize

Answer 2

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:

1. You're using .erb files for your source pages
2. 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!

Lindo