0

I'm getting started building out a blog with Middleman using the middleman-blog extension. Everything is working great so far on the home page. The problem occurs when I click on a link to see the full blog post. The full blog post page has no CSS being applied to it. After further inspection, I am receiving a 404 error. I fixed it on Dev Tools by moving 3 levels up in my CSS link href like so:

BEFORE (works in Home Page but not in Article pages)

<link rel="stylesheet" href="stylesheets/global.sass">

AFTER (moving two levels up no longer gives me a 404)

<link rel="stylesheet" href="../../../stylesheets/global.sass">

My question is: What do I need to modify so that Article Pages look for the CSS 3 levels up while the home page remains intact?

Daniel Hedberg
  • 5,677
  • 4
  • 36
  • 61
rvazquez
  • 687
  • 1
  • 8
  • 13

1 Answers1

1

In your case, the easiest way would be to use webroot-relative paths.

To recap, you're using a regular relative path...

<link rel="stylesheet" href="stylesheets/global.sass">

If your page is at http://example.com/index.html, then the browser will look for http://example.com/stylesheets/global.sass.

But if your page is at http://example.com/blogs/2013/03/20/blogpost.html, the browser will look for http://example.com/blogs/2013/03/20/stylesheets/global.sass

Now, the solution...

If you add a slash to the beginning of the path, you make that relative path into a webroot-relative path. The web browser will start looking for the file at the webroot...

<link rel="stylesheet" href="/stylesheets/global.sass">

So, regardless of whether your page is at http://example.com/index.html, http://example.com/blogs/2013/03/20/blogpost.html or http://example.com/a/b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/page.html, the browser will, in all cases, look for the file at http://example.com/stylesheets/global.sass.

The Adobe Dreamweaver documentation on linking and navigation explains this a bit more completely.

mparker17
  • 413
  • 5
  • 14
  • It's also possible to make [protocol-relative paths](http://paulirish.com/2010/the-protocol-relative-url/), which can help avoid "this page contains both secure and non-secure elements" warnings being shown to users. – mparker17 Mar 20 '13 at 16:40
  • That's exactly my problem and a perfect solution for it. Thank you so much! – rvazquez Mar 20 '13 at 16:44