How to create GitHub site as a web page
Introduction
Creating a GitHub site as a web page is an excellent way to host your personal website, project site, or documentation directly from your GitHub repository. This method allows you to share your work with others easily, using a reliable and well-maintained infrastructure in GitHub. Whether you are a developer sharing codes, a designer displaying a portfolio, or simply need a platform to publish documentation, GitHub Pages offers a simple and effective solution. By following a few easy steps, you can set up a professional-looking website that is hosted for free, without worrying about server management or back-end coding. This approach not only enhances your online presence but also makes it easy to keep your site updated and aligned with your projects. Whether you are a new to this or have experience, creating a GitHub site is a useful way to showcase your work and enhance your professional profile. Before beginning these steps, ensure that you have a GitHub account and an existing repository. If you do not have a GitHub account yet, you can create one at the GitHub website. For guidance on creating and deploying a GitHub repository, refer to this tutorial on creating and deploying a GitHub repository.
Navigate to GitHub repository
Log in to your GitHub account and navigate to the specific repository that you wish to turn into a web page. This repository should contain the files you want to showcase on your site, such as index.html, index.md, README.md, or any other web assets. If you do not have a repository prepared, you can create a new one by clicking on the New Repository button. Once you are in the repository, you will be ready to start the process of configuring it for GitHub Pages, which will allow you to easily host and share your web content online. Take a moment to review your repository to ensure that all necessary files are in place before proceeding to the next steps.
In your repository, navigate to the Settings tab by clicking on it. This will take you to a page where you can configure various options for your repository, including those needed to set up GitHub Pages. The Settings tab is typically located near the top right of the repository page, alongside other options like Code, Issues, Pull requests, Actions and other tabs.
Under the Settings tab, scroll down and select Pages from the sidebar menu. This action will open the GitHub Pages settings window, where you can configure the options for publishing your website. In this section, you will be able to choose the source for your site, such as the branch and folder where your website files are stored, and customize other settings related to your GitHub Pages site.
In the GitHub Pages settings, locate the drop-down menu under the Branch section. Click on the drop-down arrow, and select main as the branch from which your site will be built. This tells GitHub Pages to use the content from the main branch of your repository to generate and host your website.
In the same Branch drop-down menu, after selecting main as the branch, look for the option to specify a folder within the branch. Select the /docs folder as the directory from which your site will be built. This means that GitHub Pages will use the files located in the /docs folder of your main branch to create your website. If your web content is stored in this folder, GitHub will look for an index.html, index.md, or README.md file as the entry file for your site.
After selecting the main branch and the /docs folder as a source for your site , click the Save button to apply these settings. This will initiate the process of setting up your GitHub Pages site. Once the settings are saved, you will see a confirmation message, and the link to your live site will appear under the GitHub Pages section of your repository settings. You can visit your newly created website by clicking on the Visit site link. This link will take you directly to your published site, which is now accessible to anyone on the web.
Congratulations on setting up your GitHub Pages site!
With your repository now configured to serve as a live web page, you have a professional platform to show your projects, personal website, or documentation of your work.