Vercel
To deploy on Vercel, we need to make some package changes and adjust the Astro config file.
- Install the
@astrojs/vercel
adapter and uninstall the@astrojs/netlify
adapter - Adjust the
astro.config.mjs
file for Vercel deployment - You can also delete the
netlify.toml
file
Project Adjustments
Packages
- Install the
@astrojs/vercel
adapter withnpm install @astrojs/vercel
- Uninstall the
@astrojs/netlify
adapter withnpm uninstall @astrojs/netlify
Gitignore
It is recommended to add the local Vercel folder to your .gitignore
file as these files are not necessary for your repository:
# build outputdist/# generated types.astro/
# dependenciesnode_modules/
# logsnpm-debug.log*yarn-debug.log*yarn-error.log*pnpm-debug.log*
# environment variables.env.env.production
# macOS-specific files.DS_Store
# Local Netlify folder.netlify
# Local Vercel folder.vercel
Config File
Make the following adjustments to the astro.config.mjs
file for Vercel deployment:
import netlify from "@astrojs/netlify";import vercel from "@astrojs/vercel/serverless";
// https://astro.build/configexport default defineConfig({ site: "https://yoursite.com", output: "hybrid", adapter: netlify({ imageCDN: false, }), adapter: vercel({ imageService: false, }), // other config options});
Test Build
Before deploying, it is recommended to test the build locally with npm run build
to ensure everything is working as expected.
Deploying
- Push your code to GitHub
- Create a Vercel account if you don’t already have one
- Follow the official Vercel documentation to deploy your site