Why your site looks broken

This is the number one issue when hosting a built site. The page loads but stays blank, or the text shows up “naked” with no styling and no images. Here’s why, and the fix.

The symptom

• On your computer (double-clicking index.html), everything works.
• Once online, the page is blank, or the design is broken.
• If you open the browser console (press F12), you see 404 errors on .js or .css files.

The cause: absolute vs. relative paths

Inside your index.html, the browser is pointed to the other files (styling, scripts) in one of two ways:

<!-- ABSOLUTE path: "start from the root of the domain" -->
<script src="/assets/app.js"></script>

<!-- RELATIVE path: "start from right next to this page" -->
<script src="./assets/app.js"></script>

The difference is the / at the start (absolute) versus ./ (relative).

An absolute path only works if the site is served exactly at the root of the domain. If anything shifts the site, /assets/app.js points nowhere → file not found → blank page.

On Bailey, you’re at the root

Each Bailey site is served at the root of its subdomain, so absolute paths usually work fine. But relative paths work everywhere, no conditions; they’re the safe choice.

The fix, by tool

You tell the tool to generate relative paths. One line is enough:

Tool	Setting	Where
Vite (React, Vue…)	base: './'	vite.config.js
Create React App	"homepage": "."	package.json
Astro	(already relative by default)	–
Next.js	paths handled in static export	–

Vite example:

vite.config.js

import { defineConfig } from 'vite';
export default defineConfig({
  base: './',
});

After changing it: rebuild (npm run build) and re-upload the output folder. Sorted.

Check without going online

Open the index.html from your built folder in a text editor and look at the src= and href= values:

• They start with ./ or a plain file name → relative, perfect.
• They start with / → absolute; fine on Bailey, but if anything misbehaves, apply the setting above.