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 ConfigurationSection titled Project Configuration
Your Astro project can be deployed to Vercel as a static site, or as a server-side rendered site (SSR).
Static SiteSection titled 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 SSRSection titled Adapter for SSR
To enable SSR in your Astro project and deploy on Vercel:
Add the Vercel adapter to enable SSR 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.
If you prefer to install the adapter manually instead, complete the following two steps:
@astrojs/verceladapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
Add two new lines to your
astro.config.mjsproject configuration file.
How to deploySection titled 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 SSR Astro sites.
Website UI DeploymentSection titled Website UI Deployment
- 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)
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.
📚 Learn more about Vercel’s Git Integration.
CLI DeploymentSection titled CLI Deployment
Install the Vercel CLI and run
Vercel will automatically detect Astro and configure the right settings.
Want to override the settings? [y/N], choose
Your application is deployed! (e.g. astro.vercel.app)
Project config with vercel.jsonSection titled 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.
📚 Learn more about Vercel’s project configuration.
Upgrading to Astro 2.0Section titled Upgrading to Astro 2.0
Astro v2.0 drops support for Node 14, so make sure your project is using Node
18.14.1 or later. You can define the Node.js version used during the Build Step and Serverless Functions from the General page under Project Settings.