Build and Deploy Dev Nexus to Any Static Host

Overview

Dev Nexus is a fully static single-page application (SPA) built with Vite and React Router v6. It uses hash-based routing — every URL is in the form https://yourdomain.com/#/route — which means the browser never sends the route path to the server. Every request resolves to the same index.html, and React Router handles the rest in-browser. This architecture has one major deployment benefit: no server-side routing configuration is required. There are no rewrite rules, no try_files directives, and no special server config needed on any static host.

Build Commands

Build the project for production with Vite’s standard output pipeline:

npm run build

Vite compiles and bundles all React components, Tailwind CSS, and assets into the dist/ directory. The output includes:

dist/index.html — the SPA entry point with a hash redirect script
dist/pages/*.html — per-route static shells (e.g., About.html, Projects.html), each with window.__STATIC_PAGE_ROUTE__ set and a redirect to the corresponding #/route
dist/assets/main.js — all bundled React app code
dist/assets/main.css — all Tailwind-compiled CSS
dist/.nojekyll — GitHub Pages compatibility marker

To preview the production build locally before deploying:

npm run preview

This starts Vite’s built-in preview server, serving dist/ on a local port so you can verify the built output exactly as it will behave on a static host.

Deployment Targets

GitHub Pages
Vercel
Netlify
Self-hosted / CDN

GitHub Pages

The repo already includes a .nojekyll file in the built output, which is required for GitHub Pages to serve assets correctly (see The .nojekyll File below).Option 1 — Deploy the dist/ folder directly

Run npm run build to generate dist/.
Set your GitHub Pages source to the dist/ folder (via repository Settings → Pages → Source).
Push your changes. GitHub Pages will serve dist/index.html for all requests.

Option 2 — GitHub Actions workflowAdd a workflow file at .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Per-route static shellsThe pages/*.html shells (e.g., About.html, Projects.html) allow visitors to access routes directly. For example:

https://yourdomain.com/pages/About.html   → redirects to #/about
https://yourdomain.com/pages/Projects.html → redirects to #/projects

This is particularly useful when sharing deep links, since GitHub Pages will serve the matching .html file and then the hash redirect takes over.

Vercel

Vercel is the simplest deployment target for a Vite SPA. No rewrite rules are needed because hash routing handles all navigation client-side.Option 1 — Vercel CLI

npm i -g vercel
vercel --prod

Option 2 — Connect via Vercel Dashboard

Import your repository at vercel.com/new.
Vercel auto-detects Vite. Confirm these settings:

Setting	Value
Framework Preset	Vite
Build Command	`npm run build`
Output Directory	`dist`
Install Command	`npm install`

Click Deploy. Every push to main will trigger a new deployment automatically.

Because all routing is hash-based, you do not need to add any vercel.json rewrite rules.

Netlify

Option 1 — Drag and drop

Run npm run build.
Drag the entire dist/ folder onto app.netlify.com/drop.
Netlify will assign a live URL instantly — no configuration required.

Option 2 — Connect your repo

Click Add new site → Import an existing project in the Netlify dashboard.
Connect your Git provider and select the repository.
Set the build settings:

Setting	Value
Build command	`npm run build`
Publish directory	`dist`

Click Deploy site.

Subdirectory deploymentsIf you are deploying Dev Nexus to a subdirectory (e.g., https://yourdomain.com/portfolio/), add a _redirects file inside dist/ to ensure the root HTML is served:

/portfolio/*   /portfolio/index.html   200

Place this file at public/_redirects in your source project so Vite copies it to dist/ automatically on build.

Self-hosted / CDN

Dev Nexus can be served from any web server or CDN with zero special configuration.Steps

Run npm run build to produce the dist/ directory.
Copy the contents of dist/ to your web server’s document root (or a subdirectory).

rsync -avz dist/ user@yourserver.com:/var/www/html/

Because all routes are hash-based (/#/about, /#/projects, etc.), every request the browser sends to the server is for index.html. No .htaccess rewrites, no nginx try_files, and no special CDN path rules are needed.Recommended cache headersVite content-hashes all asset filenames (e.g., assets/main-3f2a1b.js). Set aggressive cache headers on the assets/ directory and short-lived headers on HTML files:

# nginx example
location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

location / {
    add_header Cache-Control "no-cache";
    try_files $uri /index.html;
}

For Apache, add to .htaccess:

<FilesMatch "\.html$">
  Header set Cache-Control "no-cache"
</FilesMatch>

<FilesMatch "assets/.*\.(js|css)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

Setting max-age=31536000 (one year) on hashed assets is safe because Vite generates a new filename hash whenever the content changes.

Environment Variables

The current Dev Nexus build has no required environment variables — all content is hardcoded in the React components and the site works offline with no external API calls. If you want to add analytics, contact form endpoints, or API keys in the future, create a .env file at the project root. Vite only exposes variables prefixed with VITE_ to client-side code:

# .env (project root — do not commit secrets)
VITE_ANALYTICS_ID=UA-XXXXXXX-X
VITE_CONTACT_ENDPOINT=https://api.example.com/contact

Access them in your components with import.meta.env:

const analyticsId = import.meta.env.VITE_ANALYTICS_ID;

Never put secret keys (API tokens, private credentials) in VITE_-prefixed variables. Because Vite inlines them into the client bundle at build time, they are visible to anyone who inspects dist/assets/main.js.

The .nojekyll File

The .nojekyll file is already present in the built output of this repo. You do not need to create it manually.GitHub Pages runs a Jekyll build pipeline by default. Jekyll ignores any file or directory whose name starts with an underscore (_). Vite outputs assets to dist/assets/ — not an underscore directory — so this is not a problem here. However, the .nojekyll file is kept as a safeguard: it signals to GitHub Pages to skip the Jekyll pipeline entirely and serve the directory contents as-is. This prevents any future asset naming changes from causing silent 404 errors, and it marginally speeds up deployments since the Jekyll step is skipped.

Theming & Design

Deployment

Build and Deploy Dev Nexus to Any Static Host

Overview

Build Commands

Deployment Targets

GitHub Pages

Vercel

Netlify

Self-hosted / CDN

Environment Variables

The .nojekyll File

Build docs developers (and LLMs) love

Theming & Design

Deployment

Documentation Index

​Overview

​Build Commands

​Deployment Targets

​GitHub Pages

​Vercel

​Netlify

​Self-hosted / CDN

​Environment Variables

​The .nojekyll File

Build docs developers (and LLMs) love

Overview

Build Commands

Deployment Targets

GitHub Pages

Vercel

Netlify

Self-hosted / CDN

Environment Variables

The .nojekyll File