Publish and share your own website for free with GitHub Pages (Easiest Method)

Website Hoisting using GitHub Pages

GitHub is not only a great place to store, share and collaborate with other mates across the globe but it also allows the developers to deploy their static website and hoist.

In this article, I'll show you how to get set up to publish your static website on GitHub using the GitHub Desktop app.

Follow these steps: 

1. Create a GitHub account

Create and get yourself a GitHub account. If you have already one jump to the next step.

2. Download and Install GitHub Desktop app

This is the app that we all use to get our code into GitHub. The interface is very easy to learn. 

Complete the installation process of the setup and open the app. Next, we will be creating a new repository to upload our code.

3. Create a new GitHub Repository

Before we upload our code to GitHub we first need to make a repository to upload our code files into. 

Give a name to your repository. Make sure that you have selected the public to make our website visible. Next, click on the 'add a README file' and click on the create repository.

4. Copy the link of your Repository

Go to the code section of your repository and click on the code button which is appearing in green color. There you will see your GitHub repository link in the HTTPS section.

(OR) You can also click on the option called 'Open with GitHub Desktop'. It will open the GitHub Desktop app directly. 

5. Importing our Source Code Files 

Click on the add button and select 'Clone Repository' option. 

Now click on the URL section and paste the copied link of your repository there. And click the 'Clone' option.

Now click on the 'Show in Explorer' button.

And then copy all the files into that folder. Make sure and it is very important that "Your HTML file will be named as index.html". 

And open the GitHub desktop app again. Now you will the interface like below.

Now you have write the summary in the input field which is present at the bottom left corner. It is required field and after entering click on the commit to main to button. 

Now click on the 'Push Origin' button. 

6. Setting up the website in GitHub pages

Now go to the repository and refresh the page. Your code will be loaded there.

Go to the setting option and click on the GitHub pages option. It will appear like 'Pages settings now has its own dedicated tab! Check it out here!'. Click on the none option below the source field and change the none to main and click on the save button. You will see your website URL at the top of the source field.

Boom..! You have successfully deployed your website into the GitHub pages. Now your website is online, you can share with friends and you can use those links in your resume to show case your projects.

If you find this helpful, let me know in the comments. And follow up with me I'll regularly write blogs on the web development. Thank you so much. 

"Happy learning"