Home
Support Forums

Images and CSS wont load on my app

Images and CSS wont load on my app
I just get this error Failed to load resource: the server responded with a status of 404 ()

Ensure that your stylesheet is linked properly at the head of your HTML. Do not async defer it usually this holds back stylesheets from loading first. I looked at your source and I believe that you linked the stylesheet improperly. You used “…/css/” which gives a direct path to your stylesheet. Try “css/styles.css” instead.

Hi @RyanMG

As @xkevan19 mentioned, you are using ../css/styles.css which is not valid path at the domain root. Unfortunately css/styles.css does not exist either.

How did you deploy your site? Are you sure the files that return a 404 in the deploy? You can check by downloading your deployed site from the Deploy details page

I used this code in my bash file to convert the page to static webpage but its not selecting files in subfolders so my netlifly is only deploying the php files which are in the main folder
any suggestions

#!/bin/bash

# Build script for serving static content instead of php files
DEST="./public_html"
html=".html"

# Create destination folder
mkdir -p "$DEST/"

# Execute all php files and save them as html
for f in *.php;
do
    php $f | sed 's:\(<a.*href=".*\)\.php\(".*</a>\):\1\.html\2:g' > "$DEST/${f/.php/$html}";
    echo "Processing $f into ${f/.php/$html}..";
done


#Copy all CSS files

for f in $(find . -name '*.\css');
do
    cat $f > "s$f";
    echo "Processing $f file..";
done


#Copy all JS files
for f in *.js; 
do
    cat $f > "$DEST/$f";
    echo "Processing $f file..";
done

echo "Process complete." ;

Am curious why you are using cat and not cp.

If I run this locally

all I get it is

zsh: no such file or directory: css/./src/pages/404Error.css
Processing ./src/pages/404Error.css file..

However, if I change it to

#Copy all CSS files

for f in $(find . -name '*.\css');
do
    cp $f css; # css is the directory to store all Stylesheets in
    echo "Processing $f file..";
done

I get

Processing src/components/Welcome/signin.css file..
Processing src/components/Welcome/signup.css file..
Processing src/components/header/header.css file..
Processing src/components/home/home.css file..
Processing src/pages/404Error.css file..

with a css directory

css
├── 404Error.css
├── header.css
├── home.css
├── signin.css
└── signup.css

The same would follow for JavaScript (e.g. cp $f js), images (e.g cp $f img.)

Are you running this locally and deploying the built site, or are you building from git? If you are building from git, can you share your repository?

Hello thank you, please could find a solution to convert the site to a static website here is the link the the repository GitHub - Ryan7mg/Just-notes: Educational website

I’m building from git

The simplest thing is to add the following below your for loop:

cp -r css $DEST
cp -r js $DEST
cp -r images $DEST

Thank you it’s working, the only problem is that the links in the buttons did not change from .php to .html for some odd reason but the footer links are perfectly fine

Likely because your anchor tags use .php links explicitly e.g.

<a href="as-level-chemistry.php">

But our links are like that in the footer too and they were all converted to .html do have any suggestions

Suggest looking at the sed regular expression. Believe it only works for <a ...>...</a> when they are on a single line (as in the footer) however does not cover multi-line anchors (as in your index page.)

so should I change them all to .html or is the a better solution

Changing them to .html would work.
You could also remove the extension (i.e. have contact not contact.html) as Netlify will serve the same content for both.