Question

I am trying to deploy a Django application in a production environment and I can’t seem to get the CSS to render properly. In my local environment it works fine. In the settings, I have set up:

STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = '/static/admin/'

On the server I’ve run collectstatic to gather the files into the following folder:

STATIC_ROOT = '/sites/thetweethereafter.com/public/static'

The webserver is nginx, and my nginx.conf is:

events {
    worker_connections  1024;
}
http {
    server {
      listen 80;
      server_name www.thetweethereafter.com;
      rewrite ^/(.*) http://thetweethereafter.com/$1 permanent;
    }

    server {
      listen 80;
      server_name thetweethereafter.com;

      access_log /sites/thetweethereafter.com/logs/access.log;
      error_log /sites/thetweethereafter.com/logs/error.log;

      location /static {
          autoindex on;
          root /sites/thetweethereafter.com/public/;
      }

      location / {
        proxy_pass http://127.0.0.1:29000;
      }
    }
}

If I browse directly to the static files, I can get them no problem.

http://thetweethereafter.com/static/css/styles.css

However, when I load a page that references one of these files, the browser is not rendering them.

http://thetweethereafter.com

I can’t for the life of me figure out what I’m doing wrong. I have lots of other projects set up in a similar way and they work fine. What am I missing?

Answer 1

Inspecting your website index I noticed the css files are served as “text/plain” instead of “text/css” file type. So the problem should rely in the server configuration.

Nginx has to know which mime type apply according to the file extension. On a fresh debian install there is an include directive in the http section like this :

http {
[...]
   include /etc/nginx/mime.types;
[...]
}

That should do the trick.