Deploying your site

Static hosting or a server?

Your build is static: HTML, CSS, JS and images that are the same for every visitor. A static host stores these files and sends them, often from a CDN (a network of servers in many cities, so a user in Chennai gets the files from a server nearby). A server, by contrast, runs code for each request; you need one for logins, databases and anything secret. A portfolio and most practice projects need only static hosting.

GitHub Pages

1. Push your project to a GitHub repo (you learned Git and GitHub in the tools module).
2. Open the repo Settings, then Pages.
3. For plain HTML with no build step, choose "Deploy from a branch". For a Vite project, choose "GitHub Actions" and add a workflow that builds it.
4. A project site lives at https://<username>.github.io/<repo>/, so set base: "/<repo>/" in vite.config.js.
5. A repo named <username>.github.io becomes your user site at the root, and base stays "/".

# .github/workflows/deploy.yml (shortened)
name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist
      - uses: actions/deploy-pages@v4

Netlify and Vercel

Both work the same way: sign in with GitHub, import the repo, and check two settings. After that, every push to main updates the live site, and every pull request gets a preview deploy: a separate temporary site with its own link, so you (or a reviewer) can test the change before merging. Free plans exist for personal projects on GitHub Pages, Netlify and Vercel; limits and terms change, so check the current limits on the official site.

Single-page app routing fallback

With React Router, a URL like /orders/42 has no real file; JavaScript draws that page. Clicking links inside the app works. But when a user refreshes or opens a shared link, the host looks for a file called orders/42, finds nothing and shows 404. The fix: tell the host to send index.html for every path that is not a real file, with status 200. Netlify and Vercel do this with a small file (below). GitHub Pages has no rewrite setting; common workarounds are copying index.html to 404.html after the build, or using hash URLs like /#/orders/42.

# Netlify: a file named _redirects in public/ (copied into dist)
/*    /index.html   200

# Vercel: a file named vercel.json in the project root
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Custom domains, DNS and HTTPS

You can buy a domain such as ashaverma.in from a registrar (a company that sells domains, for a yearly fee). DNS is the phone book of the internet: it turns a name into an address. You add records at your registrar:

Copy the exact values from your host's documentation; do not guess. DNS changes can take from a few minutes to some hours to spread. GitHub Pages, Netlify and Vercel then give you an HTTPS certificate automatically, for free. On GitHub Pages, tick "Enforce HTTPS".

Rolling back

A bad deploy went live? Netlify and Vercel keep every old deploy: open the list of deploys, pick the last good one and publish (or promote) it. It takes seconds. Then fix the bug calmly in code and push. On GitHub Pages, git revert the bad commit and push; the workflow deploys the old code again.