AstroJS project hosted on DigitalOcean droplet with Nginx – CSS loading as text/html

Heya,

Here’s a list of things you need to check to troubleshoot the issue

1) Make sure Nginx knows MIME types

Open /etc/nginx/nginx.conf and confirm this line exists outside any http {} location overrides:

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    # ...
}

• If include /etc/nginx/mime.types; is missing, add it.

• If you see default_type text/html; anywhere (global or in your site config), remove it or set it to application/octet-stream.

2) Check your site’s server block

In /etc/nginx/sites-available/your-site (or /etc/nginx/conf.d/your-site.conf), it should be something like:

server {
    listen 80;
    server_name _;  # or your domain

    root /var/www/astro/dist;  # <— point to your Astro build folder (dist)
    index index.html;

    # Serve static files with correct types (mime.types will handle css/js etc.)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Optional: tighten caching for assets
    location ~* \.(css|mjs|js|wasm|ico|png|jpg|jpeg|gif|svg|webp|avif|woff2?)$ {
        access_log off;
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }
}

Avoid doing any of the following in your config:

• add_header Content-Type text/html; (this will force CSS to be HTML)

• default_type text/html; inside server or location

• Using a rewrite or return 200 that serves everything through index.html without a try_files check first.

3) Verify the file actually exists in dist

Astro’s static build puts assets in dist/ (often under dist/assets/). Check:

ls -lah /var/www/astro/dist/assets | grep .css

If the CSS isn’t there, run:

cd /var/www/astro && npm run build

Then redeploy/copy the dist/ to the server path you’ve set as root.

4) Test the headers

After making changes:

sudo nginx -t && sudo systemctl reload nginx

Then check:

curl -I http://YOUR_IP/assets/yourfile.css

You should see:

Content-Type: text/css

If it still shows text/html, you likely have an override somewhere. Grep for it:

grep -R "default_type\|Content-Type" /etc/nginx -n

Remove any bad default_type text/html; or add_header Content-Type ... lines affecting static paths.

5) Common gotchas

• Wrong root: If root points to your project folder instead of /dist, Nginx may hit your SPA fallback and serve index.html for everything (hence text/html).

• Catch-all location first: A broad location / { try_files ... /index.html; } defined above your static file location can intercept .css requests. Keep the asset location ~* \.(css|js|…) block above or ensure try_files returns the static file before falling back.

• SSR adapter: If you used an Astro Node adapter (SSR) but you’re serving only with Nginx, switch to a static build (no SSR) or proxy to the Node server properly.

Minimal working example

If you want a super minimal config that “just works” for a static Astro build:

server {
    listen 80;
    server_name _;

    root /var/www/astro/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

(Plus the include /etc/nginx/mime.types; in nginx.conf.)

---

If you paste your current server block, I can spot the exact culprit—but the steps above usually fix it fast.

Hmm i seen this happen sometimes when the Nginx config doesn’t serve static files correctly. Did you try checking the location block for CSS files? Not sure if that’s it though.

Heya, @71378f15371f47ee854c12e6950748

Your CSS is being served as text/html because Nginx isn’t using the MIME map.

Check /etc/nginx/nginx.conf and make sure inside http { ... } you have:

include /etc/nginx/mime.types;
default_type application/octet-stream;

Then reload Nginx.

Also, be sure your root points to Astro’s dist/ folder, and you’re not overriding the Content-Type anywhere.

Test with:

curl -I http://your-ip/_astro/file.css

It should return Content-Type: text/css

Regards