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?

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

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!