I am creating a website using pure HTML/CSS, Javascript, and Three.JS as a 3D Graphics renderer. You can find it at this link: https:/xxx.yyy.zzz.app/
The website is almost finished in terms of Three.JS and animations, but I am now trying to make it responsive, by changing the typography, for instance, but for some reason it doesn’t work, and it still seems to load old CSS? If you look at my file structure, I do not load another CSS file, all of the CSS code is within a style tag within the head tag and all of the HTML is within the body tag below the head tag.
As you can see in the screenshots, within my code, the font-size of the About Page (you can look at the screenshot or travel to it using the menu button on the top right) is 13px but for some reason, on the deployed website, it is still 17px. I attached a screenshot to show the difference between the two. You can use developer tools to find the text (which has a class of .aboutText), but a lot of the elements for the other pages are hidden, so you might struggle to find those DOM elements. They are in the ‘aboutPageContainer’ DOM element, if you’re looking for them.
Anyways, I’m not sure why the CSS does not update to the latest CSS. It doesn’t make a lot of sense, so I’d love to get some insight.
It didn’t make sense that simply the CSS isn’t updated, as it is part of the same file, and I can’t imagine there being a parser that rules out simply the CSS and allows the HTML to change. I changed some of the HTML for the loading page from ‘Please turn on your volume’ to ‘Please turn UP your volume’ (as you can see in the screenshot below), and, as I suspected, even the HTML is stuck to the old HTML code --> It still shows ‘Please turn on your volume’ instead of ‘Please turn up your volume’.
It therefore seems like the index.html file isn’t reloaded correctly and that only the old one is loaded. Here is the code of my package.json if that helps too:
And I don’t have any build command set up in Netlify
PS: I did clear the cache before retrying deploys & I’ve deleted the website & redeployed it under different link twice already. Didn’t change anything. It still seems to connect to the old HTML, but that doesn’t make any sense. I also cleared the cache of my browser.
Are you doing a drag and drop deploy or linking to Git? Also, are you using express to serve your content locally? This might also seem silly but are you saving the changes to your files? Press Ctrl + S and try again?
Yeah, I’m saving my changes to the files. I’ve been stuck on this all day and have CTRL + S and pushed my new changes to my git master repository all throughout the day
I’m linking to Git so as soon as I git push -u origin master, an automatic deploy is triggered on Netlify
But my build command is empty now, as I thought I was serving a static site? When I put npm start in the build command, it says that the website is deployed on localhost:8081 but it then stays in deploying state forever, which leads me to cancel the deployment.
You’re right Netlify is static site hosting which means express isn’t natively supported. Do you need to run npm start in order to launch your website? If so you would have to use this workaround with netlify functions. How to run Express.js apps with Netlify Functions
Okay, thank you for your response. I just figured it out, I’m super dumb. I have two index.html file, one within the /public folder, and one at the base of the root directory, and I was updating the wrong one, which is why no changes showed.
