Build function mangling some key links

#1

In my tag I have this code:

  <!-- STYLESHEETS, user & other -->
  <%= stylesheet_link_tag :bootstrap, :TDsite %>     
    
  <!-- javascript -->
  <%= javascript_include_tag :bootstrap, :docs, :jquery  %>

Accessing the compiled webpage from the development server, all is well, but when I run a build, the link targets are said to be “undefined”. Looking at the HTML I see that an extra “/” is added to the links:

  <!-- STYLESHEETS, user & other -->
  <link href="/stylesheets/bootstrap.css" rel="stylesheet" /><link href="/stylesheets/TDsite.css" rel="stylesheet" />     
    
  <!-- javascript -->
  <script src="/javascripts/bootstrap.js"></script><script src="/javascripts/docs.js"></script><script src="/javascripts/jquery.js"></script>

This is also visible in the HTML shown by the development server, but for some reason its not a problem there, as the page renders fine. In any case the links, as shown are NOT correct and shouldn’t work. I cannot figure out why this is happening, and so cannot fix the problem.

Can anyone help me with this? I’m very new to Middleman, and there is much I have yet to learn. I searched the documentation and could not find so much as a clue as to why this is happening.

[
Obviously, putting the links into the layout in their final form should work fine, and does, with both development server output and the build -

<link href="stylesheets/bootstrap.css" rel="stylesheet">
<link href="stylesheets/TDsite.css" rel="stylesheet">

]

CSS 404 error on build
#2

Are you using Pretty Urls (activate :directory_indexes) and/or setting a custom source for the css files (set :css_dir, 'assets/css')?

#3

Sorry to be slow responding. I work on my website when I can grab some time, and last week was not good.

Regarding your question: No I am not. I’m using the default config.rb.

I’m likely just not understanding something basic, but frankly I don’t see the virtue of this code in the layout file:

<%= stylesheet_link_tag :site %>
<%= javascript_include_tag :all %>

and replaced it with the standard <link rel="stylesheet"... and <script src=... code. Simple fix for my problem. Feel free to educate me if what I did is a regression of some kind. I’m always eager to learn better ways of doing things.

Thanks for your response.

#4

Sorry I threw in Pretty Urls when I was meaning Relative Assets.

Go to your config.rb and remove the # before activate :relative_assets. Notice how it’s inside the configure :build do block. That means specific configuration for the building process, and this way you are telling Middleman that you want your assets paths to be relative instead of absolute.

The virtue of the <%= stylesheet_link_tag :site %> way is that you can set your own folder structure for the assets (images, styles, scripts, etc.) and then forget about it, since Middleman will always find them (and it’s shorter, wich is nice).

#5

I have exactly the same problem as @TomCloyd despite activate :relative_assets. The problem with relative links to stylesheets seems to appear only with blog article pages, not with other pages generated from the same template. It doesn’t seem to be an issue of the stylesheet_link_tag helper:

In my config.rb I have the following settings:

set :relative_links, true

activate :blog do |blog|
  blog.prefix = "blog"
  blog.sources = "{year}-{month}-{day}-{title}.html"
  blog.permalink = "{title}.html"
  blog.layout = "blog-layout"
end

configure :build do
  activate :relative_assets
end

A simplified version of my directory structure looks like this:

source
+-- index.html.erb
+-- blog.html.erb
+-- business.html.erb
+-- blog
¦   +-- 2016-02-01-article-1.html.markdown
¦   +-- 2016-02-02-article-2.html.markdown
¦   +-- archiv.html.erb
+-- business
¦   +-- information.html.markdown
¦   +-- kontakt.html.markdown
+-- layouts
¦   +-- blog-layout.erb
¦   +-- biz-layout.erb
+-- stylesheets
+-- all.css

blog.html and everything in the blog subdirectory gets generated with the template blog-layout.erb. Everything else with biz-layout.erb. In both layouts I link to the stylesheet with this tag:

<%= stylesheet_link_tag :all %>

Now, the strange thing is that Middleman build renders all the stylesheet links correctly except for the blog article pages.

In blog.html the relative link is correct:
<link href="stylesheets/all.css" rel="stylesheet" />

In blog/archiv.html the relative link is also correct:
<link href="../stylesheets/all.css" rel="stylesheet" />

But in blog/2016-02-01-article-1.html the relative link is incorrect:
<link href="/stylesheets/all.css" rel="stylesheet" />
Instead of:
<link href="../stylesheets/all.css" rel="stylesheet" />

It doesn’t matter, which of the following tags I use in the layout templates, as all of them produce exactly the same wrong result:

<%= stylesheet_link_tag :all %>
<%= stylesheet_link_tag 'stylesheets/all' %>
<link href="/stylesheets/all.css" rel="stylesheet" />

As a workaround for testing reasons I just put two tags into blog-layout.erb, so at least one of them will be found:

<%= stylesheet_link_tag :all %>
<link href="../stylesheets/all.css" rel="stylesheet" />

Middleman server renders all the relative links correctly.

#6

Are you setting the stylesheets folder yourself or leaving the default? I have set :css_dir, 'assets/css' (and the rest of asset folders) after the blog config block, and that’s probably the only difference I see between your config and mine.

1 Like
#7

Hey, that was really helpful!
I had set :css_dir, 'stylesheets'but before the blog config block. Putting it after actually solved the problem.
Thank you so much for pointing me to the solution.

1 Like