Chapter 29: Git GitHub Pages
GitHub Pages
This is the thing that lets you turn any GitHub repository into a live website — for free, with a custom domain if you want, no server management, no credit card required.
Many beginners hear “GitHub Pages” and think “oh it’s only for static portfolios”, but in 2026 it’s used for:
- personal portfolios & resumes
- project documentation sites
- component libraries / design systems
- open-source project homepages
- course notes & tutorials
- landing pages for side projects
- even mini web apps (with client-side JS)
I’m going to explain it like I’m sitting next to you setting it up together on your laptop — step by step, with real commands, what GitHub screens look like, common gotchas, and a complete realistic example you can do right now.
1. What is GitHub Pages? (simple human explanation)
GitHub Pages is GitHub’s free static website hosting service.
- You push HTML, CSS, JavaScript (and some other files) to a GitHub repository
- GitHub automatically builds and hosts it as a live website
- URL is either:
- https://username.github.io (user/organization site)
- https://username.github.io/repository-name (project site)
- Updates happen automatically every time you push to the chosen branch
Key facts in 2026:
- Completely free (generous limits: 1 GB storage, 100 GB/month bandwidth, soft limits)
- Supports HTTPS automatically (free SSL certificate)
- Custom domains supported (e.g. webliance.in instead of webliance.github.io)
- Can use Jekyll (static site generator) or any static files (plain HTML, React/Vite build output, etc.)
- GitHub Actions can build your site before publishing (very common now)
2. Two Types of GitHub Pages Sites
| Type | Repository name must be | URL becomes | Best for |
|---|---|---|---|
| User / Org site | username.github.io | https://username.github.io | Your personal portfolio, blog, resume |
| Project site | any repo name | https://username.github.io/repo-name | Documentation, demo, project homepage |
We’ll do the project site example today (most common for beginners).
3. Hands-on Example – Create a Live GitHub Pages Site in ~10 minutes
Goal: Make a simple “My Todo App Demo” page live at https://webliance.github.io/todo-pages-demo
Step 1 – Create a new repository on GitHub
Go to github.com → + → New repository
- Repository name: todo-pages-demo
- Public (required for free Pages)
- Do NOT add README yet — we’ll do it locally
- Create repository
Step 2 – Clone it locally
|
0 1 2 3 4 5 6 7 8 |
git clone https://github.com/webliance/todo-pages-demo.git # or SSH: git clone git@github.com:webliance/todo-pages-demo.git cd todo-pages-demo |
Step 3 – Create a simple HTML page
Create file index.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>My Todo App – Live Demo</title> <style> body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #f8f9fa; } h1 { color: #2c3e50; } ul { list-style: none; padding: 0; } li { background: white; margin: 10px 0; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } </style> </head> <body> <h1>My Todo App Demo</h1> <p>Built with love in Hyderabad – February 2026</p> <ul> <li>Learn Git properly</li> <li>Deploy first GitHub Pages site</li> <li>Drink chai every day</li> <li>Build something cool</li> </ul> <p>Check out the repo: <a href="https://github.com/webliance/todo-pages-demo">github.com/webliance/todo-pages-demo</a></p> </body> </html> |
Step 4 – Commit & push
|
0 1 2 3 4 5 6 7 8 |
git add index.html git commit -m "Add initial index.html for GitHub Pages demo" git push origin main |
Step 5 – Enable GitHub Pages in settings
- Go to repo on github.com → Settings tab
- Scroll down → Pages section (left sidebar)
- Source →
- Branch: main
- Folder: /(root)
- Click Save
Wait 30–90 seconds (GitHub builds & deploys).
Step 6 – Visit your live site
URL: https://webliance.github.io/todo-pages-demo/
(Replace “webliance” with your actual username)
You should see your beautiful todo list page live!
Step 7 – Update = push again
Edit index.html → add one more todo:
|
0 1 2 3 4 5 6 |
<li>Master GitHub Pages</li> |
Then:
|
0 1 2 3 4 5 6 7 8 |
git add index.html git commit -m "docs: add new learning goal to demo page" git push |
Wait 10–60 seconds → refresh the URL → new item appears automatically.
4. Quick GitHub Pages Cheat Sheet (2026)
| Question / Task | How to do it |
|---|---|
| Enable Pages | Settings → Pages → Source = main → /(root) → Save |
| Custom domain | Settings → Pages → Custom domain → add yourdomain.com → save + DNS setup |
| Use Jekyll (blogs, themes) | Add _config.yml + Markdown files → Pages auto-builds |
| Use Vite/React/Vue build | Build locally → commit dist/ folder → set Pages source to /dist |
| GitHub Actions build | Add .github/workflows/deploy.yml → build & push artifact to gh-pages branch |
| Private repo Pages | Only for Pro/Team/Enterprise (free accounts must be public) |
5. Common Gotchas & Fixes (2026)
- Site not appearing after 5 minutes? → Check Settings → Pages → see deployment status
- 404 error? → Make sure file is called index.html (or index.md) in root or selected folder
- Old version showing? → Hard refresh (Ctrl+Shift+R) or wait 1–2 min
- Want to use /docs folder? → Settings → Pages → Source = main → /docs
- Want custom 404 page? → Create 404.html in root
Got the GitHub Pages feeling now?
GitHub Pages = free, automatic, Git-powered static website hosting directly from your repository
Next?
- Want to deploy a React/Vite project to Pages?
- Set up a custom domain step-by-step?
- Or add Jekyll for a blog/portfolio?
Just tell me — we’ll continue the class. You’re doing awesome! 🚀
