Search code examples
htmlcssgoogle-chrome-devtoolsgithub-pagessafari-web-inspector

CSS - Failed to load resource: the server responded with a status of 404 ()

I am trying to load my simple website online hosted by Github.io. However, after countless and frustrating efforts of troubleshooting and debugging the HTML & CSS script, my web still couldn't get the CSS file loaded as desired for some really mysterious and extremely annoying reason.

Don't get me wrong:

  1. I swear my CSS file is put in the absolute path rather than the relative path as I firstly put it, so I will smash myself if it's the cause of the error.
  2. After a while couldn't figure out, I looked over similar or related issues posted on stackoverflow as well, some suggest that the access permission is maybe the reason, but I followed them with the command inside my directory of CSS file

chmod -R 777

But I don't see it resolves as well cuz the command has no effect, and I didn't run it at the root level the file is not at the root level

  1. I inspected this web on both Chrome and Safari, and the style.css is blank as it couldn't be loaded!!! enter image description here

Now, I keep hold on this to wait for any of your "magic" helps. I deeply appreciate the help, as I tried my best fixing it already, but didnt work. Here is the just HTML link tag line where the file is not loaded.

<head>
....

    <link rel="stylesheet" href="./_css/style.css">
</head>
Solution

  • If your _css directory is in the root, your CSS link should start with a slash:

    <link rel="stylesheet" href="/_css/style.css">

    But naming your directory _css may be a problem. Github Pages by default treats your site as a Jekyll website, which processes your files and does not publish files/directories having _ prefix.

    I think you have 2 options:

    • If you don't know about Jekyll and you are not creating a Jekyll site, put a file in your root named .nojekyll to bypass Jekyll processing.
    • Rename your directory from _css to css and also modify your <link> tag.