How to host a website using GitHub

Hosting website using GitHub Pages
Tech

How to host a website using GitHub

This is a part of GitHub’s complete Tutorial available on this website, We will look at how to host a website on GitHub for Free. There are a few prerequisites needed for this step, you should know how to perform basic git functions and usage of any code editor. I’m using Visual Studio as it’s easy and convenient than other editors.

What is GitHub Pages?

GitHub pages are additional functionality that GitHub provides to host the website from your account repository. GitHub allows you to use GitHub Pages features with any public Repository of yours. You need the PRO version of Github to make a Private repository to GitHub Pages. Even Github allows you to make custom domain hosting as well. The only disadvantage of this process is only a static website is allowed.

How to Host a Website from GitHub repository?

Step 1: Make sure the index file is available in the root folder as highlighted. In the below scenario I have created a website on my local repository and pushed it to the remote. The main file is index.html here.

Once Published your sample URL to access the page will be like shown below.

http(s)://<repository-name>.github.io
Local repository files

Step 2: Head to the repository you have created on Github, If you don’t know how to create a repository refer this tutorial. In my case, it’s the Portfolio-sanjay file. Click on the Settings button as highlighted as shown here.

Settings in GitHub Pages

Step 3: On the next page you can see the Page option available below the settings. Make a note this may not available if your repository is private.

Accessing GitHub Pages

Step 4: Select the source, By default, it will be None. Hover the mouse over the drop-down and select the main file.

Hosting website using Github repository

Step 5: You can see I have selected the main file over here. Select the branch and select the root file and click on the Save button.

Saving the source settings on GitHub Pages.

Step 6: You are good to go now you can see the site has been published to the GitHub.io address. In the next tutorial, you will see how to make a custom domain in the GitHub Pages. By default the page will be not supported with https so make sure you check the Enforce HTTPS option on the settings page.

Publishing GitHub Pages

FINAL VERDICT :

In conclusion, I hope you enjoyed reading this article on “How to host a website using Github” The next tutorial is a continuation of this where you will get to know how to make custom URLs for Github Pages… Let us know in case you find any issues in executing the above steps. Signing off Sanjay Kv

Can i Create Github Pages in Existing Repository?

Yes, you can create GitHub Pages in existing repository and new one as well.

What are the limits of publishing a Github Page?

The size of repository should be less than 1 GB, Allowed only 10 build/hr, very less bandwidth

Tagged ,
Back To Top