How to Deploy a Website on GitHub: A Step-by-Step Guide Using GitHub Pages

GitHub isn’t just for code hosting and collaboration — it also offers a powerful way to deploy static websites for free through GitHub Pages. Whether you’re building a personal portfolio, documentation site, or demo project, GitHub makes deployment simple and fast.

In this guide, you’ll learn how to deploy your website to GitHub using GitHub Pages.

Table of Contents

🚀 What Is GitHub Pages?

GitHub Pages is a feature that allows you to host static websites directly from a GitHub repository. It’s ideal for HTML, CSS, and JavaScript projects, and supports frameworks like Jekyll, Hugo, and more.

Key Benefits:

Free hosting
Custom domain support
Automatic HTTPS
Seamless integration with GitHub workflows

✅ Prerequisites

Before you begin, you’ll need:

A GitHub account
Git installed on your local machine
A website project (HTML/CSS/JS files) ready to deploy

🛠️ Step-by-Step: How to Deploy a Website on GitHub

Step 1: Create a GitHub Repository

Go to github.com and log in.
Click “New repository”.
Name your repo (e.g., my-website).
(Optional) Add a description.
Select Public (required for free GitHub Pages).
Click “Create repository”.

Step 2: Push Your Website Code to the Repository

In your terminal:

cd path/to/your-website-folder
git init
git remote add origin https://github.com/your-username/my-website.git
git add .
git commit -m "Initial commit"
git push -u origin master

Replace your-username and my-website with your actual GitHub username and repo name.

Step 3: Enable GitHub Pages

Go to your repository on GitHub.
Click the “Settings” tab.
Scroll down to “Pages” (or go to https://github.com/your-username/my-website/settings/pages).
Under “Source”, choose:
- main or master branch
- /root (or /docs if your files are in a folder called docs)
Click “Save”.

GitHub will now build and deploy your site.

Step 4: Access Your Live Website

After a few seconds, you’ll see a message like:

Your site is published at https://your-username.github.io/my-website/

Click the link to view your live site!

🧠 Advanced Tips

Custom Domain: Add a CNAME file or configure DNS for your domain in the Pages settings.
404 Pages: Add a 404.html to customize error handling.
Theme Support: Use Jekyll themes if you want a quick design setup.

🧹 Best Practices

Keep your HTML/CSS clean and organized
Use version control (commits, branches) for updates
Add a .gitignore to exclude files like node_modules
Minify assets for faster performance

🔁 Automate Deployment (Optional)

For projects using build tools like React, Vue, or static site generators, use GitHub Actions to automate the build and deploy process.

Example: For React, you can use the gh-pages package to publish your build folder.

✅ Summary

Step	Description
1	Create a GitHub repo
2	Push your code via Git
3	Enable GitHub Pages in repo settings
4	Visit the published URL

Conclusion

Deploying a website on GitHub is one of the easiest and most cost-effective ways to get your site online. With just a few commands and clicks, your project can go from local development to live on the web — no hosting plan required.