Statamic SSG at Netlify - failed to load a stylesheet from a url

I have a problem with statamic ssg on netlify. After deploy my homepage the website have an error: “Failed to load resource: the server responded with a status of 404 ()” css and js.

My Deploy Settings:

Base directory: /
Package directory: Not set
Build command: php please ssg:generate
Publish directory: /storage/app/static

Environment variables:

PHP_VERSION: 8.1
APP_DEBUG: false
APP_KEY: is set
APP_URL: https://weltspot.netlify.app
APP_ENV: production

Can u help me?

Thanks for reaching out! I’m not too familiar with Statamic, but from reading the docs here on deploying to Netlify, I’m thinking that your build command might be a bit off - I think you’ll want to change it to composer build if you’re using the composer.json file referenced in that documentation.

It also looks like the Statamic team provide a sample toml file that can be used to set this config up - can you confirm yours matches the implementation there? Thanks again!

Thank you for your feedback. I have already switched to this variant following your recommendation. But that had no effect. Statamic 4 uses vite for css and js. I think that has something to do with it. I tried to integrate a Vite addon for service providers. That didn’t help either. deploy works wonderfully on netlify. I’m at a loss when it comes to the topic of CSS and JC.

Deploy log - Building:

Summary

11:31:12 PM: Netlify Build
11:31:12 PM: ────────────────────────────────────────────────────────────────
11:31:12 PM: ​
11:31:12 PM: ❯ Version
11:31:12 PM: @netlify/build 29.33.2
11:31:12 PM: ​
11:31:12 PM: ❯ Flags
11:31:12 PM: baseRelDir: true
11:31:12 PM: buildId: 65b8271ad74b8b000873aa84
11:31:12 PM: deployId: 65b8271ad74b8b000873aa86
11:31:12 PM: ​
11:31:12 PM: ❯ Current directory
11:31:12 PM: /opt/build/repo
11:31:12 PM: ​
11:31:12 PM: ❯ Config file
11:31:12 PM: /opt/build/repo/netlify.toml
11:31:12 PM: ​
11:31:12 PM: ❯ Context
11:31:12 PM: production
11:31:12 PM: ​
11:31:12 PM: build.command from netlify.toml
11:31:12 PM: ────────────────────────────────────────────────────────────────
11:31:12 PM: ​
11:31:12 PM: $ composer build
11:31:12 PM: > npm run build
11:31:12 PM: > build
11:31:12 PM: > vite build
11:31:12 PM: vite v4.5.2 building for production…
11:31:12 PM: transforming…
11:31:13 PM: ✓ 3 modules transformed.
11:31:13 PM: rendering chunks…
11:31:13 PM: computing gzip size…
11:31:13 PM: public/build/manifest.json 0.26 kB │ gzip: 0.14 kB
11:31:13 PM: public/build/assets/site-8b0104fe.css 12.70 kB │ gzip: 2.92 kB
11:31:13 PM: public/build/assets/site-8dda77ae.js 43.40 kB │ gzip: 15.70 kB
11:31:13 PM: ✓ built in 750ms
11:31:13 PM: > @php -r “file_exists(”.env") || copy(“.env.example”, “.env”);"
11:31:13 PM: > @php artisan statamic:ssg:generate
11:31:13 PM: You may be able to speed up site generation significantly by installing spatie/fork and using multiple workers (requires PHP 8+).
11:31:13 PM: Gathering content to be generated…
11:31:13 PM: [:heavy_check_mark:] Gathered content to be generated
11:31:13 PM: Generating 14 content files…
11:31:13 PM: Generating /404
11:31:13 PM: Generating /magic
11:31:13 PM: Generating /nectar
11:31:13 PM: Generating /dance
11:31:13 PM: Generating /about
11:31:13 PM: Generating /articles
11:31:14 PM: Generating /
11:31:14 PM: Generating /topics
11:31:14 PM: Generating /topics/sneakers
11:31:14 PM: Generating /topics/soda
11:31:14 PM: Generating /topics/dance
11:31:14 PM: Generating /articles/topics/sneakers
11:31:14 PM: Generating /articles/topics/soda
11:31:14 PM: Generating /articles/topics/dance
11:31:14 PM: [:heavy_check_mark:] Generated 14 content files
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/css copied to /opt/build/repo/storage/app/static/css
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/js copied to /opt/build/repo/storage/app/static/js
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/assets copied to /opt/build/repo/storage/app/static/assets
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/robots.txt copied to /opt/build/repo/storage/app/static/robots.txt
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/favicon.ico copied to /opt/build/repo/storage/app/static/favicon.ico
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/manifest.json copied to /opt/build/repo/storage/app/static/manifest.json
11:31:14 PM: [:heavy_check_mark:] /opt/build/repo/public/sw.js copied to /opt/build/repo/storage/app/static/sw.js
11:31:14 PM: Static site generated into /opt/build/repo/storage/app/static
11:31:14 PM: ​
11:31:14 PM: (build.command completed in 2s)
11:31:14 PM: ​
11:31:14 PM: (Netlify Build completed in 2.1s)
11:31:14 PM: Section completed: building
11:31:16 PM: Finished processing build request in 24.974s

@bub88 I’m unfamiliar with Statamic but my guess is that something isn’t configured correctly.

The only references to JS/CSS in your build log are:

11:31:14 PM: /opt/build/repo/public/css copied to /opt/build/repo/storage/app/static/css
11:31:14 PM: /opt/build/repo/public/js copied to /opt/build/repo/storage/app/static/js

As you mention that your Publish directory is /storage/app/static then those folders would end up at /css/ and /js/

If you view source on your site in the <head> you’ll see that your css/js are referenced as:

<link rel="preload" as="style" href="https://weltspot.com/build/assets/site-8b0104fe.css" />
<link rel="modulepreload" href="https://weltspot.com/build/assets/site-8dda77ae.js" />
<link rel="stylesheet" href="https://weltspot.com/build/assets/site-8b0104fe.css" />
<script type="module" src="https://weltspot.com/build/assets/site-8dda77ae.js"></script>

They all assume a path of /build/assets/.

I’m not sure where your files are actually ending up, but you could check by running your Build command locally and then looking at the files that are output.

Since the file references in your HTML contain hashes (the -8b0104fe) I’d guess they’re being generated by Vite.

The moving of the entire /css/ and /js/ folders might be happening via Statamic and perhaps not factoring in the reference renames by Vite etc.

At least one of your files is actually here:

https://weltspot.com/js/site.js

Thank you for your detailed answer to me. That’s exactly how I’ve come. Vite generates css and js urls. I tried adding a snippet via netlify, and that worked to some extent. Hamburger js menu still didn’t work. Here you have to take the matter seriously. Unfortunately I don’t know how to turn off Vite when deploying static site (ssg). Maybe that would be a solution too. There are also Vite tags from Statamic. That might make it work too. Ultimately, the demo page of Statamic Cool Writings Starter Kit also works. If anyone has an idea, I would be happy to hear about a solution.

Thank you.

@bub88 You’re unlikely to find assistance here since this isn’t really a Netlify problem, but something related to the configuration you have for the systems you’ve chosen to work with.

If you run your Build command locally, then check what is generated, or serve the files with npx serve you will almost certainly see exactly the same issue.

Since you’re talking about Statamic specific things, you might be best off asking them?

Thank you for your response and support. I have now come to a solution. The matter had been very simple. If you statically generate the Statamic cms (In my case Cool Writings Starter Kit) with ssg plugin, you have to delete the line with Vite connection in the folder: “resources/views/” in the template file: “layout.antlers.html” and Create HTML connection for CSS and JS.

Remove Antlers:

{{ vite src=“resources/js/app.js|resources/css/app.css” }

Add HTML:

<link rel="stylesheet" href="/css/tailwind.css"/> 
<script src="/js/site.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>

@bub88 That doesn’t sound that simple to me, but then I know nothing about Statamic.

Great work self solving!

1 Like