---
title: "Astro Boilerplate"
description: "An Astro site, using the basics starter kit."
url: "https://vercel.com/templates/astro/astro-boilerplate"
links:
  repository: "https://github.com/vercel/examples/tree/main/framework-boilerplates/astro"
  demo: "https://astro-template.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Astro+Boilerplate&demo-description=An+Astro+site%2C+using+the+basics+starter+kit.&demo-url=https%3A%2F%2Fastro-template.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F7s4Lxeg0kZof4ZuZfA7sjV%2F20eac2ba6e52426a62b3c0e4b1dbb412%2FCleanShot_2022-05-23_at_22.09.38_2x.png&project-name=Astro+Boilerplate&repository-name=astro-boilerplate&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fframework-boilerplates%2Fastro&from=templates&skippable-integrations=1"
---

# Astro Boilerplate

An Astro site, using the basics starter kit.

# Astro

This directory is a brief example of an [Astro](https://astro.build/) site that can be deployed to Vercel with zero configuration. This demo showcases:

- `/` - A static page (pre-rendered)
- `/ssr` - A page that uses server-side rendering (through [Vercel Functions](https://vercel.com/docs/functions))
- `/ssr-with-swr-caching` - Similar to the previous page, but also caches the response on the [Vercel Edge Network](https://vercel.com/docs/edge-network/overview) using `cache-control` headers
- `/image` - Astro [Asset](https://docs.astro.build/en/guides/images/) using Vercel [Image Optimization](https://vercel.com/docs/image-optimization)

Learn more about [Astro on Vercel](https://vercel.com/docs/frameworks/astro).

## Deploy Your Own

Deploy your own Astro project with Vercel.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/framework-boilerplates/astro&template=astro)

_Live Example: https://astro-template.vercel.app_

## Project Structure

Astro looks for `.astro`, `.md`, or `.js` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components or layouts.

Any static assets, like images, can be placed in the `public/` directory.

## Commands

All commands are run from the root of the project, from a terminal:

| Command                | Action                                             |
| :--------------------- | :------------------------------------------------- |
| `pnpm install`          | Installs dependencies                              |
| `pnpm run dev`          | Starts local dev server at `localhost:3000`        |
| `pnpm run build`        | Build your production site to `./dist/`            |
| `pnpm run preview`      | Preview your build locally, before deploying       |
| `pnpm run start`       | Starts a production dev server at  `localhost:3000`     |
| `pnpm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
| `pnpm run astro --help` | Get help using the Astro CLI                       |

## Related Templates

### [SvelteKit Boilerplate](https://vercel.com/templates/svelte/sveltekit-boilerplate)

A SvelteKit app including nested routes, layouts, and page endpoints.

### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate)

Get started with Next.js and React in seconds.

### [Create React App](https://vercel.com/templates/react/create-react-app)

A client-side React app created with create-react-app.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.