nuxt generate prerenders every route of your Nuxt app into .output/public. To run Nuxt with a server, deploy it with Magic Containers.
Deploy your site
- Bunny CLI
- Manually
1
Install the Bunny CLI and log in
2
Create a site
From your project root, run:Replace
my-site with a name for your site. The CLI creates a storage zone for your files and a pull zone to serve them, then links this directory to the new site. The site is served at a b-cdn.net address, and the CLI prints the URL.3
Build and deploy
bunny sites deployments publish --previous.4
Deploy on every push (optional)
.github/workflows/bunny-sites.yml that deploys the site on every push to main. Add your API key to the repository as a BUNNYNET_API_KEY secret. The CLI offers to run gh secret set BUNNYNET_API_KEY for you.Resize images with Bunny Optimizer
Nuxt Image has a built-inbunny provider that adds Bunny Optimizer parameters to each image URL, so nuxt generate skips image processing and the edge resizes every width in the srcset.
1
Turn on Optimizer
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.
2
Use the bunny provider
nuxt.config.ts
baseURL of / keeps image URLs relative, so they work on the b-cdn.net address and your custom domain.3
Add images
<NuxtImg> writes a srcset with URLs such as /images/photo.jpg?width=768&height=384. Use breakpoint prefixes in sizes, since a bare 100vw produces 1px and 2px entries.Add a custom domain
With the Bunny CLI, add the domain to your site: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.