Skip to content
Docs

Static sites

Host plain HTML, or a React, Vue or Svelte app built with Vite. We build it and serve its files, with SSL and a fast cache at the door.

Updated 27 Oct 20263 min read

A static site is files a browser reads as they are: HTML, CSS, JavaScript and pictures. Tanzahost serves them for you, with SSL, on a free address or your own domain. You can send plain files, or code that a bundler like Vite turns into files on every deploy.

No files yet? Start from our static site starter: one HTML page and its CSS. Choose Static site under What are you building? on a new account's home, or, in a project, Add a service, then App or website, and under Where's your code?, Starter, then Static site. Send your own files later with Send new code on the app's Code card.

Plain HTML

Put index.html at the top of your repository or ZIP file, or in a public folder. We see a static site and serve that folder: nothing to install, no build.

text
duka-launch/
  index.html
  styles.css
  images/
    logo.png

Built with a bundler

A Node.js project whose package.json has a build script, but no start script, no main file and no server file (server.js, server.mjs, index.js, app.js or main.js), is a site built into files: a React, Vue or Svelte app made with Vite, for example. We install its packages, run the build, and serve the folder it writes:

Your buildWe serve
Vite and most othersdist
A build script with --outDir or --out-dirThe folder it names
Create React App (react-scripts)build

We also read the generator's own settings for the folder it writes: Astro's and Docusaurus's (dist, build), Jekyll's (_site, built with Ruby), MkDocs's (site), and Next.js with output: 'export' (out). A workspace whose app is a static site, like Excalidraw's, is built the same way from its folder.

Frameworks that run their own server, like Next.js, Nuxt or SvelteKit, deploy as Node.js apps instead.

A generator we don't build yet

Hugo isn't on offer yet. Code that needs it stops before anything is built, with one sentence and Ask us to add it, so you never wait for a build that can't work. Every ask is counted, and the most asked come first.

Links deep inside a single-page app

We serve the files exactly as they are, with no fallback to index.html. In a React or Vue app that makes its own pages in the browser (a router), opening an address like /products/42 directly, or reloading it, finds no such file and shows "not found". Use your router's hash mode (/#/products/42), or have the build write an index.html for each page.

Example: Asha's launch page

Before her shop opened, Asha put a one-page launch site online. Her repository is a Vite project:

json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^7.0.0"
  }
}
  1. In her project duka, she chooses Add a service, then App or website, names it launch, and picks the repository.

  2. We find a static site, install its packages, run npm run build, and serve dist.

  3. It's live on its free address, like launch-duka-q4w8.tanzahost.co, with SSL.

Every push to her branch builds and deploys it again, without downtime.

What it costs

A static site is an app like any other: it pays for the memory and processor time it really uses, and for its storage. Serving files needs very little, so it's one of the cheapest things to run. A month at 50 MB of memory and 1% of a processor is about $0.42. See How billing works.

Builds count by the minute ($0.004 a minute), so a site that rebuilds on every push pays a little for each build.

Fast by default

Pictures, styles, scripts and fonts that your site allows to be cached are kept in memory at the door, where every visit arrives before it reaches your app, so they load fast. Each deploy clears them. See Protection and speed.

Change what we found

On the app's page, Set up and run shows the build command and what we found. Set Folder when the site lives in a folder of a larger repository, or set the language to Static site in tanzahost.json to serve the files as they are:

json
{
  "language": "static"
}