Skip to content Skip to sidebar Skip to footer

Github Pages 404 After Uploading Html File

How to Host HTML, CSS, JavaScript, Images Files on GitHub for Free and Display Your Website

Photo past Roman Synkevych on Unsplash

It is a problem.

I know it sounds so unproblematic, but people are finding it difficult to host their website on GitHub for free.

Information technology is non hard to host an HTML file-simply website on GitHub. Hither'southward the problem.

Equally a web developer, you would desire 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 free, this is what will happen.

Yous will meet an annoying 404 error staring at you lot every time you refresh and try to make the GitHub page website brandish. Here's some other trouble.

As you know, if you are looking for a solution, specially for programmers, at that place are two known places you can go — Google and StackOverflow.

But the high-ranking articles on Google are not helping solve the 404 error GitHub pages throw. I see most of these manufactures following the aforementioned pattern that, in the end, leads to 404 errors.

Many YouTube videos also fall into this same category — same non-helping videos, aforementioned 404 error.

Now StackOverflow. I wanted to host a website I adult on GitHub for free, but no, information technology won't display. I turned to StackOverflow as any other programmer would do.

But StackOverflow turned me dorsum — no uncomplicated solution to the error. And you know answers on StackOverflow can be hard to understand at times. Now the skillful news.

I found the solution.

GitHub pages are still alive, not dead.

What is surprising is, with but a simple tweak, your website (HTML, CSS, JavaScript, images files) will brandish on GitHub.

Allow'south brainstorm. What you'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 costless account. Your business relationship would exist ready in a couple of seconds.

2. Create a new repository

When you log into your business relationship, at the left side of your screen, click on New.

3. Give your repository a name

Name your repository.

You lot tin leave it every bit Public if y'all desire people to contribute to information technology. Now click on Add a README file. With the README file ticked, you can explain what your repository is all most.

Then click Create Repository.

4. Upload HTML, CSS, images files

On the new page, click Add file at the meridian of the chief box. Two options will pop up — Create a new file and upload files.

Click on Upload files to upload your files from your computer or device.

v. Elevate or upload files

You volition see the option to drag your files or upload them from your computer. You tin go with any of the ii options. But note.

You lot should accept all your files in one folder — HTML, CSS, JavaScript, and images files. Also, give the folder a one-discussion name (website, for case). Let the name of your HTML file exist "index.html".

These are of import to brand your website display on Github.

Await, and let the files upload. Check below the box y'all uploaded your files. You lot will know if your files are uploaded.

When the upload is complete, click on Commit changes.

6. Go to Settings

On the screen you're at present, you will come across Settings — on the correct side, on tiptop of the boxes. Click on it.

At present scroll down to Github Pages. Click on — Check it out here.

It will straight you to new GitHub Pages. Below "Source", click on None. Then click on "chief". Now click Salve.

You will run across this bulletin — Your site is ready to be published at ……

Afterwards some minutes, click on the link.

All things correct, your website ought to display when y'all click on that link, but it won't.

All y'all encounter is your repository proper name or what you lot wrote in your README file. Or even a 404 fault. Hither'south how you can solve that and make your website display.

Add the name of the folder you lot uploaded and the name of your HTML file to the end of the link GitHub pages generated for you. For instance:

https://ololade97.github.io/cak/ola/index.html (this link is an example, not real)

"ola" is the name of my binder, and "index.html is the proper name of my HTML file.

Blast. Your GitHub pages website is upwardly and running — looking beautiful.

If you follow the steps above, you lot would take overcome a problem that seems uncomplicated simply difficult to overcome. And believe me, you would have avoided a nerve-racking, demoralizing bug.

I know in that location are other places you can host a website for free. But, GitHub is GitHub. It is what it is. And it remains one of the number one go-to places to host a website for complimentary. A platform yous can feel how your HTML, CSS, JavaScript, and images files look online.

Writers face up challenges that could terminate them from writing for life… Chronic dorsum pain from sitting besides long, optics bug from staring at the screen for long hours, stifled fingers from writing to proper noun a few. If y'all want to proceed getting this type of commodity, you tin can support me by becoming a Medium subscriber. Information technology costs $5/month. A part of your subscription fee goes to me .

More than content at plainenglish.io

dejongrettest.blogspot.com

Source: https://javascript.plainenglish.io/how-to-host-html-css-javascript-images-files-on-github-for-free-and-display-your-website-6db5dc7a8c84

Publicar un comentario for "Github Pages 404 After Uploading Html File"