How to make your site live on GitHub Pages
Developers often encounter a problem with web hosting, but do you know that GitHub Pages can help us publish our static site over the internet, free of cost? GitHub Pages is a static site hosting service provided by GitHub and allows us to publish the website directly from a repository on GitHub.com. In this Answer, we’ll learn how to make the site live on GitHub Pages.
Steps to follow
Before moving to GitHub, ensure your website is fully prepared with all pages and dependencies functioning correctly for a seamless live deployment.
Log in to GitHub and click the “New” button or the “+” button on the top-right corner to create a new repository. You can select “New repository” to create a new repository or select “Import repository” to import the code from another
version control system [object Object]
To set up a new public repository on GitHub, please follow the given steps:
Select the owner from the “Owner” drop-down menu to choose the account you desire to own the repository.
Add the repository name in the “Repository name” field. You can add a description of the repository, although it’s optional.
Choose the type of the repository to “Public.”
Click the “Create a repository” button.
You can initialize your repository with a “README” file. Select the “Add a README file” option while creating a repository.
4. Upload the website’s whole code or necessary files to GitHub. For this purpose, Click on the “Add file” button to add the files to the website.
Create the entry file of the website. When GitHub Pages searches for an entry file for your website, it searches for an index.html, index.md, or README.md file.
5. Go to the “Settings” option from the top navbar to publish the site.
Now, scroll down on the “Settings” page and click “Pages” from the sidebar. After that, select the “Source” to “Deploy from a branch” option from the drop-down.
Next, select the branch that contains the current version of the GitHub Pages website for setting the publishing source. In our case, we have to select “main” with the “/root” folder.
As soon as you select it and press the “Save” button, the website will be published, and a link will appear as shown below.
If you change your files, they will automatically get updated on your site.
Before proceeding with hands-on practice, let’s ensure we arrange the missing cards in the correct order within the following widget to develop a clearer understanding of how to make the site live on GitHub Pages.
Hands-on practice
Follow the steps above and host the following website using the GitHub Pages. You just need to download this code by clicking on the download icon in the top-right corner.
Free Resources