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

Improve this question
5
  • That's because your both CSS files don't exist, you can see 404 in the console Commented Sep 7, 2020 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 Commented Sep 7, 2020 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. Commented Sep 7, 2020 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? Commented Sep 7, 2020 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. Commented Sep 7, 2020 at 20:36

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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
-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">

Improve this answer

2 Comments

Sorry brother, but this is not working, I did this and the same result, you can see that I have updated something.
Oh, I saw. You just moved your style files in root directory. I did this when the style files in node_modules directory. It was working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.