Good Afternoon,
Im having trouble understanding how to post material on Github and being able to view it as a webpage.
Referencing lesson “Creating a Website on Github Pages”.
Im able to post the folder containing the file structure for everything on the Cheatsheet project. I can view the code, but when I go to open the website from github using the link they provide, all I get is the code I wrote. I dumped the whole folder in because I have supporting files, embedded google fonts and a separate CSS file. I can get it to open on my own computer locally, but I cant open it from github pages.
My link to the project on github is here. Im pretty new, but the whole point of github pages is to be able to share the pages I make eventually for people to see, so its frustrating that I cant open them the way they are meant to be viewed.
Should I be copy and pasting code and creating folders within github manually to make this work? Ive read dozens of related forum topics from codecademy and elsewhere with the same problem but cant figure this out.
Any assistance would be appreciated. Thanks in advance.
1 Like
Hi, there!
Could you provide a link to your repository?
Jk, I found it myself. The error 404 is indicating that the website it not being pointed toward the correct root folder. Something that may be causing an issue (I would not know for sure without seeing how the page was launched) is that you have
With your index.html within this folder. What I would recommend (because I have never had an issue with it) is to upload your index.html and resources directory directly without having them both within a parent directory. This would make it easier to point GitHub pages to the correct file.
1 Like
Thanks for your reply.
When you post your sites online, do you have to rewrite all the relative path information? Also, do you just dump the images and font files directly?
When I add my projects to GitHub I use the GitHub Desktop app which is connected to the parent directory and uploads all of the files within that parent to GitHub. When uploading files directly to GitHub you should be familiar with this page:
Where there are different options, but you would want to select “uploading and existing file”
Where you would then drag the index.html and resources folder (or any other folder) And as long as the files have the correct pathing (./ ../ etc) you should not have to change the pathing.
1 Like
I am completely lost. I downloaded the app. I have no idea how to get to the above screens. The lessons Ive been over with Github were solely online.
So, for uploading directly to GitHub, I just want to verify that these are the steps to follow:
You can use either of these to create a new repository. After click on either of those, you will be brought to this screen:
Where you will name your repository, attach a README file, etc. Then once you click on the “Create repository” button, it will take you to the page I just showed you where you can select to create a new file, upload existing files, etc.
Because you already have existing files, you can upload those by selecting “uploading an existing file,” which will take you to the other screen I showed you asking for you to drag and drop the relative files and folders.
For the GitHub Desktop app:
You can create a repository, clone a repository, add a local repository, etc. You would then just follow the instructions by imputing the information requested.
1 Like
Thanks. I somehow got the site uploaded, looks fine from the laptop, but not so good on my phone Ed's HTML & CSS Cheatsheet. Im guessing there are lessons I havent got to yet on optimizing for phones, Im still pretty early on the web developer course.
Appreciate the help. Thanks again.
If memory serves, I do not believe you have touched too much on responsive design as of yet, but the projects at the very beginning serve to get your foot in the door. In the future, I encourage you to come back to past projects and update them with newly learned concepts. 
Definitely. Ill need to fix what I got once I learn what I did wrong.
Thanks so much for the help.
2 Likes
