Skip to main content

Documentation Index

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

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

Dark Retro Webpage is a fully static single-page application. The production build outputs a plain dist/ folder containing one index.html, one JavaScript bundle, and one CSS file — nothing that requires a server process, database, or serverless function. Because all client-side routing is implemented with URL hashes (e.g. /#/about), the browser never makes a request for a path like /about. This means you can host the site on any static file host without configuring URL rewrites or redirect rules.

​
Build for Production

Before deploying, compile the project with Vite: 
npm run build
Vite outputs the compiled site to the dist/ directory: 
dist/
├── index.html
├── assets/
│   ├── main.js
│   └── main.css
├── useScreenInit.js
└── components/
    ├── Win98Window.js
    └── Marquee.js
To preview the production build locally before deploying: 
npm run preview
This starts a local server at http://localhost:4173 serving the dist/ folder.

​
Deployment Options

GitHub Pages serves static files directly from a repository branch or the docs/ folder. The simplest approach is to deploy from the dist/ output using the gh-pages package.
1

Install gh-pages

npm install --save-dev gh-pages
2

Add a deploy script to package.json

{
  "scripts": {
    "build": "vite build",
    "deploy": "gh-pages -d dist"
  }
}
3

Configure the base path in vite.config (subdirectory only)

If you are deploying to a repository subdirectory (e.g. https://username.github.io/dark-retro-webpage/), set base in vite.config.ts:
// vite.config.ts
export default {
  base: "/dark-retro-webpage/",
};
If you are deploying to a custom domain or username.github.io (root), leave base as "/" or omit it.
4

Build and deploy

npm run build
npm run deploy
The gh-pages package pushes the contents of dist/ to the gh-pages branch of your repository. GitHub Pages will serve that branch automatically.
5

Enable GitHub Pages in repository settings

Go to Settings → Pages in your GitHub repository. Set the source to the gh-pages branch and the folder to / (root). Save. Your site will be live at https://username.github.io/dark-retro-webpage/ within a minute or two.
The repository already contains a .nojekyll file in the project root. This file is critical for GitHub Pages — without it, Jekyll (GitHub’s default static site processor) would ignore files and folders whose names start with an underscore, which can break Vite’s asset output. The gh-pages package copies .nojekyll to the deployed branch automatically. Do not delete this file.

​
Hash Routing Explained

Traditional SPAs often rely on the HTML5 History API (/about, /projects) and require the server to rewrite all paths to index.html. Dark Retro Webpage deliberately avoids this by using hash-based routing: every route is expressed as the fragment portion of the URL, after the # character.
  • https://example.com/#/ — Home
  • https://example.com/#/about — About
  • https://example.com/#/projects — Projects
  • https://example.com/#/skills — Skills
  • https://example.com/#/writing — Writing
  • https://example.com/#/case-studies — Case Studies
  • https://example.com/#/contact — Contact
The browser treats everything after # as a client-side fragment. It only ever requests index.html from the server — the React router reads window.location.hash at runtime and renders the correct view. No server, CDN, or hosting platform ever sees a request for /about. The following bootstrap script in index.html ensures the hash is always present, even when the page is loaded at a bare path (such as after a hard refresh on the root URL): 
window.__STATIC_PAGE_ROUTE__ = "/";

(function () {
  if (!window.location.hash || window.location.hash === "#") {
    window.location.replace(
      window.location.pathname +
      window.location.search +
      "#/"
    );
  }
})();
window.__STATIC_PAGE_ROUTE__ records the canonical route for the current page (used during the initial server-side build pass). The IIFE checks whether a hash fragment exists; if not — or if only a bare # is present — it immediately replaces the URL with one that includes #/, pointing the React router at the home route.
Do not remove or modify the #/ redirect logic in the index.html script. If the hash fragment is absent when the page loads, React Router will not match any route and the page will render blank. This script is the only mechanism that guarantees the router always receives a valid hash on initial load.

​
Custom Domain

All three hosting providers support custom domains at no extra cost on their free tiers. GitHub Pages — In your repository’s Settings → Pages, enter your domain in the “Custom domain” field. Add a CNAME DNS record pointing to username.github.io at your domain registrar. GitHub will automatically provision a TLS certificate via Let’s Encrypt. Netlify — Go to Site settings → Domain management → Add a domain. Follow the prompts to add your domain and update your DNS records. Netlify provisions TLS automatically. Vercel — Go to your project’s Settings → Domains and add your custom domain. Vercel will display the DNS records you need to create at your registrar and provision TLS automatically.
Because hash routing is entirely client-side, your custom domain setup does not need any special path handling. Point your domain at the host’s servers and the site will work exactly as it does on the default subdomain.

Build docs developers (and LLMs) love

Get started for freeTalk to us