Host a static site on Bunny Storage - bunny.net Documentation

A static site on bunny.net is a storage zone that holds your built files, with a pull zone in front that serves them from the CDN. You can set that up with the Bunny CLI, which detects your framework, runs the build, and uploads the output, or you can create the zones in the dashboard and upload the files yourself.

Deploy your site

Bunny CLI
Manually

bunny sites is in Public Preview and available only in the Bunny CLI. It’s in active development, so commands, flags, and behaviour may change. Share feedback on Discord. The storage zone and pull zone behind each site appear in the dashboard under Storage and CDN.

From your project root:

bunny sites create my-site
bunny sites deploy --build

bunny sites create makes the storage zone and pull zone and links your directory to the site. bunny sites deploy --build detects your framework, runs its build with the package manager from your lockfile (Bun, pnpm, Yarn, or npm), and publishes the output directory. Each deploy is kept, so bunny sites deployments publish --previous rolls back to the last one.Run bunny sites ci init to add a GitHub Actions workflow that deploys on every push to main. See bunny sites for every command.

Build your site

From your project root, run your framework’s build command. The framework guides list the command and output directory for each framework.

Create a storage zone

In the bunny.net dashboard, go to Storage and click Add Storage Zone. Give it a name, pick the main region closest to your audience, and click Add Storage Zone.

Upload your files

Open the storage zone’s file manager and upload the contents of your output directory to the root of the zone. To script uploads, use the Storage HTTP API.

Create a pull zone

Go to CDN and click Add Pull Zone. Set Origin Type to Storage Zone, select the zone you created, and click Add Pull Zone.Your site is live at https://<pull-zone-name>.b-cdn.net.

Site configuration

When you deploy with the Bunny CLI and detection doesn’t fit your project, add a sites block to bunny.jsonc at your project root. Every field is optional:

bunny.jsonc

{
  "sites": {
    "name": "my-site",
    "build": "npm run build",
    "dir": "dist",
    "spa": true
  }
}

Field	Description
`name`	The site this directory deploys to
`build`	The command `bunny sites deploy --build` runs
`dir`	The directory to deploy, relative to `bunny.jsonc`
`spa`	Serve `index.html` for unknown paths, for apps with client-side routing

bunny sites ci init reads the same file, so GitHub Actions builds and deploys what you deploy locally.

Framework guides

Each guide lists the build command and output directory, any config your framework needs for static output, and the steps for both the CLI and a manual deploy.

JavaScript frameworks

Analog

Angular

Astro

Brunch

Ember

Next.js

Nuxt

Preact

Qwik

React

React Router

SolidStart

SvelteKit

Vite

Vue

Static site generators

Elder.js

Eleventy

Gatsby

Gridsome

Hexo

Hugo

Jekyll

Pelican

Zola

Documentation

Docusaurus

MkDocs

Sphinx

VitePress

Other

Blazor WebAssembly

Static HTML

Single-page apps

Single-page apps (React, Vue, Angular, and others) handle routing in the browser. When someone opens a deep link such as /dashboard or refreshes the page, the request has to return index.html so the router can take over. The Bunny CLI sets this up for frameworks that build single-page apps, and asks when a build looks like one. For a manual deploy, configure your storage zone:

Open your storage zone

In the bunny.net dashboard, go to Storage and select your storage zone.

Open Error handling

Open the Error handling page.

Serve index.html for missing paths

Enter /index.html in the 404 File path field, check Rewrite 404 to 200 status code, and click Save.

Requests for missing files with an extension, such as .js, .css, or images, still return a 404. See Storage zone settings for details.

Add a custom domain

With the Bunny CLI, add the domain to your site:

bunny sites domains add example.com

The CLI prints the CNAME record to create with your DNS provider. Once the record resolves, issue a free certificate with bunny sites domains ssl example.com. For a manual deploy, add the hostname to your pull zone by following Custom hostnames.

Resize images with Bunny Optimizer

Bunny Optimizer resizes images at the edge from query parameters such as ?width=640, so your build can ship one copy of each image. bunny sites create leaves query strings and Optimizer off, so open the site’s pull zone under CDN → Pull Zones:

Turn on URL Query String vary, so each ?width= gets its own cache entry.
Enable Bunny Optimizer, then turn on the Dynamic Image API and automatic WebP under Optimizer → Settings. Your build has already minified CSS and JavaScript, so turn Optimizer’s minification off.

The Next.js, Nuxt, Astro, and Angular guides plug Optimizer into each framework’s image component. Anywhere else, write the srcset yourself:

<img
  src="/images/photo.jpg?width=1200"
  srcset="/images/photo.jpg?width=640 640w, /images/photo.jpg?width=1200 1200w"
  sizes="100vw"
  alt="Photo"
/>

Cache configuration

Static frontends benefit from long cache times on assets. Consider these settings in your pull zone:

File type	Recommended cache time
HTML	Short (1 hour) or use cache busting
JS/CSS (hashed)	Long (1 year)
Images	Long (1 month+)
Fonts	Long (1 year)

Build tools such as Vite add content hashes to filenames (for example, main.a1b2c3.js), so these files are safe to cache indefinitely.

​Deploy your site

​Site configuration

​Framework guides

​JavaScript frameworks

Analog

Angular

Astro

Brunch

Ember

Next.js

Nuxt

Preact

Qwik

React

React Router

SolidStart

SvelteKit

Vite

Vue

​Static site generators

Elder.js

Eleventy

Gatsby

Gridsome

Hexo

Hugo

Jekyll

Pelican

Zola

​Documentation

Docusaurus

MkDocs

Sphinx

VitePress

​Other

Blazor WebAssembly

Static HTML

​Single-page apps

​Add a custom domain

​Resize images with Bunny Optimizer

​Cache configuration

Deploy your site

Site configuration

Framework guides

JavaScript frameworks

Static site generators

Documentation

Other

Single-page apps

Add a custom domain

Resize images with Bunny Optimizer

Cache configuration