CSS files not interpreted by the client's browser. I think my NGINX config is not good.

Hi guys,

I’m configuring a droplet to host multiple Wordpress sites.

I bought a droplet with Ubuntu 14.04.

Then I followed this tutorial : https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04

Then this one : https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-14-04

Finally : https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-nginx-on-ubuntu-14-04

When I visit my website, everything seems to work except the CSS.

Here is the output of my Google Chrome’s console :

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/genericons/genericons.css/?ver=3.0.2". 162.243.30.53/:23

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/style.css/?ver=3.9.2". 162.243.30.53/:24

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-includes/js/jquery/jquery.js/?ver=1.11.0". 162.243.30.53/:28

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-includes/js/jquery/jquery-migrate.min.js/?ver=1.2.1". 162.243.30.53/:29

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/js/functions.js/?ver=20140319". 162.243.30.53/:136

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

I found on Google that the problem must come from the http headers or something like that and I found somewhere (StackOverFlow I think) that I should add

include /etc/nginx/mime.types;

to my location / { … } block.

Here’s the result :

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/lesmauvaisgarcons.ca/html;
    index index.php index.html index.htm;

    # Make site accessible from http://localhost/
    server_name XXX.XXX.XX.XX;

    location / {
        	try_files $uri $uri/ /index.php?q=$uri&$args;
        	include /etc/nginx/mime.types;
	}

	error_page 404 /404.html;
	error_page 500 502 503 504 /50x.html;
	
	location = /50x.html {
        	root /usr/share/nginx/html;
    	}

	location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php5-fpm.sock;
                fastcgi_index index.php;
                include fastcgi_params;
        }
}