You’ve built your first website with HTML, CSS, or even React — now what? It’s time to show it to the world! The good news is you don’t need to pay for hosting right away. With GitHub Pages, you can deploy your site for free in just a few minutes.
This blog walks you through how to deploy any static website (HTML/CSS/JS) using GitHub Pages.
🌐 What is GitHub Pages?
GitHub Pages is a free web hosting service from GitHub that lets you publish static websites directly from your GitHub repository.
✅ Perfect for portfolios, documentation, project demos, and learning web hosting basics.
🔧 Prerequisites
- A GitHub account
- Git installed on your PC
- A static website (can be simple HTML/CSS or a full React app)
🚀 Steps to Deploy a Static Website
1. Create a New Repository on GitHub
- Go to github.com
- Click New Repository
- Name it something like
my-portfolio - Make it public and don’t add README or .gitignore
2. Push Your Website Files to GitHub
In your local project folder:
bashCopyEditgit init
git remote add origin https://github.com/yourusername/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin master
3. Enable GitHub Pages
- Go to your repository on GitHub
- Click on Settings → Pages
- Under “Source”, select
mainormasterbranch and/root - Click Save
✅ GitHub will generate a URL like:https://yourusername.github.io/my-portfolio/
📝 Notes for React Developers
If you’re deploying a React app:
- In
package.json, add:
jsonCopyEdit"homepage": "https://yourusername.github.io/my-app"
- Then run:
bashCopyEditnpm install gh-pages --save-dev
- Add these scripts to
package.json:
jsonCopyEdit"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
- Finally, run:
bashCopyEditnpm run deploy
Your React site will be live on GitHub Pages!
🛠️ Pros & Limitations
Pros:
- Free & easy
- Secure (HTTPS by default)
- Perfect for frontend projects
Limitations:
- Only works for static files (HTML/CSS/JS)
- No server-side support (no Node.js/PHP)
Conclusion:
GitHub Pages is a must-know skill for beginners. Whether you’re building a portfolio, hosting documentation, or showcasing a project, it offers a fast and reliable way to deploy your website. Once you’re comfortable, you can explore advanced hosting like Vercel or Netlify too.