Style broken with zola build, while zola serve works fine

1

Hello
I’m having that problem, where zola serve works fine but with zola build i end up without style.

with zola serve, locally :

image
image1890×712 97.1 KB

Now i change the base_url in the toml file

[image will follow]

then i use zola build on a docker container on my VPS and serve the build with nginx. While the stylesheet has the proper path, it is not applyed:
[image will follow]
If i try the stylesheet url i get it :
[image will follow]

It’s been 2 days of search & try, and i feel like a looser

Why would the css not be applyed while the URL of the stylesheet leads to the stylesheet ?

I tryed to edit the stylesheet path directly in the browser for some tests, like using the direct ip of the vps : same stuff :
[image will follow]
[image will follow]
I did kind of the same test, by editing the served html file directly inside the container to try to find a solutions, but everything failed.

What could i try next ? Is there a workaround like using “zola serve” inside my container and shooting the result at the desired url ?

At this point, even a shady solution would be greatly appreciated. I feel like a total noob :disappointed_relieved:

Edit: well, as a new user i cannot embedded more than one file :expressionless: I will try to post the screenshot one by one, hoping there is not another limitation about that. Sorry !

2

image
image849×480 17.6 KB

3

Screenshot_36
Screenshot_361441×945 168 KB

4

Screenshot_37
Screenshot_37908×593 30.7 KB

5

Screenshot_38
Screenshot_38815×400 24.2 KB

6

image
image1305×603 85 KB

7

On the “Network” tab, what does the browser show when it tries to load the CSS? Is it the right path? Is it 404ing?

I wanted to take a look at the live site myself, but I can’t access it (Nginx 404 not found).

1 Like
8

yes my bad, I broke it this morning while investigating. It’s now back online
Here is the network tab

image
image1741×530 65.3 KB

9

Can you see how your server is configured for the Content-Type header?

When I load the site in safari I see in the console:

Did not parse stylesheet at ‘http://www.thibaultpotier.com//style.css’ because non CSS MIME types are not allowed in strict mode.

(btw I think an extra / has been added to your config since your first post)

The content-type header for this file should be text/css, but the server is sending text/plain:

Screenshot 2024-09-23 at 10.22.34 PM
Screenshot 2024-09-23 at 10.22.34 PM988×866 74.5 KB

It seems that the browser is then refusing to continue to parse the file, because the mime type loaded doesn’t match the mime type declared. That’s why it’s showing in the network tab as loading the file, but it is seemingly having no effect.

That’s just my guess, but I really don’t think this is a Zola related issue. Do you mind taking a look and reporting back?

1 Like
10

Thank you so much !
With proper nginx configuration, the css is now used by the website.

Here is my current configuration : `http {
include mime.types; # Inclusion des types MIME
default_type application/octet-stream; # Type par défaut

server {
    listen 80;
    server_name 45.90.220.236;

    root /app/public;

    # Serveur principal
    location / {
        try_files $uri $uri/ =404;
    }

    # Servir les fichiers statiques avec les bons types MIME
    location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
        try_files $uri =404;
        expires 30d;  # Cache les fichiers statiques pour 30 jours
        add_header Cache-Control "public, no-transform";
    }
}

}`

I can now start to iterate again on the content. Thanks again <3

1 Like
11

Wonderful, glad it worked out and you can enjoy Zola.