Javascript/CSS files don't load on the website while hosting

Question

When I try running my server (with the domain being my IP address), It loads the base index.html but all of the files I reference (other CSS files, javascript files) in my directory aren't loaded.

When I run on the Chrome browser, interestingly, it reads all of the css/js files in the directory of my index.html file as that index.html

In My Default file (in /etc/nginx/sites-enabled[available]/default), my code looks like this:

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  root /usr/share/nginx/html;
  # Add index.php to the list if you are using PHP
  index index.html index.htm index.nginx-debian.html;
  server_name <ip-address-here>;
  location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.

    try_files $uri /index.html;

    autoindex on; (I've tried with and w/o this)

    # proxy_pass http://localhost:8080;
    # proxy_http_version 1.1;
    # proxy_set_header Upgrade $http_upgrade;
    # proxy_set_header Connection 'upgrade';
    # proxy_set_header Host $host;
    # proxy_cache_bypass $http_upgrade;
  }
}

before, my files were in a folder called /srv/www/xyz.me. Now I moved to /usr/share/nginx/html. Before and after the move my problem still existed.

This is my first time using DigitalOcean. I've followed tutorials to host my website and things like that but I don't understand the ins and outs of Nginx.

Answer 1

So we can try to add the following to the configuration file:

location ~ \.css {
  add_header  Content-Type    text/css;
}
location ~ \.js {
  add_header  Content-Type    application/x-javascript;
}

We can also try and add it to /etc/nginx/conf.d/default.conf