Deployment - Missing CSS Styles + Incomplete Preview / static site

Support
,
1

Hi Netlify community,

I’m facing some deployment issues with my site on Netlify, and I could really use some help in getting it sorted out. I have HTML files located in two main directories:

/
|-- main/
| |-- index.html
| |-- cookie_banner.html
| |-- header.html
| |-- privacy_policy.html
|
|-- assets/
| |-- icons/
| |-- css/
| | |-- styles.css
| |-- js/
| | |-- main.js
| |-- netlify/functions
| | |-- sendEmail.js
|
|-- recipes/
| |-- [recipe-pages].html

When deploying to Netlify, my site preview looks incomplete: none of my CSS is being applied, and only 10 out of more than 50 files are visible in the Netlify file browser and in Chrome Devtools (Error 404).
All the paths for the assets (CSS, JS, icons) work perfectly in my local environment, but the deployed version doesn’t seem to load all the files. I’m using the main/ directory as my publish directory.

What I’ve Tried:

I ensured that all asset paths are relative to the main/ directory in both the main/ and recipes/ folders.
Set it to main/ in the Netlify deploy settings.
No significant errors aside from the styles not loading.
Confirmed that no crucial directories/files are being excluded from the deployment.
Wrote all my dependencies in the correct manner:

Questions:

  1. Could this be a problem with how my publish directory is set up?
  2. Is there anything in the deploy settings or build settings I may have missed to ensure all files are deployed and linked correctly?
  3. Should the recipes/ folder be handled differently in the deploy process, or do I need a custom route for those HTML files?
  4. Is there any reason why the deployment preview would show only 10 files when my project includes far more?

The “crippled” deployment can be found here: https://jucilene-santana.netlify.app/

Thanks in advance for your help!

2

@locoalemao Only the files in your Publish directory get deployed.

You have relative file references that point to “one directory higher than the root”, which may exist on your local machine, but do not exist on Netlify.

image
image1152×705 226 KB

Check what you have set as your Publish directory.
Run your Build command locally and look in that directory.
If the files aren’t in that directory, they won’t be available on Netlify.

You would then adjust your project accordingly ensuring files end up in the correct place and that references do not point to locations above the root.

1 Like
3

Thanks for the suggestions, but it still isn’t working with any of the solutions I tried. I’m fairly new to this and currently working on a simple static site, so I haven’t set up any build processes for SSG`s yet. My goal is to keep things as straightforward as possible before diving into static site generators or more advanced setups.

The publish directory is set to /main and the base directory is set to / in Netlify .

If I check the deployed files on Netlify it only shows 10 files which is not correct, since there are more than 50 in total.

image
image966×705 23.6 KB

I later tried to adjust all the directories with different options - even rel URL

I tried to delete browser cache which did not improve the issue.

… No changes unfortunately. Whilst building locally I used Live Server to display the content in Chrome.
Now, trying to adjust the structure for Netlify I used “npm start” to view the site on local http-server.
There I also have the issue with the missing files/ styles and all changes failed to improve the problem.

This can not be so difficult to deploy a website #feelstupid

I assumed since /main is the publish directory, the file path starting with …/assets/css/styles.css would be the right approach, since I have have to jump one folder up in order to reach /assets in the root folder.

4

@locoalemao How you’ve produced the site, and how you’re working with it locally, is largely irrelevant to this specific issue, all that matters is the structure of the files you’re deploying and their references.

I’ll try and explain again with an example structure.

If you were working with:

/
  main/
    index.html
    about.html
    contact.html
  food/
    food1.html
    food2.html
  images/
    image1.jpg
    image2.jpg

If you set your Publish directory to be blank, all of those files would be deployed, in that structure.

References to ../food/food2.html or ../images/image1.jpg would work.
This is because you would be “going up a directory from /main and into the other folders”.
Your site would show a 404 though, due to not having /index.html (as it is /main/index.html)

If you set your Publish directory to main, only these files would be deployed:

/
  index.html
  about.html
  contact.html

Any references to ../food/food2.html or ../images/image1.jpg would not work.
Those other files have quite simply not been deployed.
Your site would not show a 404 but most of your site would not work due to missing files.

You can fix by restructuring your site like:

/
  food/
    food1.html
    food2.html
  images/
    image1.jpg
    image2.jpg
  index.html
  about.html
  contact.html

You would set your Publish directory to be blank (where the default is the root /).

Then all your file/asset references can be “root relative”.

So in index.html you can link to /food/food2.html or load /images/image1.jpg.

Your site will display correctly because there is an /index.html
All your assets will load as they’ve actually been deployed.

This structure will also work locally in whatever tooling you’re using.

5

Thank you for the detailed explanation! I now fully understand the issue. The structure of the files being deployed and their references is what caused the problems, not how I was working locally.

To clarify, I had structured my files incorrectly when I set my publish directory. Based on your example:

  1. I initially had a folder structure similar to the one where the /main folder was being deployed as the root, causing references to assets and pages outside of /main to break.
  2. Following your suggestion, I’ve now restructured my project. I’ve moved everything to the root so that all files and folders are properly deployed and their relative references work as expected.
  3. I set my publish directory to be blank (root /), allowing the correct file hierarchy and root-relative references to function correctly.

With this change, the site no longer shows 404 errors, and all assets and links are loading as intended.
I appreciate your help in resolving this issue - finally i can deploy my first website!

1 Like