Introduction#

Deploying an Astro site with Vercel is a seamless experience, thanks to Vercel’s tight integration with Astro. In this guide, I’ll walk you through the exact steps I took to deploy my site effortlessly.

Prerequisites#

Before starting, make sure you have:

• An Astro project set up locally.
• A GitHub, GitLab, or Bitbucket repository.
• A Vercel account.

Step 1: Install Vercel CLI (Optional)#

While not required, using the Vercel CLI can make deployments even smoother. Install it globally with:

npm install -g vercel

Step 2: Push Your Astro Project to GitHub#

Vercel integrates seamlessly with GitHub. If your project isn’t already in a repository, initialize Git and push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

Step 3: Connect Your Repository to Vercel#

1. Log in to Vercel.
2. Click New Project and import your Astro repository.
3. Follow the setup prompts, ensuring:
   • Framework Preset: Astro
   • Build Command: npm run build
   • Output Directory: dist
4. Click Deploy and wait for the deployment to complete.

Step 4: Configure Custom Domains (Optional)#

To add a custom domain:

1. Go to your Vercel project dashboard.
2. Navigate to the Domains section.
3. Add your domain and update your DNS settings as instructed.

Step 5: Deploying from CLI (Optional)#

For manual deployments, use the Vercel CLI:

vercel

Follow the prompts, and your site will be live!

Conclusion#

Deploying an Astro site with Vercel is quick and painless. Whether using the UI or CLI, the process is streamlined for developers. With this setup, future updates will be automatically deployed whenever you push changes to your main branch.

Happy coding! 🚀