Deployment: GitHub Pages
---
theme: seriph
title: "Deployment: GitHub Pages"
info: "Module A-DEPLOY-001 — create username.github.io, deploy, troubleshoot"
---
# Deploy Your First Page
## GitHub Pages
---
# What Is Deployment?
**Development**: code on your computer (only you can see it)
**Deployment**: code on a server (anyone with the URL can see it)
GitHub Pages = free hosting for static websites, directly from your repo.
---
# Step 1: Create the Repo
1. Go to github.com → **New repository**
2. Name it exactly: `username.github.io` (use your actual GitHub username)
3. Make it **Public**
4. Check **Add a README file**
5. Click **Create repository**
> The repo name must match your username exactly. Case matters.
---
# Step 2: Add index.html
1. Clone the repo via **GitHub Desktop**
2. Open the folder in **VS Code**
3. Create `index.html`
4. Type `!` then press `Tab` → HTML template appears
5. Add inside `<body>`:
```html
<h1>Hello World</h1>
<p>This is my first deployed page!</p>
```
6. Save, commit, push
> **AI tip:** You can ask AI to generate the starter HTML for you: "Create a simple index.html with a heading and a paragraph about me."
---
# Step 3: Activate GitHub Pages
1. Go to your repo on GitHub
2. **Settings** → **Pages** (left sidebar)
3. Source: **Deploy from a branch**
4. Branch: **main**, folder: **/ (root)**
5. Click **Save**
Wait 1–2 minutes. Then visit `https://username.github.io`
---
# You Now Have a Live URL
`https://username.github.io`
Anyone in the world can see this. Share it. That's your portfolio home.
---
# Common Problems
| Problem | Fix |
|---|---|
| Page shows README, not your HTML | Make sure the file is named `index.html` (lowercase) |
| 404 error | Check repo name matches `username.github.io` exactly |
| Old content showing | Wait 2 min for GitHub to rebuild, or hard-refresh (`Cmd+Shift+R`) |
| CSS/images not loading | Check file paths, they are **case-sensitive** on GitHub |
> **AI tip:** Paste the exact error or symptom into AI with your repo name and file structure. It can usually spot the mismatch.
---
# File Path Gotchas
GitHub Pages is case-sensitive. Your computer might not be.
```html
<!-- This works locally but BREAKS on GitHub Pages: -->
<img src="Images/Photo.jpg">
<!-- This works everywhere: -->
<img src="images/photo.jpg">
```
**Rule**: lowercase filenames, lowercase paths, always.
> **AI tip:** AI sometimes generates paths with capital letters like `Images/Photo.jpg`. Always check and lowercase them before committing.
---
# Deployment Is the Definition of Done
In this course:
- "I finished the project" = ❌
- "The project is deployed and the URL works" = ✅
Every mini project and the final project must have a live URL. If the URL doesn't load, it's not done.
---
# Your Second Repo
Repeat for `oim3690`:
1. Create the repo on GitHub (public)
2. Clone via GitHub Desktop
3. Add `index.html` at root
4. Activate GitHub Pages
5. Verify at `https://username.github.io/oim3690`
---
# Directory Structure
```
oim3690/
├── index.html
├── css/
├── js/
├── images/
├── logs/
│ └── wk01.md
└── README.md
```
Create the empty folders now. We'll fill them over the coming weeks.
> **AI tip:** Ask AI: "What's a good folder structure for a beginner web development project?" Compare its answer to the structure above.
---
# Vercel (5-min preview)
GitHub Pages works for everything in this course.
There is another option called **Vercel** — you'll use it later when you need a serverless function to hide API keys (Week 6).
For now: **GitHub Pages is your default.**
---
# Key Takeaways
1. GitHub Pages = free static site hosting from any repo
2. Repo named `username.github.io` → your portfolio home
3. File must be `index.html` (lowercase) at root
4. Paths are case-sensitive — always use lowercase
5. Deployed URL working = project done
Topics Covered
- GitHub Pages activation
- deploy troubleshooting (file paths, casing, missing index.html)
- GitHub Actions deploy status
- 5-min Vercel mention ("other path exists")
Content Slides Open fullscreen ↗
Taught In
- Wednesday, 5/20 — How the web works · Deploy your first page