CSS is not loading on staging server

Question

I'm quite new to server config, so this might be a simple mistake. I have a local environment setup on my computer that works just fine. I uploaded my project to my staging server at AWS and the only thing that loads is the index.html in my craft folder. For some reason it gives me a "The requested URL /css/bootstrap.min.css was not found on this server" error for every folder or file I have inside of public folder.

<?php

/**
* General Configuration
*
* All of your system's general configuration settings go in here.
* You can see a list of the default settings in craft/app/etc/config/defaults/general.php
*/

return array(
);

My craft folder in my staging is at: /var/www/craft-portfolio/

My Public folder is at: /var/www/craft-portfolio

The web root is the public folder that is /var/www/craft-portfolio/public

Answer 1

There are multiple ways to set the URLs to your files. I don't know if I got your folder structure right. But let's suppose that your web root is set to
/var/www/craft-portfolio/public/,

your CSS folder is
/var/www/craft-portfolio/public/css/

and your Craft folder (actually not relevant) is
/var/www/craft-portfolio/craft/.

Root-relative URL

Root-relative URLs start with a / character.

<link rel="stylesheet" href="/css/build.css" />

If you are using multiple environments, the path from the web root to your file has to be the same on each environment. Something like this won't work with root-relative URLs:

http://mysite.com/css/build.css
http://192.168.178.20/projects/mysite/css/build.css

Absolute URL

Add the complete URL of the CSS file to the link tag:

<link rel="stylesheet" href="http://mysite.com/css/build.css" />

You can also use Craft's global siteUrl variable. To do that define the site's URL (http://mysite.com/) in Settings → General in the Control Panel and add the variable to your tag:

<link rel="stylesheet" href="{{ siteUrl }}css/build.css" />

If you want to use the variable in a multi-environment setup, define it in your general.php file (this overrides the CP settings):

return array(

    '192.168.178.20' => array(
        'siteUrl' => 'http://192.168.178.20/projects/mysite/',
    ),

    'craft.dev' => array(
        'siteUrl' => 'http://craft.dev/',
    ),

    'mysite.com' => array(
        'siteUrl' => 'http://mysite.com/',
    )
);

Just be careful if you want to use this on a multilingual Craft site. If you have multiple locales configured, siteUrl will be set to each locale's site URL, which might point to different folders. You can avoid this by setting a custom variable (eg. baseUrl) in your general.php file:

'environmentVariables' => array(
    'baseUrl'  => 'http://example.dev/',
)

and then use the absolute URL like so:

<link rel="stylesheet" href="{{ craft.config.environmentVariables.baseUrl }}css/build.css" />

Answer 2

It's important to note that your path to resources are relative to your

index.php

Whether that's ./public/index.php or ./index.php where craft is in the same directory level as index.php make sure that's consistent at all three locations.