CSS rendering locally but 404ing remotely

Help
1

I built a Jekyll site by extending Solo, and while it works fine locally, the CSS fails to load when I serve it on Linode:

[2017-02-26 14:44:30] ERROR/css/main.css’ not found.`

Here’s the structure of my site folder:

├── 404.html
├── LICENSE
├── _config.yml
├── _includes
│   ├── head.html
│   └── scripts.html
├── _layouts
│   └── default.html
├── _sass
│   ├── _normalize.scss
│   ├── _solo.scss
│   └── _syntax.scss
├── _site
│   ├── 404.html
│   ├── LICENSE
│   ├── css
│   │   └── main.css
│   └── index.html
├── css
│   └── main.scss
└── index.md

Any idea why this could be failing?

EDIT: Might be worth noting that the host OS is Ubuntu 14.04 and I’m invoking Jekyll server with sudo jekyll --server 80

2

Could You show us the contents of Your _config.yml if possible?

3

Sure thing:

# Site settings
title: Cool Site
tag_text: Cool Site
description: So good

# Build settings
markdown: kramdown
exclude: ["README.md"]
sass:
  style: compressed
4

Is this error displayed while serving or building? I.e can You build the page successfully without serving in Your Linode VM?

5

Only while serving. Here’s the output of jekyll build:

/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': iconv will be deprecated in the future, use String#encode instead.
Configuration from /home/jeff/sites/cool_site/_config.yml
Building site: /home/jeff/sites/cool_site -> build
Successfully generated site: /home/jeff/sites/cool_site -> build
6

Hmm okay, but if You try to access css/main.css directly from browser does it still give 404? Also, check if the stylesheet href path in the default layout is correct (e.g css/main.css/ not /css/main.css - no prepending slash).

7

Yeah, still 404s if I ask for it directly. Default layout looks good, I think:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="{{ site.description }}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ site.title }}</title>
  <link rel="stylesheet" href="css/main.css">
{% include head.html %}
</head>
<body>
  <div class="container">
    <h1><a href="./">{{ site.tag_text }}</a></h1>
    {{ content }}
  </div>
{% include scripts.html %}
</body>
</html>
8

Is the structure You pasted from Linode VM? Check if there’s even an _site/css/main.css file.

11

There is a _site/css/main.css file, and for whatever reason it serves properly when running locally. Could it be some kind of permissions thing? Here’s the content of main.css fwiw:

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */@import url(//fonts.googleapis.com/css?family=Inconsolata:400,700|Montserrat:700);article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html{font:16px/1.5 Inconsolata, sans-serif}@media (min-width: 30rem){html{font-size:20px}}body{margin:2rem 0 5rem;color:#333}@media (min-width: 30rem){body{margin-top:5rem}}a{color:#0074d9;text-decoration:none}a:hover,a:focus{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-family:Montserrat, sans-serif;margin:0 0 0.5rem -0.1rem;line-height:1;color:#111;text-rendering:optimizeLegibility}h1{font-size:2.5rem;margin-bottom:1rem}@media (min-width: 30rem){h1{font-size:3rem;margin-bottom:3rem}}h1 a{color:inherit}h2{margin-top:2rem;font-size:1.25rem;margin-bottom:0.75rem}@media (min-width: 30rem){h2{margin-top:2.5rem;font-size:1.5rem;margin-bottom:1rem}}h3,h4,h5,h6{margin-top:1.5rem;font-size:1rem;text-transform:uppercase}p,ul,ol,dl,table,pre,blockquote{margin-top:0;margin-bottom:1rem}ul,ol{padding-left:1.5rem}dd{margin-left:1.5rem}blockquote{margin-left:0;margin-right:0;padding:.5rem 1rem;border-left:.25rem solid #ccc;color:#666}blockquote p:last-child{margin-bottom:0}hr{border:none;margin:1.5rem 0;border-bottom:1px solid #ccc;position:relative;top:-1px}.container img,.container iframe{max-width:100%}.container img{margin:0 auto;display:block}table{width:100%;border:1px solid #ccc;border-collapse:collapse}td,th{padding:.25rem .5rem;border:1px solid #ccc}pre,code{font-family:inherit;background-color:#eee}pre{padding:.5rem 1rem;font-size:0.8rem}code{padding:.1rem .25rem}pre>code{padding:0}.container{max-width:30rem;margin:0 auto;padding:0 1rem}.hll{background-color:#ffc}.c{color:#999}.err{color:#AA0000;background-color:#faa}.k{color:#006699}.o{color:#555}.cm{color:#0099FF;font-style:italic}.cp{color:#099}.c1{color:#999}.cs{color:#999}.gd{background-color:#FFCCCC;border:1px solid #c00}.ge{font-style:italic}.gr{color:red}.gh{color:#003300}.gi{background-color:#CCFFCC;border:1px solid #0c0}.go{color:#aaa}.gp{color:#000099}.gu{color:#003300}.gt{color:#9c6}.kc{color:#006699}.kd{color:#006699}.kn{color:#006699}.kp{color:#069}.kr{color:#006699}.kt{color:#007788}.m{color:#f60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#00AA88}.no{color:#360}.nd{color:#99f}.ni{color:#999999}.ne{color:#CC0000}.nf{color:#c0f}.nl{color:#99f}.nn{color:#00CCFF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000000}.w{color:#bbb}.mf{color:#f60}.mh{color:#f60}.mi{color:#f60}.mo{color:#f60}.sb{color:#c30}.sc{color:#c30}.sd{color:#CC3300;font-style:italic}.s2{color:#c30}.se{color:#CC3300}.sh{color:#c30}.si{color:#a00}.sx{color:#c30}.sr{color:#3aa}.s1{color:#c30}.ss{color:#fc3}.bp{color:#366}.vc{color:#033}.vg{color:#033}.vi{color:#033}.il{color:#f60}.css .o,.css .o+.nt,.css .nt+.nt{color:#999}

12

I take it back, for whatever reason the structure on my linode is showing main.scss instead of main.css. Also just noticed that my linode version of jekyll is 0.11.2 and my mac version is 3.x. When I try to apt-get upgrade jekyll I’m told that it’s already on the latest version.

13

I’d recommend You to install the Jekyll via bundler, then You can get the newest release.

14

OK, did that and got ruby 2.3.1 installed with rvm. Now when I try to run jekyll serve --port 80 I get permission denied because I’m not root. If I try sudo jekyll serve --port 80 I get sudo: jekyll: command not found. Do you know how I can make my rvm stuff accessible to sudo?

15

Finally got it working by moving to rbenv and following the directions here, including installing ruby-build so that my rbenv rubies were accessible to sudo. Thanks for the help!

16

Good You got everything working :slight_smile: