How to Upload Local Html Files to Github
How to Host HTML, CSS, JavaScript, Images Files on GitHub for Costless and Display Your Website
Here's how you can solve the abrasive 404 error
It is a problem.
I know it sounds so elementary, but people are finding it hard to host their website on GitHub for free.
Information technology is non hard to host an HTML file-only website on GitHub. Hither'due south the problem.
Equally a web programmer, you lot would want to test run and host your HTML, CSS, JavaScript, and images files on GitHub for free. But there's a challenge.
If you follow the process GitHub explained in its documentation on how to host a website for complimentary, this is what will happen.
You volition see an abrasive 404 error staring at you every fourth dimension you refresh and try to make the GitHub page website display. Here's another problem.
Equally y'all know, if yous are looking for a solution, especially for programmers, at that place are ii known places y'all can become — Google and StackOverflow.
But the high-ranking manufactures on Google are non helping solve the 404 error GitHub pages throw. I see most of these articles following the same pattern that, in the end, leads to 404 errors.
Many YouTube videos likewise fall into this aforementioned category — same non-helping videos, same 404 fault.
Now StackOverflow. I wanted to host a website I developed on GitHub for free, but no, it won't display. I turned to StackOverflow as any other developer would practise.
But StackOverflow turned me back — no simple solution to the error. And you lot know answers on StackOverflow tin can be difficult to sympathise at times. Now the proficient news.
I constitute the solution.
GitHub pages are even so alive, not dead.
What is surprising is, with but a simple tweak, your website (HTML, CSS, JavaScript, images files) will display on GitHub.
Let's begin. What y'all're about to learn took me months to discover. In fact, it stalled my learning process for a while.
1. Create a Github account
Get to github.com to create a free account. Your account would be fix in a couple of seconds.
ii. Create a new repository
When you log into your account, at the left side of your screen, click on New.
3. Give your repository a name
Name your repository.
You tin leave it as Public if you lot want people to contribute to it. Now click on Add a README file. With the README file ticked, yous can explain what your repository is all nigh.
Then click Create Repository.
iv. Upload HTML, CSS, images files
On the new page, click Add together file at the summit of the main box. Two options will popular up — Create a new file and upload files.
Click on Upload files to upload your files from your reckoner or device.
five. Drag or upload files
You will run across the selection to drag your files or upload them from your computer. You can become with any of the two options. But notation.
You should have all your files in ane folder — HTML, CSS, JavaScript, and images files. Also, give the folder a i-discussion name (website, for example). Allow the name of your HTML file be "alphabetize.html".
These are important to brand your website display on Github.
Wait, and allow the files upload. Check below the box you lot uploaded your files. You will know if your files are uploaded.
When the upload is complete, click on Commit changes.
half-dozen. Become to Settings
On the screen you're now, you will see Settings — on the right side, on top of the boxes. Click on it.
Now scroll downward to Github Pages. Click on — Bank check it out hither.
It will direct you to new GitHub Pages. Below "Source", click on None. Then click on "main". Now click Save.
You will come across this message — Your site is gear up to be published at ……
Later some minutes, click on the link.
All things right, your website ought to display when you click on that link, but information technology won't.
All you see is your repository name or what y'all wrote in your README file. Or even a 404 error. Here's how you tin solve that and make your website display.
Add the proper name of the binder you lot uploaded and the proper noun of your HTML file to the stop of the link GitHub pages generated for you. For case:
https://ololade97.github.io/cak/ola/index.html (this link is an example, not real)
"ola" is the name of my folder, and "index.html is the name of my HTML file.
BOOM. Your GitHub pages website is up and running — looking beautiful.
If you follow the steps higher up, yous would have overcome a problem that seems simple but difficult to overcome. And believe me, y'all would take avoided a nerve-racking, demoralizing bug.
I know there are other places you can host a website for free. But, GitHub is GitHub. It is what it is. And it remains ane of the number one become-to places to host a website for free. A platform y'all can feel how your HTML, CSS, JavaScript, and images files look online.
Writers face challenges that could stop them from writing for life… Chronic dorsum hurting from sitting as well long, eyes issues from staring at the screen for long hours, stifled fingers from writing to proper noun a few. If you desire to continue getting this type of article, you can support me past condign a Medium subscriber. It costs $5/calendar month. A function of your subscription fee goes to me .
More content at plainenglish.io
Source: https://javascript.plainenglish.io/how-to-host-html-css-javascript-images-files-on-github-for-free-and-display-your-website-6db5dc7a8c84
0 Response to "How to Upload Local Html Files to Github"
Post a Comment