How to publish a site on GitHub Pages 2022

Github is not just publishing your projects and sharing them with others but it also offers you can host your website – Html, reactjs.

This article will discuss hosting your website on GitHub using Vs Code.

Note: If you do not have git installed in your system then install it..

1. Create a Github Account

2. Download GitHub Desktop

Open the download application and do the installation process.

Note: Config your GitHub Desktop with GitHub account.

Next, we’ll create a GitHub repository for the GitHub project.

3. Create a new Github Project(repository)

In the below figure, When the “Create a New Repository”, fill in the “Repository Name” text input as:

username.github.io

Note: for hosting .github.io

After filling the repository name click on “Create repository”.

4. Clone GitHub repository

Clone GitHub repository on Local System through Github Desktop or Visual Studio.

When you click on the Open with GitHub Desktop button pop dialog will appear on your web browser. Click on “Open GitHubDesktop.exe”.

If you want to change Local Path then you have to choose a path.

Open Project Folder.

5. Copy your files to the new Repository folder

In the previous step, we created the GitHub Repository folder inside the /GitHub folder with the name, sauavhathi.github.io. So, this means the GitHub Repository folder should be located at /GitHub/sauavhathi.github.io.

Copy everything in your working folder (/html/mywebsite for example) into your GitHub Repository folder (/GitHub/sauavhathi.github.io).

The GitHub Desktop app should now look something like this:

After filling the commit input box click on Commit to master.

Now that our files are committed, this allows us to push our commit to GitHub!

6. Publish Your Site

Now, in your browser, go to your new GitHub repository page.

Click on Settings that appear on the right side. Publish your site GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

Pages section is located near the bottom left of the user interface. Select master Brach from Source and Save it.

Now your GitHub site is ready 🎉

Note: The Html index.html file name must be in lowercase.

Happy Learning – If you require any further information, feel free to contact me.