How to host your html project on GitHub.
sometimes it is always annoying as a beginner trying to host your codes free and share it to the world to view your handwork. there is a free host platform called Heroku it gives you chance to upload file up to some gigabytes. However it is not easy to set up for beginners. So here i will be showing you another way of hosting your codes free using github. it is very easy and common. let's quikly have a look at the steps to take.
Firstly, before you did anything you have to create github account if you don't have one you can click here
to see steps to take to create one for yourself.
Now that you already have account I believed you should be able to create repository yourself. so follow the following step to host your codes.
Step 1: Create a repository
You have to create your repository as you probably have known that the repository is like a folder where you will need to upload all the files contained all your codes.
To create repository. login to your account, click on the rightmost topnav drop-down beside your profile avatar or image as you can see below:
Note: if you are using phone to do this then set your browser to desktop size.
on clicking that you will see five options, so click on New repository so that bring you some input box to fill.
fill the repository name with a name you will like for your project. if the name was marked available then you are good to go otherwise otherwise rewrite it in another way. Here I will be creating school logo so your work should look like the following
as you can see above my repository name is available. make sure yours also has been marked. Now stroll down and click on create repository button.
Now you should be seeing something like below
We just create a repository!
Step 2: creating and uploading files
Note the two things circled on the above picture. you should click on creating a new file if it happened that you just want to start writing the codes but I will never recommend that I believe you already have the file. Hence you should click on uploading an existing file.
after clicking uploading an existing file then you have two options you can either drag your files in to it or just click on choose your file.
wait till the file uploaded. Now stroll down and click on commit button. we just upload a file just like that.
if you need to add more file just click on Add file button and follow the previous procedures.
Note: your html file should be named index.html or one of your html files. in another word to host your codes there should be homepage which will be named index.html. so the file you will like to show to everyone when you are done should be named index.html therefore you should rename it before you upload your codes if it's not index.html.
step3: setting page
firstly click on your name to go back to home page. now click on repositories between Overview and projects. this should show you all your repository if you have some before or just the one we just created. Now click on the one you just created you should be seeing something like below
click on setting as you can see at the shaded portion. scroll down and look at you left hand navigation and select pages.
on clicking Pages you should see something like the following:
as you can see above click on the shaded portion None and select Main so that the box change from none to main. Now click save. as the page load finished you should see a link at the right side. copy the link and start sharing it that is your page. enjoy!
if you have any question don't hesitate to ask. chat me up on WhatsApp or Mail. Don't forget to follow me on Twitter so that you don't miss any of my articles.
Top comments (0)