Deploy your Astro Site to Vercel

import PackageManagerTabs from '~~/components/tabs/PackageManagerTabs.astro'; import ReadMore from '~~/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components';

You can use Vercel to deploy an Astro site to their global edge network with zero configuration.

This guide includes instructions for deploying to Vercel through the website UI or Vercel's CLI.

Project configuration

Your Astro project can be deployed to Vercel as a static site, or a server-rendered site.

Static site

Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Vercel.

Adapter for on-demand rendering

Add the Vercel adapter to enable on-demand rendering in your Astro project with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

<PackageManagerTabs> <Fragment slot="npm"> ```shell npx astro add vercel ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm astro add vercel ``` </Fragment> <Fragment slot="yarn"> ```shell yarn astro add vercel ``` </Fragment> </PackageManagerTabs>

<ReadMore>See the Vercel adapter guide to install manually instead, or for more configuration options, such as deploying your project’s Astro middleware using Vercel Edge Functions.</ReadMore>

How to deploy

You can deploy to Vercel through the website UI or using Vercel’s CLI (command line interface). The process is the same for both static and on-demand rendered Astro sites.

Website UI deployment

<Steps> 1. Push your code to your online Git repository (GitHub, GitLab, BitBucket).

Import your project into Vercel.
Vercel will automatically detect Astro and configure the right settings.
Your application is deployed! (e.g. astro.vercel.app)
</Steps>

After your project has been imported and deployed, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly “main”) will result in a Production Deployment.

<ReadMore>Learn more about Vercel’s Git Integration.</ReadMore>

CLI deployment

<Steps> 1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install -g vercel
  vercel
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -g vercel
  vercel
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn global add vercel
  vercel
  ```
  </Fragment>
</PackageManagerTabs>

2. Vercel will automatically detect Astro and configure the right settings.

When asked Want to override the settings? [y/N], choose N.
Your application is deployed! (e.g. astro.vercel.app)
</Steps>

Project config with `vercel.json`

You can use vercel.json to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments.

<ReadMore>Learn more about Vercel’s project configuration.</ReadMore>