Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retro-webpage/llms.txt

Use this file to discover all available pages before exploring further.

Retro Webpage is a fully static site — Vite compiles the React source into plain HTML, CSS, and JavaScript files that can be hosted anywhere a web server can serve files. There is no backend, no Node.js runtime required in production, and no database to configure. This guide walks through building the project and deploying it to the three most popular static hosts: GitHub Pages, Netlify, and Vercel.

​
Build the Project

Before deploying, you need to produce the production bundle. Vite compiles, minifies, and fingerprints all assets into a dist/ directory. 
npm run build
After the build completes, the output structure looks like this: 
.nojekyll                 # Prevents GitHub Pages Jekyll processing (repo root)
dist/
├── index.html            # App entry point
├── assets/
│   ├── main.js           # Bundled React app (fingerprinted)
│   └── main.css          # Compiled Tailwind CSS (fingerprinted)
├── components/           # Pre-built component modules
└── pages/
    ├── About.html
    ├── Blog.html
    └── ...               # One shell file per route
To verify the build locally before deploying, run the Vite preview server: 
npm run preview
This serves the dist/ folder at http://localhost:4173 and behaves identically to a production static host.

​
Deploy to GitHub Pages

GitHub Pages serves the contents of a branch or folder directly as a static site. The repository already includes a .nojekyll file at the root, which tells GitHub Pages to skip its Jekyll build pipeline and serve your files as-is.
1

Build the project

Run the production build to generate the dist/ folder:
npm run build
2

Configure the GitHub Pages source

In your repository on GitHub, go to Settings → Pages. Under Build and deployment, set the source to GitHub Actions (recommended) or point it at the branch and folder that contains your built files.
3

Deploy using GitHub Actions (recommended)

Create a workflow file at .github/workflows/deploy.yml to automate builds on every push:
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - uses: actions/deploy-pages@v4
4

Verify the deployment

Once the workflow succeeds, GitHub Pages will serve your site at https://<your-username>.github.io/<repo-name>/. Open the URL and confirm that navigating between pages updates the hash fragment correctly (e.g., /#/about).

​
Deploy to Netlify

Netlify can build and deploy your site automatically from a Git repository or from a manual file upload.
1

Connect your repository

Log in to app.netlify.com and click Add new site → Import an existing project. Select your Git provider and choose the repository.
2

Configure the build settings

Netlify will usually detect the Vite framework automatically. Confirm or set these values manually:
SettingValue
Build commandnpm run build
Publish directorydist
Node version20 (set in Environment variables as NODE_VERSION)
3

Deploy the site

Click Deploy site. Netlify runs the build command, uploads the dist/ output to its CDN, and provides a live URL in the format https://<random-slug>.netlify.app.
4

Set a custom domain (optional)

In Site configuration → Domain management, add your custom domain and follow the DNS instructions. Netlify provisions a free TLS certificate via Let’s Encrypt automatically.

​
Deploy to Vercel

Vercel’s zero-configuration deployment works seamlessly with Vite projects.
1

Import your project

Log in to vercel.com and click Add New → Project. Import the repository from your Git provider.
2

Confirm the framework preset

Vercel auto-detects Vite and pre-fills the correct settings. Verify that the Framework Preset is set to Vite, the Build Command is npm run build, and the Output Directory is dist.
3

Deploy

Click Deploy. Vercel builds the project and serves it at https://<project-name>.vercel.app. Every subsequent push to the default branch triggers an automatic re-deployment.
Because Retro Webpage uses HashRouter, all routing is handled entirely in the browser via the URL # fragment. The server only ever needs to serve one file — index.html — regardless of which page the user navigates to. This means you do not need a _redirects file (Netlify), a vercel.json rewrite rule, or any other server-side catch-all configuration. The .nojekyll file already present in the repo is the only host-specific file needed for GitHub Pages.
If you deploy to a subdirectory rather than a domain root (e.g., https://yourname.github.io/retro-webpage/), you must set the base option in vite.config.js to match the subdirectory path. Without this, Vite generates asset paths relative to / and the browser will fail to load scripts and styles.
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/retro-webpage/', // 👈 match your GitHub Pages repo name
})
After updating base, re-run npm run build and redeploy. You can leave base as '/' (the default) when deploying to a domain root on Netlify or Vercel.

Build docs developers (and LLMs) love

Get started for freeTalk to us