Web Dev Academy Hosting & deployment ยท GitHub Pages Tool 58 / 64
Hosting & deployment

GitHub Pages

Free static hosting straight from a GitHub repository. Commit your HTML, flip one setting, and your site is live at username.github.io โ€” no servers, no bill.

Demo 01

It starts with a repository

GitHub Pages serves files straight out of a Git repo. Here's a tiny static site โ€” an index.html, some CSS and JS. That's literally all you need.

your-username / my-portfolioPublic
๐Ÿ“„ index.html add hero section
๐ŸŽจ styles.css layout tweaks
โš™๏ธ main.js menu toggle
๐Ÿ“˜ README.md initial commit
Demo 02

Settings โ†’ Pages โ†’ choose a source

In the real GitHub UI you click Settings โ†’ Pages, pick the branch to publish from, and save. Try the simulated settings panel โ€” switch to the Pages tab and select a source to publish.

Demo 03

Publish โ†’ live URL

A few seconds after you save the source, GitHub builds the site and serves it. The status dot turns green and you get your public address.

๐Ÿ“ฆ
Commit
Push files to the repo
โ†’
โš™๏ธ
Settings โ†’ Pages
Pick source branch
โ†’
๐Ÿ”จ
Build
GitHub publishes it
โ†’
๐ŸŒ
Live
Served on the web
not published yet
Demo 04

Your site, live

Once published the URL works exactly like any website โ€” free HTTPS included. Publish in Demo 03 and this little browser preview loads your page.

about:blank

My Portfolio

Designer & front-end developer

Demo 05

Two ways to deploy โ€” and a custom domain

You can publish from a branch (classic), or run a build with GitHub Actions and deploy the output. Both are free. Point your own domain by adding a CNAME file.

# .github/workflows/deploy.yml โ€” build then publish
on: { push: { branches: [main] } }
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build
      - uses: actions/upload-pages-artifact@v3
        with: { path: dist }
  deploy:
    needs: build
    uses: actions/deploy-pages@v4
# CNAME (in repo root) โ†’ use your own domain
www.mysite.com
i
The repository view, the Settings โ†’ Pages panel, the publish flow and the browser preview are all simulated with vanilla JavaScript โ€” the real GitHub Pages builds and serves your files from GitHub's own cloud servers and CDN. The Actions workflow and CNAME snippets are real and work as shown. The shared CSS shell provides page styling.

โ†‘ All 64 tools