Git & GitHub Course
Git & GitHub
/
Beginner

GitHub Pages Deployment

Definition

The process of automating the deployment of static files (HTML/CSS/React builds) directly to GitHub Pages using GitHub Actions.

Explain Like I'm New

Instead of manually building your React app locally and pushing the `/build` folder to GitHub, you give GitHub the raw React code. An Action builds the code for you on their servers, and instantly pushes the result to your public GitHub Pages website.

Real World Example

Deploying a Vite or Create React App portfolio. You push your code, and 30 seconds later, `yourname.github.io` is updated.

Common Use Cases

  • •Free static hosting
  • •React/Vue/Svelte app deployment

Terminal Output

bash / terminal
/* Modern GitHub Pages Deployment (No gh-pages branch needed!) 1. Go to Repository Settings -> Pages. 2. Under 'Build and deployment', change Source to 'GitHub Actions'. 3. GitHub will suggest a pre-built workflow (like Static HTML or Node.js). 4. Click Configure, and it will generate the deploy.yml file for you. Now, every time you push to main, the Action builds and deploys your site. */

Interview Questions

basic

  • Which branch was traditionally used to serve GitHub pages before Actions existed?

intermediate

  • Do you need to commit your `node_modules` for this to work?

Flash Cards

Question

Traditional branch?

Click to reveal answer
Answer

The `gh-pages` branch. Developers used a tool to forcefully push their compiled `/dist` folder to this orphaned branch.

Question

Commit node_modules?

Click to reveal answer
Answer

No! The GitHub Action robot will run `npm install` on its own server to generate the modules before building.