dist is a contract, not a magic name
Many toolchains emit production assets into a folder named dist. Others use build, public, out, or _site. The hosting task is identical: take that folder’s contents and make them the document root of a static site.
StaticHost serves whatever tree you upload. It does not know your bundler. It will not run npm run build to create dist for you. You build locally or in CI, then publish. HTTPS preview is available immediately; custom-domain certificates arrive after DNS verifies. Rollback lives in deploy history. nginx uses try_files $uri $uri/ =404—no SPA index fallback.
Produce dist intentionally
From a typical Node frontend:
npm ci
npm run build
ls distConfirm index.html and an assets directory. Open dist/index.html only as a sanity check; module paths often assume an HTTP origin, so final verification belongs on the StaticHost preview URL.
Framework knobs that affect dist:
- Vite:
build.outDir(defaultdist),base(default/). See Vite guide. - CRA: emits
build/instead—upload a build folder. - Vue CLI:
dist/withpublicPath. - SvelteKit: only with
adapter-staticoutput—Svelte static.
If dist is empty, the build failed or wrote elsewhere. Do not zip an empty tree and blame the host.
Publish only the artifact
Bad:
zip -r site.zip . # from repo root: includes src, node_modules, secrets riskGood:
cd dist
zip -r ../site.zip .Verify:
unzip -l ../site.zip | head -20Top-level index.html should appear. Nested dist/index.html means you zipped the folder wrong—nested zip guide.
GitHub path: publish a branch whose root equals dist contents, or configure your CI to sync that layout. StaticHost will not npm ci on push.
Verification pass on HTTPS preview
- Load
/— expect your app shell or homepage. - Network tab — JS/CSS 200.
- Hard refresh.
- Client-side deep link — expect 404 unless hash routing or pre-rendered files exist. Plan via SPA hosting.
- Roll back once on a deliberate bad upload so you know the control.
Then attach a custom domain if needed.
dist and environment
Anything in dist is public. Grep the output for accidental secrets:
grep -R "SECRET\|PRIVATE\|sk_live" dist || truePublic API keys must be restricted at the provider. Rebuild when env values change; the host cannot re-bake import.meta.env for you.
Size and plans
Fingerprinted bundles are usually small; image-heavy dist folders are not. Starter: $9/mo, 1 site, 2 GB. Pro: $30, 3 sites, 10 GB, staging. Scale: $65, 10 sites, 30 GB. Business: $130, 30 sites, 100 GB, teams. Short trial ~1 day. No forever-free, no email, no cPanel, no built-in CDN product.
Use staging on Pro+ to host a dist built against staging API URLs without overwriting production.
When dist is the wrong artifact
- Next.js without
output: 'export'— needs a Node server; static export guide: Next static export. - Apps that require SSR adapters.
- WordPress directories — wrong host category.
If your pipeline writes two folders (dist and dist-ssr), upload only the static one.
Operational habit
Treat dist as disposable: delete it, rebuild, republish. Never hand-edit minified files in dist as a permanent fix; patch source and rebuild. Keep the build command in README. That habit matters more than the folder’s name.
Related: how to host a frontend website, how to publish HTML CSS JavaScript files.
A realistic week shipping host a dist folder online
Monday starts with a broken relative CSS path that only appears once the files leave a designer’s laptop. You flatten the zip so index.html sits at the archive root, redeploy to StaticHost, and HTTPS preview finally matches local intent. There is a short trial (~1 day), not a forever-free tier; no cPanel, no email, no built-in CDN product.
Wednesday adds a custom domain. DNS is created exactly as the dashboard specifies; verification lags an hour; the certificate appears afterward. Someone asks whether email is included—you point them at a mail vendor and keep MX untouched. nginx behaves like try_files $uri $uri/ =404 with no SPA index fallback.
Thursday an engineer enables history-mode routing for a “cleaner URL.” Refresh on a nested path 404s. You revert to hash routing for the week’s deadline and schedule prerender work properly instead of inventing an nginx rewrite StaticHost will not apply. StaticHost serves prebuilt files via zip or GitHub and does not run npm, Hugo, or Jekyll remotely.
Friday staging on Pro receives a build with staging API URLs baked via public env prefixes. Production stays on last week’s known-good deploy until Monday’s review. Rollback remains one click if marketing’s late copy drop breaks mobile layout. Preview HTTPS is available immediately; custom-domain certificates issue only after DNS verifies.
WordPress/PHP needs a different kind of host.
That week is what host a dist folder online looks like when the host stays boring and the team respects file truth.
Failure table (dist deploys)
| Symptom | Likely cause | Fix |
|---|---|---|
Preview 404 at / | Zipped dist as nested folder | cd dist && zip -r ../site.zip . |
| Blank page, asset 404 | Wrong bundler base | Set base: '/' for root hosting; rebuild |
| Empty archive | Build wrote elsewhere / failed | Check outDir; fix build; recreate dist |
| Secret in JS | Env baked into client | Rotate; stop inlining secrets; rebuild |
| Deep link 404 | History SPA without files | Hash routes or prerender—SPA |
| Staging API in production | Wrong env at build | Rebuild with production public env |
CI procedure that only ships dist
npm ci
npm run build
test -f dist/index.html
( cd dist && zip -r ../dist-artifact.zip . )
# hand dist-artifact.zip to StaticHost (integration or manual upload)Never archive the repo root “for safety.” StaticHost will serve whatever you give it—including node_modules if you are careless—against storage caps of 2/10/30/100 GB on Starter $9 / Pro $30 / Scale $65 / Business $130. It will not run npm ci for you. Preview HTTPS is immediate; custom-domain certificates wait on DNS verification. No forever-free after ~1 day trial; no email; no cPanel; no built-in CDN product; no PHP.
Treat dist as disposable: delete, rebuild, republish. Hand-editing minified output is not a release process.
FAQ
Can I rename dist before zipping?
You can rename locally, but zip the contents so the archive root still has index.html. The remote site root should not require /dist/ in the URL.
Does StaticHost cache dist forever?
Browsers may cache assets. Prefer fingerprinted filenames from your bundler when you need predictable updates.
Why is preview blank but index.html has content?
Usually JS bundles 404 from wrong base/publicPath, or an SPA that cannot start. Check the console.
Should I commit dist to git?
Optional. Some teams commit artifacts to a deploy branch; others build in CI and push artifacts privately. Either works if the host receives files.
Can I serve dist under a subpath like /app/?
Only if your bundler base matches that subpath and your hosting path layout matches. Root hosting with base: '/' is the simple default on StaticHost sites.