Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Hazielgmz/astro-Portfolio/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through deploying your Astro portfolio to Vercel using the Vercel adapter.

​
Prerequisites

  • A Vercel account
  • Your project pushed to a Git repository (GitHub, GitLab, or Bitbucket)
  • Vercel adapter already configured in your project

​
Vercel Adapter Configuration

Your project is already configured with the Vercel serverless adapter in astro.config.mjs: 
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel()
});
This configuration:
  • Enables server-side rendering (SSR) with output: 'server'
  • Uses the Vercel serverless adapter for optimal performance
  • Automatically handles deployment to Vercel’s edge network

​
Deployment Steps

​
1. Connect Your Repository

  1. Go to Vercel Dashboard
  2. Click Add New > Project
  3. Select your Git provider (GitHub, GitLab, or Bitbucket)
  4. Import your portfolio repository

​
2. Configure Build Settings

Vercel should automatically detect your Astro project. Verify these settings:
  • Framework Preset: Astro
  • Build Command: astro build (or npm run build)
  • Output Directory: .vercel/output (automatically set by the adapter)
  • Install Command: npm install
The Vercel adapter automatically configures the output directory. You don’t need to change this manually.

​
3. Environment Variables

If your portfolio uses environment variables (e.g., for Supabase), add them in the Vercel dashboard:
  1. In your project settings, go to Settings > Environment Variables
  2. Add each variable:
    • SUPABASE_URL: Your Supabase project URL
    • SUPABASE_ANON_KEY: Your Supabase anonymous key
    • Any other custom environment variables
  3. Select which environments need each variable:
    • Production
    • Preview
    • Development
Never commit sensitive environment variables to your repository. Always use Vercel’s environment variables feature.

​
4. Deploy

  1. Click Deploy
  2. Vercel will:
    • Install dependencies
    • Run the build command
    • Deploy to their edge network
  3. Your site will be live at https://your-project.vercel.app

​
Continuous Deployment

Once connected, Vercel automatically deploys:
  • Production: Every push to your main/master branch
  • Preview: Every push to other branches and pull requests
Each deployment gets a unique URL for testing before merging.

​
Custom Domain

To add a custom domain:
  1. Go to Settings > Domains
  2. Add your domain name
  3. Configure DNS records as instructed by Vercel
  4. Vercel automatically provisions SSL certificates

​
Vercel CLI (Optional)

For local development and testing: 
# Install Vercel CLI
npm i -g vercel

# Deploy from command line
vercel

# Deploy to production
vercel --prod

​
Troubleshooting

​
Build Fails

  • Check the build logs in Vercel dashboard
  • Ensure all dependencies are in package.json
  • Verify environment variables are set correctly

​
SSR Errors

  • Confirm output: 'server' is set in astro.config.mjs
  • Check that the Vercel adapter is properly imported
  • Review serverless function logs in Vercel dashboard

​
Slow Build Times

  • Enable build caching in Vercel settings
  • Optimize dependencies and remove unused packages
  • Consider using Vercel’s incremental static regeneration

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us