Skip to main content

Documentation Index

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

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

Web Surfer compiles down to a fully self-contained dist/ folder of HTML, CSS, and JavaScript. Because every navigation happens client-side inside the URL hash, the site runs on any static host without server configuration, redirect rules, or a backend. Pick a platform, point it at the build output, and you’re live.

​
Build

Run the Vite build command from the project root: 
npm run build
Vite writes the output to dist/ with the following structure: 
dist/
├── index.html
├── assets/
│   ├── main.js
│   ├── main.css
│   ├── jsx-runtime.js
│   └── proxy.js
├── components/
│   ├── Layout.js
│   ├── Win98Window.js
│   └── SparkleCursor.js
└── pages/
    ├── About.html
    ├── Blog.html
    ├── CaseStudies.html
    ├── Contact.html
    ├── Projects.html
    ├── Skills.html
    ├── Testimonials.html
    └── Work.html
Everything inside dist/ is static — no Node.js runtime, no API server, no environment variables required at runtime.

​
GitHub Pages

1

Push to a deployable branch

Copy the contents of dist/ to the root of your gh-pages branch, or configure your workflow to deploy the dist/ folder directly. With GitHub Actions you can use the actions/deploy-pages action to publish the build output automatically on every push to main.
2

Configure the Pages source

In your repository, go to Settings → Pages. Under Source, select the branch and folder that contains the built files (e.g., gh-pages / root, or main / docs if you copied the output there).
3

Visit your site

GitHub Pages will publish the site at https://<username>.github.io/<repo>/. The root index.html is served for the base URL, and each pages/*.html file is reachable at its own path.
The repository includes a .nojekyll file at the root. This empty file tells GitHub Pages to skip its default Jekyll processing, which would otherwise ignore any file or folder whose name begins with an underscore — including Vite’s _ prefixed assets if they appear in future builds.

​
Netlify

The simplest approach is to drag and drop the dist/ folder onto the Netlify dashboard at app.netlify.com — no configuration needed, your site is live in seconds. To set up continuous deployment from your GitHub repository instead, connect the repo in the Netlify UI and enter these build settings:
SettingValue
Build commandnpm run build
Publish directorydist
Netlify will rebuild and redeploy automatically on every push to your production branch.

​
Vercel

Connect your GitHub repository to Vercel. Vercel auto-detects Vite projects, so the defaults are usually correct — verify the following settings in the project configuration:
SettingValue
Framework PresetVite
Output Directorydist
Build Commandnpm run build (auto-detected)
Click Deploy. Vercel assigns a *.vercel.app domain immediately, and you can attach a custom domain in the project settings.

​
Cloudflare Pages

In the Cloudflare Pages dashboard, create a new project and connect your GitHub repository. Set the build configuration to:
SettingValue
Build commandnpm run build
Build output directorydist
Cloudflare Pages deploys to a global CDN automatically and provides a *.pages.dev preview URL alongside any custom domain you configure.

​
Why no redirect rules are needed

Web Surfer uses hash routing — every URL in the app looks like yoursite.com/#/about or yoursite.com/#/projects. The part after # is the URL fragment, which is never sent to the server. Every request the browser makes — whether for the root, a reload on a deep link, or a direct visit — always requests index.html. React Router reads the fragment on the client side and renders the correct page component. This means you do not need to configure _redirects files, vercel.json rewrites, or .htaccess catch-all rules. Any static host that serves index.html for the root path will work correctly.
The pages/ subdirectory HTML files give visitors a second way to deep-link into specific pages. A URL like yoursite.com/pages/About.html loads that HTML file directly, which runs the window.__STATIC_PAGE_ROUTE__ script to set the hash to #/about before React boots — landing the visitor on the About page without any server-side routing. Share these URLs in your portfolio links or email signature for a clean direct entry point to each section.
If you fork the repository or rename it, the pages/*.html files reference assets with relative paths (../assets/main.js, ../assets/main.css). These paths are relative to the pages/ folder, so they stay correct as long as the pages/ and assets/ directories remain siblings. If you restructure the output directory layout, update the src and href attributes in every pages/*.html file accordingly, then rebuild.

Build docs developers (and LLMs) love

Get started for freeTalk to us