Deploying your project to GitHub Pages is a straightforward way to make your static websites accessible to anyone online. Whether you're just starting with web development or have some experience but haven't used GitHub Pages before, this guide will walk you through the process.
Prerequisites
Before we begin, ensure you have the following:
An existing project hosted on GitHub
Note: This article assumes you are familiar with Git basics, such as pushing code to a repository.
For this tutorial, I'll demonstrate using this repository.
Step 1: Navigate to Your Repository
Go to the GitHub repository for the project you want to deploy. For example, I'll use the Responsive Product Showcase repository as shown below:
Step 2: Access GitHub Pages Settings
On your repository's page, click on the Settings tab in the navigation bar.
In the left sidebar, scroll down and select Pages.
Step 3: Configure the Deployment Source
In the Pages section, locate the dropdown menu under Branch.
Select the branch from which you want to deploy your project (e.g.,
main).Click Save to trigger the deployment process.
After saving, GitHub will display the deployment status.
Step 4: Retrieve Your Live Site Link
Return to the repository's main page by clicking on Code.
On the right-hand side, click the gear icon next to About.
In the modal that appears, select Use your GitHub Pages website to display the live link to your project.
Click Save Changes to finalize the process.
Conclusion
That's it! You've successfully deployed your project using GitHub Pages. Now you can share your live link with others and showcase your work to the world.
If you encounter any issues or have questions, feel free to drop a comment below. Happy coding!