CSS not rendering

Support
1

Hello, my CSS and JS are not rendering when I run my Netlify website. The HTML links all work perfectly but the CS and JS don’t work. I’ve looked at other posts but I haven’t been able to fix my problem. The CSS files render when I run it on vscode. Any help would be appreciated. Thanks in advance.

link: https://clever-engelbart-26380f.netlify.app/
github link: https://github.com/jjcss/test

1 Like
2

Hi @jjcss

From what I can see look at the repository and the live site, you have deployed the pages directory. The issue then is the styles and the js directories are in the root of the repository, thus do not get deployed.

You either need to move everything in the pages directory into the repository root and deploy from the root (i.e. leave the publish directory empty) or move everything else in the repository into the pages directory.

3

oh, I see. I set it that way because my index.html file was inside of the pages folder. Is there a way to still access the index.html file in a folder and also have the CSS files render from another folder?

4

For the index.html that is the root of the site (the homepage), the CSS needs to reside in the root, or a directory below the root.

For example in the tree below, both index.html files can access the index.css file.

.
├── index.html
├── something
│   └── index.html
└── styles
    └── index.css
5

So I will need two index.html files?

6

No.

As I stated in my first reply, you need to restructure the files and directories in the project to make it work.

7

So something like this ==== pages folder →
index.html
css Folder
js folder
images folder?
The index.html file will be the only file not in a folder?

8

Not only do you need to restructure the files/directories, the references in them also need changing. For instance in pages/about.html is

    <link rel="stylesheet" href="./pages/styles.css">

which is a non-existent file.

Inside pages/about2.html is

    <link rel="stylesheet" href="../styles/about.css">

which technically, if the root of the repository was deployed, would work, however doesn’t work in this instance. So if you move this file up one level to the repository root, the above line would need modifying to

    <link rel="stylesheet" href="styles/about.css">

or

    <link rel="stylesheet" href="/styles/about.css">

The same goes for any <img>, and <script> tag that reference files within the project.

9

I suggest the structure you need in the project root is thus

.
├── about.html
├── about2.html
├── collaborate.html
├── events.html
├── images
├── index.html
├── js
├── resources.html
├── styles
└── test.html

Under the styles, js, and images directory reside all the styles, scripts, and images respectively.

Then make all <link>, <script> and <img> tags thus

<link rel="stylesheet" href="/styles/FILENAME.css">
<script src="/js/FILENAME.js"></script>
<img src="/images/FILENAME.EXT">
1 Like
10

Thank you so much. Took your advice and restructured the files. Works like a charm now. Thank you!

1 Like