No CSS after deploy from GitHub but manual deploy works perfectly fine

Hi. I am building a simple website with Bootstrap and vanilla JS. When I drag and drop the file containing all assets into Netlify, the site looks as it should: https://wizardly-einstein-99f20e.netlify.app

When I push the exact same folder to GitHub, and then create another Netlify site connecting to the repo, there is no CSS on the site, and it looks correspondingly: https://happy-almeida-06eed6.netlify.app The JS works, though. It fetches posts from the WordPress API as intended.

I understand the reason might be a missing build command. Which is why I thought that it might be better to deploy the site on an express.js server with build command, etc. That did not work either, still the same problem. Then I tried several build commands for npm like npm build, npm install, etc. but nothing worked. Also tried deleting everything, and setting it up again. No success. Also, I honestly don’t really understand why I need a build command when it’s a simple static site and not a complex app. I am still a beginner and would love to use Netlify. It would be great if I’d get help on this.

Below you can see the build settings.

Below you can find the build log:
12:25:47 AM: Build ready to start

12:25:49 AM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302

12:25:49 AM: build-image tag: v3.7.6

12:25:49 AM: buildbot version: 3934dc3e65fec0466cd25051c676f6e727c64ab1

12:25:49 AM: Fetching cached dependencies

12:25:49 AM: Starting to download cache of 514.6KB

12:25:49 AM: Finished downloading cache in 69.735961ms

12:25:49 AM: Starting to extract cache

12:25:49 AM: Finished extracting cache in 12.232425ms

12:25:49 AM: Finished fetching cache in 82.332562ms

12:25:49 AM: Starting to prepare the repo for build

12:25:50 AM: Preparing Git Reference refs/heads/main

12:25:51 AM: Parsing package.json dependencies

12:25:52 AM: No build steps found, continuing to publishing

12:25:52 AM: Starting to deploy site from ‘/’

12:25:52 AM: Creating deploy tree

12:25:52 AM: Creating deploy upload records

12:25:52 AM: 0 new files to upload

12:25:52 AM: 0 new functions to upload

12:25:52 AM: Starting post processing

12:25:52 AM: Post processing - HTML

12:25:52 AM: Post processing - header rules

12:25:52 AM: Post processing - redirect rules

12:25:52 AM: Post processing done

12:25:52 AM: Site is live :sparkles:

12:25:53 AM: Finished processing build request in 3.649284817s

@fabioklr Welcome to the Netlify community.

It appears that you have two bad paths that – although they work locally – don’t work remotely. These paths are searching for bootstrap assets in your node_modules folder, which probably does not get uploaded. I’m not an expert in this, but I imagine if you can include these bootstrap assets into your other CSS and JS files, they will be included during the build process and you will get the visual results you are seeking.

2 Likes

@gregraven It worked! Thank you so much. The node_modules folder was uploaded to GitHub but it seems that, by default, Netlify ignores folders named like this. After simply removing the folder and shortening the path correspondingly everything works perfectly fine. Do you think this might be something to add to the Netlify Docs? I would imagine that this problem has been encountered before. I did no read anywhere that Netlify ignores folders named “node_modules”.

@fabioklr This isn’t really a docs issue because it’s not really a Netlify issue, if I understand it correctly. This is normal behavior for NodeJS-based build systems from what I can tell. You load up your node_modules folder with whatever you need to use in the creation of your static site, but because the Netlify build process already has NodeJS available (and you can call whatever modules you need), it is employed in a transitory fashion solely for the purpose of creating the static pages. Once the static pages have been generated, Netlify passes the static files to its CDN, so the server is no longer involved. With no server, you don’t need the node_modules folder. Remember, JAMStack sites use JavaScript, APIs, and Markup in static form. That’s one of the big characteristics that makes Netlify different from traditional hosting solutions.

3 Likes

@gregraven Alright I see, thanks for the explanation.