0

I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these - CSS not loading for GitHub pages & How to link my CSS to my HTML in a github hosted site

And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">, things like that. But my question is how I can implement it and do my work done? Here are my code and link to the Github site -

<head>
        <meta charset="utf-8">
        <title>To-do list app</title>
        <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
        <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>

link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help. Can anyone please help???

Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing. enter image description here

Deb Prakash Chatterjee
  • 93
  • 1
  • 1
  • 10
  • That's because your both CSS files don't exist, you can see 404 in the console – Saadi Toumi Fouad Sep 07 '20 at 19:07
  • @SaymoinSam yes, but how to resolve this issue? I have tried several methods to load CSS files, but nothing is working, you can see, I have also provided links. It is the CSS file [link to my Github index.CSS](https://github.com/iamdeb28/OpenClassRoom_Project_8/blob/master/node_modules/todomvc-app-css/index.css) – Deb Prakash Chatterjee Sep 07 '20 at 19:13
  • 2
    Pretty sure it has something to do with the fact that your css files are inside .gitignore so git doesn't see them. Is there a specific reason why you're making git ignore all the node_module files and then bring them back again with ! prefix on the very next line? Just a thought, but if you do insist on keeping the css files inside node_modules folder, try removing the .gitignore file and see if that fixes it. – Senatrius Sep 07 '20 at 19:28
  • @Senatrius, hey I have removed .gitignore file, and everything is the same as it is. So, the thing is that I tried to upload all the folder from Git Desktop, but the node_modules were creating problems at that time, so I again created a folder node_modules and uploaded this individually. Do you think this might be a problem? – Deb Prakash Chatterjee Sep 07 '20 at 19:36
  • 1
    @DebPrakashChatterjee Well, what'd ya know, node_modules folder was the problem. I cloned your repo, tried changing various files to avail and in the end, I just got rid of node_modules folder, moved it's contents to a new folder I named css and it seems to work just fine now? I don't know what error you got earlier as I don't use the Git Desktop app, but that must've been the culprit all along. – Senatrius Sep 07 '20 at 20:36

2 Answers2

0

As @Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore, but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks @Senatrius.

Deb Prakash Chatterjee
  • 93
  • 1
  • 1
  • 10
  • Sure thing. Also, regarding your .gitignore file, looking back it wasn't entirely correct as well. Apparently you can't just hide an entire folder like `node_modules/` and then add exceptions to files inside it, you have to use something like `node_modules/*` This might be useful [Exceptions in .gitignore](https://riptutorial.com/git/example/911/exceptions-in-a--gitignore-file) – Senatrius Sep 09 '20 at 14:47
-2

You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.

<link rel="stylesheet" href="./node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">
Salim Hossain
  • 1
  • 1