How to host project using GitHub Pages

Written by: Dulal Deb

Are you learning about Web Design and want to host your project code on a server? Are you looking for a platform to host your project live for free? If that sounds something like you, then probably you are at the right place. 

In this article below, we will look over one such amazing platform where you can not only upload your project and share it with others but can also host your project completely for free.

So let’s try to explore how you can host your project for free using GitHub Pages in just 3 simple steps.

Table of contents

#What is GitHub Pages?

#Benefits of GitHub Pages

#3 step guide to host project using GitHub Pages

What is GitHub Pages?

GitHub Pages is a feature provided by GitHub which allows you to create your website for free directly from your code repository. Since it is available for free you do not get the flexibility of choosing or using your custom domain. Your website will URL (Uniform Resource Locator) will follow the github.com domain starting with your repository name, which looks something like the one below.

repositoryname.github.com

To learn more, follow the official documentation of
GitHub Pages

Benefits of GitHub Pages

Simple to use

GitHub Pages is very simple and easy to use. You just need to have a GitHub account and create a repository. Need help in creating your GitHub account, check out my 12-step guide on how to upload a project on GitHub. In this, step-by-step guide I have explained in detail how you can get your GitHub account and create a project repository.

Free usage

GitHub Pages is completely free to use. You can use it to create your portfolio,  project documentation, or host any static websites. Since it is a free feature available inside GitHub, you do not have the flexibility of using your own custom domain like .com or .org. Instead, your hosted site will look something like this repositoryname.github.com.

Cloud support

GitHub Pages is a part of GitHub which is a great version control tool. It is web-based so you can create it from any place and access it from anywhere remotely. You just need your GitHub account username and password.

Collaboration

What makes GitHub Pages more interesting is its collaboration feature. You can onboard your team members to work with you or you can collaborate with others for any code feedback. You can even set code review limits.

By now you must have got some understanding of what GitHub Pages is and the benefits you can get by using it. Let us now explore and learn how you can create your website using GitHub Pages and host your project for free in just 3 simple steps.

Web Design Specialist

Join the exclusive mentorship program where you will learn about designing & developing a website in Web 3.0 standard using no-code tools.

3-step guide to host project using GitHub Pages

Step: 1 – Select Setting

Click on the Settings tab at the top right corner to visit the GitHub Pages section, as shown below.

settings

Step: 2 – Select Pages

Click on the Pages tab at the bottom left and provide the details required. Follow the visuals below for a better understanding.

GitHub-Pages

Step: 3 – Enter details

Under Custom Domain enter your repository name and leave other field options as it is. This means, under Source -> Select Deploy from a branch, and in Branch, select main and root

Click on the Save button once done. You should get a success message as shown in the visuals below.

Rename your homepage/main page to index.html as the server needs to know the entry point of your website. You might experience this if the entry or main page is not set properly.

Save-Success

Check out the video guide below for detailed implementation.

Grab your freebies

Download the PDF version of the 3-step guide to host the project using GitHub Pages.

Conclusion

Well, congrats 🎉✨for completing the article, and by now you must have got a fair understanding of how to host your project for free using GitHub Pages.

Let me know in the comments below, your experience using GitHub Pages.

If this resource has helped you in any way, do not forget to share it with others.

Catch you soon, in my next article. 

What you can do next?

  1. Download the PDF guide to learn more about How to become a Web Designer in 2023.
  2. Connect with me for mentorship in Web Design.
  3. Want to build your career in Web Design, enroll in my upcoming Web Design Specialist program
  4. If you are a self-taught designer like me, then visit my Youtube channel, to explore more about UX Design

Related Articles

Join the community

Find me on

Shares
Share This