Photo by Roman Synkevych on Unsplash
It is a problem.
I know it sounds so elementary, but people are finding it hard to host their website on GitHub for free.
It is not hard to host an HTML file-only website on GitHub. Here's the problem.
As a web developer, you 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 free, this is what will happen.
You will see an annoying 404 error staring at you every time you refresh and try to make the GitHub page website display. Here's another problem.
As you know, if you are looking for a solution, especially for programmers, there 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 articles following the same pattern that, in the end, leads to 404 errors.
Many YouTube videos also fall into this same category — same non-helping videos, same 404 error.
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 do.
But StackOverflow turned me back — no simple solution to the error. And you know answers on StackOverflow can be hard to understand at times. Now the good news.
I found the solution.
GitHub pages are still alive, not dead.
What is surprising is, with just a simple tweak, your website (HTML, CSS, JavaScript, images files) will display on GitHub.
Let's begin. 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
Go to github.com to create a free account. Your account would be ready in a couple of seconds.
2. 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 can leave it as Public if you want people to contribute to it. Now click on Add a README file. With the README file ticked, you can explain what your repository is all about.
Then click Create Repository.
4. Upload HTML, CSS, images files
On the new page, click Add file at the top of the main 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.
5. Drag or upload files
You will see the option to drag your files or upload them from your computer. You can go with any of the two options. But note.
You should have all your files in one folder — HTML, CSS, JavaScript, and images files. Also, give the folder a one-word name (website, for example). Let the name of your HTML file be “index.html”.
These are important to make your website display on Github.
Wait, and let the files upload. Check below the box you uploaded your files. You 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 now, you will see Settings — on the right side, on top of the boxes. Click on it.
Now scroll down to Github Pages. Click on — Check it out here.
It will direct you to new GitHub Pages. Below “Source”, click on None. Then click on “main”. Now click Save.
You will see this message — Your site is ready to be published at ……
After some minutes, click on the link.
All things right, your website ought to display when you click on that link, but it won't.
All you see is your repository name or what you wrote in your README file. Or even a 404 error. Here's how you can solve that and make your website display.
Add the name of the folder you uploaded and the name of your HTML file to the end of the link GitHub pages generated for you. For example:
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 above, you would have overcome a problem that seems simple but difficult to overcome. And believe me, you would have 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 one of the number one go-to places to host a website for free. A platform you can feel how your HTML, CSS, JavaScript, and images files look online.
Writers face challenges that could stop them from writing for life… Chronic back pain from sitting too long, eyes issues from staring at the screen for long hours, stifled fingers from writing to name a few. If you want to continue getting these types of article, you can support me by becoming a Medium subscriber. It costs $5/month. A part of your subscription fee goes to me. Thank you.