Deploying your Astro website on Vercel is a straightforward process that allows you to host your site with ease and reliability. This guide provides step-by-step instructions to help you set up and deploy your Astro project successfully.

Prerequisites

  • Node.js and npm installed on your machine
  • Git installed and configured
  • A Vercel account (sign up at vercel.com)
  • An existing Astro project or create a new one

Step 1: Prepare Your Astro Project

Ensure your Astro project is ready for deployment. Verify that all dependencies are installed and that your project builds correctly locally.

Run the build command to generate the static site:

npm run build

This will create a dist folder containing your static site files.

Step 2: Push Your Project to GitHub

If your project isn't already in a Git repository, initialize one:

git init

Add your files and commit:

git add .

git commit -m "Initial commit"

Push to your remote repository:

git remote add origin

git push -u origin main

Step 3: Connect Your Repository to Vercel

Log in to your Vercel dashboard and click on the "New Project" button.

Select your GitHub repository from the list or connect your GitHub account if you haven't already.

Vercel will detect your project settings automatically. Confirm the repository and proceed.

Step 4: Configure Build Settings

In the build configuration, set the following:

  • Framework Preset: Astro
  • Build Command: npm run build
  • Output Directory: dist

Save these settings and click "Deploy."

Step 5: Deployment and Final Checks

Vercel will start building your site. This process may take a few moments.

Once deployed, Vercel provides a live URL for your website. Visit the URL to verify your site is working correctly.

Additional Tips

  • Set up custom domains in Vercel for branding.
  • Configure environment variables if your site requires them.
  • Use Vercel’s preview deployments to test changes before going live.

With these steps, your Astro website is now live on Vercel. Enjoy the benefits of fast, scalable hosting for your static site projects!