Astro

Documentation

Quickstart

Installation

npm create --yes astro@latestnpm install bunny-astro

Configuration

Update your config to use the bunny-astro adapter and set the output to server:

// @ts-checkimport { defineConfig } from 'astro/config'import bunny from 'bunny-astro'import mdx from '@astrojs/mdx'import sitemap from '@astrojs/sitemap'// https://astro.build/configexport default defineConfig({  site: 'https://example.com',  output: 'server',  adapter: bunny({    imageService: 'bunny',  }),  integrations: [mdx(), sitemap()],})

Also, update your site metadata in astro.config.mjs (e.g. site).

There are four image service options:

  • bunny: Uses the Bunny Optimizer service.
  • passthrough: Uses the existing noop service.
  • compile: Uses Astro’s default service (sharp), but only on pre-rendered routes at build time. During SSR for pages rendered on-demand, all astro:assets features are disabled.
  • custom: Always uses the image service configured in Image Options. This option will not check to see whether the configured image service works in edge scripting runtime.

The adapter will default to compile mode when an incompatible image service is configured. Otherwise, it will use the globally configured image service. Unfortunately, due to a bug in Astro core, you will receive warnings locally about the image service.

If you are are using the blog template, please remove all usage of getStaticPaths():

src/pages/blog/[...slug].astro

---import { type CollectionEntry, getCollection } from 'astro:content'import BlogPost from '../../layouts/BlogPost.astro'export async function getStaticPaths() {  const posts = await getCollection('blog');  return posts.map((post) => ({    params: { slug: post.slug },    props: post,  }));}const posts = await getCollection('blog') type Props = CollectionEntry<'blog'>const post = Astro.props const { slug } = Astro.paramsconst post = posts.find((page) => page.slug === slug)if (!post) return Astro.redirect('/404')const { Content } = await post.render()---<BlogPost {...post.data}>  <h1>{post.data.title}</h1>  <Content /></BlogPost>

All features, such as Static File Endpoints, Middleware, and Content Collections, are supported too.

Configuration with Static Site Generation (SSG)

This adapter was made specifically for server-side rendering (SSR). For SSG, follow these instructions instead.

Deployment

Build

npm run build

Deploy

npx --yes bunny-launcher@latest --interactive