Deploy Project using Github Pages

Last Updated on September 18, 2023 by Mayank Dham

For a student or for many developers it is not feasible to buy their own domain name and host all their projects on that site. So in these types of scenarios, GitHub proves to be a useful tool as here we can host our project free of cost and in simple steps. While moving further in this article we will learn all the steps required to deploy the project using GitHub pages.

Steps Required for Deployment

Now we will see all the steps for the deployment of the project on GitHub pages.

• Step 1: Open the initial Repository on the GitHub
  As shown in the image below we have opened a repository. With the name Project Camel. And it contains all the files that we have added till now. Make sure to add an index.html file as it will be displayed as the project.

  ![]()

• Step 2: Click on Settings
  As shown in the image below click on the settings option in the repository. After that, the screen will show something like the image shown below. There you can see many options like the repo name, default branch, branches, tags, etc.

  ![]()

• Step 3: Click on the pages Option
  Among all the options shown below if you look at the let side of your screen you will see the options as shown in the image that contains options like rules, actions, webhooks, environments, etc. Click on the pages option.

  ![]()

• Step 4: Select the branch and folder
  After clicking on the pages option our screen will look like the image below:

  ![]()

  Now select the branch from where you want to host your project the list of all the branches available will be shown on your screen as shown in the image below:

  ![]()

  After selecting the branch now select the folder or directory from where you want to host the project. Like shown in the image below.
  After selecting both click on the save option.

  ![]()

• Step 6: Get the Link
  After saving the details the link will be available in some time. As shown in the image below. You can open the given link in the browser and the project will be visible.

  ![]()

• Step 7: Open the project
  Now by using the above-received link you can open the project in any browser no matter where your code is stored.

  ![]()

Benefits of Hosting the Project on GitHub

There are several benefits of displaying a project on GitHub Pages, including:

• Free hosting: GitHub Pages provides free hosting for static websites, which means that you don’t need to pay for a separate hosting service.
• Easy deployment: Deploying a project on GitHub Pages is a straightforward process, and you can have your project up and running in a matter of minutes.
• Increased visibility: GitHub is a popular platform for developers, and hosting your project on GitHub Pages can increase its visibility and help you reach a wider audience.
• Custom domain: You can use a custom domain name with GitHub Pages, which can help you establish a professional online presence.
• Version control: GitHub Pages are integrated with Git, which means that you can use Git’s version control features to manage changes to your project.
• Collaboration: GitHub Pages makes it easy to collaborate with other developers on a project by allowing multiple people to contribute to the same repository.

Conclusion
In the above article, we have seen the process to host or deploy the project on GitHub pages. We have explained the process with a detailed explanation of every step with the corresponding images. We have shown each step with examples and after that, we have got a link to the project that you can use anywhere to display your project. After that, we discussed the benefits of displaying projects using GitHub pages.

FAQs related to the Deploy project using Github pages

Below are some of the FAQs related to Deploy project using Github pages:

1. What kind of projects can I deploy on GitHub Pages?
GitHub Pages is best suited for hosting static websites, including personal blogs, portfolios, documentation sites, and simple web applications. It does not support server-side code or databases.

2. Can I use a custom domain with GitHub Pages?
Yes, you can configure a custom domain for your GitHub Pages site. GitHub provides documentation on how to set up and manage custom domains.

3. Is there a storage or bandwidth limit for GitHub Pages?
GitHub Pages offers generous bandwidth and storage limits, but it’s not intended for large-scale or high-traffic websites. If your project exceeds these limits, you may need to consider alternative hosting options.

4. Can I use a custom theme or template for my GitHub Pages site?
Yes, you can use custom themes or templates for your GitHub Pages site. You can create or choose a theme, and there are also themes available in the GitHub Marketplace.

5. How can I update my GitHub Pages site after the initial deployment?
To update your GitHub Pages site, simply push changes to the repository’s chosen branch (e.g., the main branch). GitHub Pages will automatically rebuild and update the site with the latest changes.

6. Can I use a different branch for GitHub Pages instead of the main branch?
Yes, you can specify a different branch (e.g., "gh-pages" or "docs") as the source for GitHub Pages in your repository’s settings.