Version Control with Git & GitHub Pages
Never lose code or name files index_final_v2_really_final.html again. Master the three trees of Git, write standard conventional commit messages, configure .gitignore, and publish your site to the world for free on GitHub Pages.
🎯 Learning Objectives
- Understand the 3 core states of Git: Working Directory, Staging Area (Index), and Repository History.
- Execute foundational Git commands:
git init,git status,git add,git commit, andgit log. - Format professional commit messages following the Conventional Commits specification.
- Create a bulletproof
.gitignorefile to prevent sensitive files and junk OS artifacts from entering history. - Deploy static HTML pages live on the public web using GitHub Pages.
📖 Mental Model: The Time-Traveling Video Game Save Checkpoint
In an adventure RPG video game, before you enter a dangerous boss chamber, you save your progress at a glowing checkpoint stone. If your character falls into lava or makes a catastrophic mistake, you don't delete your entire console—you reload from your last save checkpoint.
Git is your time-traveling checkpoint system. Every commit is an immutable cryptographic snapshot of your entire project. If a new layout breaks or an experimental script crashes your site, you can instantly revert back to any exact second in your project's history without fear.
The 3 States of Git Architecture
Files in a Git-tracked project move through three distinct stages before being shared:
| Command | What It Does | Example |
|---|---|---|
git init |
Initializes a new Git repository by creating a hidden .git/ directory. |
git init |
git status |
Shows which files are modified, untracked, or staged for the next commit. | git status |
git add <files> |
Stages specific changes into the staging area (preparing the snapshot). | git add index.html style.css (or git add .) |
git commit -m "msg" |
Permanently seals the staged snapshot into the commit timeline with a message. | git commit -m "feat: add contact form markup" |
git log --oneline |
Displays a concise list of past commit hashes and messages. | git log --oneline -n 5 |
Professional Conventional Commits
Senior software engineers use structured commit prefixes to make project histories readable and enable automated release changelogs:
feat:Adding a new user-facing feature or page (e.g.feat: add pricing calculator section).fix:Fixing a bug or visual defect (e.g.fix: correct broken image alt attribute).docs:Documentation changes only (e.g.docs: update README setup instructions).style:Formatting, whitespace, or CSS styling tweaks with no logic changes.refactor:Code restructuring without changing external behavior.
The .gitignore File
Never commit OS junk files, private API keys, or heavy build artifacts to Git. Create a file named .gitignore in your project root:
# Operating System Artifacts
.DS_Store
Thumbs.db
desktop.ini
# Dependencies & Environment
node_modules/
.env
.env.local
# Editor Metadata (Keep settings, ignore personal cache)
.vscode/*
!.vscode/settings.json
*.logPublishing for Free with GitHub Pages
Once your HTML project is pushed to a GitHub repository, you can publish it to a global CDN for free:
- Push your repository to GitHub (
git push -u origin main). - On GitHub, go to your repository Settings → Pages.
- Under Branch, select
main(ormaster) and root folder/ (root). - Click Save. In ~60 seconds, your site is live at:
https://yourusername.github.io/repository-name/!
Interactive Demo: Git Workflow Simulator
Experience how files transition through the Working Directory, Staging Area, and Committed History:
🏋️ Hands-On Exercise: Author a Release Changelog Card
- Construct a clean HTML changelog card that displays recent Git commits formatted with Conventional Commit badges.
- Include 3 commits:
- A
feat:commit for adding navigation links. - A
fix:commit for repairing a mobile layout contrast bug. - A
docs:commit for adding deployment instructions to README.
- A
- Use color-coded badges (e.g. green for feat, red for fix, blue for docs).
- Click ▶ Run Code to test your release timeline.
⚠️ Common Pitfall: Forgetting to Stage Changes Before Committing
Running git commit -m "my message" without first running git add will produce "no changes added to commit". Git requires you to explicitly stage files so you have full control over exactly which changes are grouped into each atomic commit.
💡 Pro Tip: Inspect File Differences with git diff
Before you stage or commit code, run git diff in your terminal. Git will show you a color-coded line-by-line comparison of additions (green +) and removals (red -) so you never commit accidental debug code or rogue console logs!
📌 Key Takeaways
- Git tracks project history through three stages: Working Directory, Staging Area (
git add), and Repository Commits (git commit). - Always write clear, atomic commit messages using Conventional Commits (
feat:,fix:,docs:,style:). - Maintain a
.gitignorefile to prevent.DS_Store,node_modules/, and sensitive secrets from polluting history. - GitHub Pages lets you publish static HTML sites directly to the public web for free with zero server maintenance.