How to upload and publish HTML website on Github

Github provides a free way to publish your HTML website. You don’t need to know git to accomplish this. Follow along this tutorial to get your first HTML website online on Github.

Requirements

1. You need a Github account. If you don’t have one, you can easily create one using your email address using the signup link.
2. You need a HTML project. This can be just one HTML file or a folder containing HTML, CSS, Javascript and image files.

How to create a repository on Github website

Once you have logged into or created your account, the first step is to create an online repository. It stands for a stand alone named folder containing a whole project. How do you create one?

1. Click on the + sign to create a new repository.
2. Write a name for your project. Use hyphens or underscores to separate words instead of spaces.
3. Under initialize this repository with section, ensure you tick the the add a readme file checkbox.
4. Then click the create button. With that you have created you first repository. Lets move on to adding files to it.

How to upload HTML website on Github.

Its time to add your HTML project files to your online Github repository.

Method 1: HTML project containing files only

If you only have files inside your HTML project folder, follow these steps to upload them online.

1. Click on add file. Click on `upload files option.
2. Open the HTML project folder. Choose all the files you want to upload and click {ok or upload check which one}.
3. Wait on all files to finish uploading.
4. Click on commit.

Method 2: HTML project containing files and folders

1. Open the Github website and choose the repository where you want to upload the project files and folders.

2. Click on add file. Click on upload files option.
3. Open the HTML project folder. Choose all the files you want to upload.
4. Wait on all files to finish uploading.

5. Click on commit.

6. Now its time to add the folders. Click on add file. Then click on create new file option.
7. Write the folder name followed by a / (forward slash). Write the filename: readme.md.
8. Then click commit.
9. When the page loads, click on the folder name you have just created. Repeat steps 3 to 5 for all the files in that folder.
10. Repeat steps 6 to 9 for any other folder in your project.

How to publish/ host HTML website on Github

Open your repository containing your website on Github.com website. Click the settings tab on the far right. Scroll down to the Github pages section. Under the source part, click on the none button. Choose the main branch from the drop down provided. Click the save button under it.

You will see Your site is published at: https://your-username.github.io/repository-name/ Click on the link to view your website. If it shows a 404 page: 1. give it a few minutes and check again.

1. Either check and make sure you have an index.html file in the main folder.
2. or if your html file has a different name other than index.html, include the file name in the url: https://your-username.github.io/repository-name/your-file-name.html