Lesson 09 of 20

6 mins read

GitHub Flow, Branch Protection & GitHub Pages

In Plain English

GitHub Flow is a lightweight, branch-based workflow centered on 6 continuous steps: 1. Create branch from main, 2. Add commits, 3. Open Pull Request, 4. Discuss & Code Review, 5. Deploy & Test, 6. Merge into main. GitHub Pages hosts static web applications directly from your repository.

The Mental Model

"GitHub Flow is an airport security line: every bag (branch) is scanned (automated CI tests) and inspected by an agent (code review) before being cleared to board the plane (merged to production)."

Deep Dive: How It Works

Branch Protection: Rules requiring passing CI status checks, mandatory peer reviews, and signed commits before merging.

Code Review Culture: Inline comments, suggestion blocks (```suggestion), and approval gates.

GitHub Pages: Automatically serves HTML/CSS/JS or documentation from the gh-pages branch or /docs folder.

Syntax Blueprint

git switch -c docs/api-guide
# Edit docs
git commit -am "docs: add REST API endpoints"
git push -u origin docs/api-guide
# Open PR -> Review -> CI Pass -> Merge

Follow standardized GitHub Flow lifecycle from topic branch to production merge.

Core Rules to Remember

Everything in main is Deployable: The golden rule of GitHub Flow: main must always remain production-ready and passing all tests.

Review Suggestions: Reviewers can apply code diff suggestions directly from GitHub Web UI with single-click commits.

Automated CI Gates: GitHub Actions trigger on pull_request events to block merges if lints or unit tests fail.

Common Beginner Traps & How to Fix Them

Mistake:Pushing direct commits to main in team repositories without peer review.

Why it happens: Lack of branch protection rules.

How to fix: Enable "Require a pull request before merging" in GitHub Repository Settings -> Branches.

Pro Tip: Use index.html in the root or /docs directory and enable GitHub Pages under Settings -> Pages for free static documentation hosting.

Live Interactive Example

Hit Run Code to see it live

GitHub Pages Static Site Setup

Git 2.45 / CLI

Output Console

Click "Run Code" to view the rendered output.

How it works: docs/index.html serves as the landing page entry point for GitHub Pages hosting.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Add Documentation Index Page

Create a docs directory and write an index.html file with content "<h1>Documentation</h1>".
Stage and commit with message "docs: add initial documentation page".

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.