GitHub Pages

GitHub Pages is a free static site hosting service built directly into GitHub. Deploy any HTML, CSS, and JavaScript project straight from your repository — perfect for portfolios, documentation, project landing pages, and demos.

01.How GitHub Pages Works

GitHub Pages serves your static files directly from a repository. Configure it to deploy from: the root of your main branch, a /docs folder on main, or a dedicated gh-pages branch. Every public repository gets a free URL at username.github.io/repo-name. Connect a custom domain for a professional touch.

Distributed Architecture

💻

Your Local

push / pull

☁️

GitHub (Remote)

push / pull

💻

Teammate's Local

02.Deploying React/Vue/Next.js Apps

Frameworks that need a build step use GitHub Actions to automate deployment. On every push to main: install dependencies → run build → deploy the dist/ or out/ folder to GitHub Pages. This is fully automated — commit your source code, GitHub builds it and deploys it live within minutes.

Commit Timeline

a1b2c3d

init

b2c3d4e

feat

c3d4e5f

fix

d4e5f6a

HEAD

Commands

commands — click to reveal output

# GitHub: Settings → Pages → Source: main branch

Enable GitHub Pages in repository settings

npm run build

Build your React/Vue/Next.js app locally to test

npm install gh-pages --save-dev

Install the gh-pages deployment package

npx gh-pages -d dist

Deploy your dist/ folder to the gh-pages branch

# Live at: https://username.github.io/repo-name

Your deployed public URL

KNOWLEDGE CHECK

What type of sites can GitHub Pages host?

Rate this lesson:

Previous Next Lesson