How to Host Your Web Project on GitHub Pages


Want to showcase your web development project to the world for free? In this tutorial, you’ll learn exactly how to push your project to GitHub and deploy it using GitHub Pages in just a few minutes.

Step 1: Upload Your Project to a GitHub Repository

Before deploying, you need to host your source code on GitHub. Follow these simple steps to upload your project:

1. Go to GitHub and log in to your account.

2. Navigate to the Repositories tab and click the New (or Create) button.

3. Enter your desired Repository name. You can leave the other settings at their defaults for now.

4. Click Create repository to proceed.

5. On the quick setup page, click the "uploading an existing file" link to upload your project files directly.

6. Drag and drop your project folder, or select your files manually.

7. Scroll down and click Commit changes to finish uploading your project.

Step 2: Deploy Your Website Live with GitHub Pages

Once your code is on GitHub, you can publish it online instantly using the built-in deployment tool.

1. Open the specific Repository you just created.

2. Click on the Settings tab at the top of the repository page.

3. In the left-hand menu under the "Code and automation" section, click on Pages.

4. Under the Branch dropdown menu, select `main` (or `master`).

> 📌 Important Note: Ensure your `index.html` file is located in the root directory of your project, or the deployment will fail.

5. Click Save to apply the settings.

6. Wait about 1–2 minutes for GitHub to process your source code. Refresh the page, and you will see a live URL pointing to your newly deployed website!

💡 Pro-Tip for Developers
You only need to configure this setup once. Whenever you make changes to your local code and commit the updates to GitHub, GitHub Pages will automatically deploy the latest version of your live site.

Why Choose This Approach?

* 100% Free Hosting: Perfect for portfolio websites, landing pages, and frontend projects.

* Automated CI/CD: No need to re-upload files manually after every small code change.
* Fast & Reliable: Backed by GitHub’s powerful cloud infrastructure.


*Do you have any questions about deploying your first site? Let me know in the comments below!* 

About the author

Hieu Le
A cozy little corner to share what I’ve learned and to keep memories that make the journey worthwhile.

Post a Comment