Ruby Rack Heroku: No CSS styling when serving a static site

Question

I've been attempting to deploy a static site of HTML, CSS, font, and image files with Ruby Rack ( https://devcenter.heroku.com/articles/static-sites-ruby ). I'm running it locally and the site's HTML displays in Chrome but CSS assets don't seem to be loading and applied to the HTML. Nor do images appear.

I've been focusing on config.ru but this might not be the issue:

  use Rack::Static,
  :urls => ["/images", "/fonts", "/css"],
  :root => "public"

  run lambda { |env|
  [
    200,
    {
      'Content-Type'  => 'text/html',
      'Cache-Control' => 'public, max-age=86400'
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

I've used both the WEBrick and Thin servers and there's almost no difference in result (Thin will serve SVGs).

My directory structure looks like this (there's a link to fees.html from within index.html but when I click on this "fees.html" link, the fees.html doesn't load - index.html is displayed instead):

- site
  |- config.ru
  |- Gemfile
  |- Gemfile.lock
  |- public
    |- index.html
    |- fees.html
    |- css
    |- fonts
    |- images

Question : Although I've used Heroku to deploy apps in the past, I'm new to deploying static sites. Should I change something in config.ru or might the issue lurk elsewhere?

EDIT I should mention that the site itself displays correctly (styling correctly applied, all assets included) when I open it in Chrome without using Ruby Rack.

EDIT 2 index.html :

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <!-- CSS -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
      <main>
        <section class="tech" id="nextsection">
          <div class="tech-row">
            <div class="tech-column">
              <img src="images/red_icon.svg" alt="Your Cash">
              <h4>Your Cash</h4>
              <p>Seed your retirement with recurring payments</p>
            </div>
           </div>
       </section>
      </main>
    </body>
</html>

Edit 3 Here's the repo with code . When I download and open locally in Chrome, it displays correctly.

Answer 1

Set config.serve_static_assets = true in config/production.rb . You can alternatively add Heroku's rails_12factor gem which does this for you, among other things.

Ruby Rack Heroku: No CSS styling when serving a static site

Question

1 answers

solution1
0 ACCPTED 2017-01-17 16:43:59

Ruby Rack Heroku: No CSS styling when serving a static site

Question

1 answers

solution1 0 ACCPTED 2017-01-17 16:43:59

solution1
0 ACCPTED 2017-01-17 16:43:59