Skip to content
Photography Portfolio

Deploy to Vercel

While the template uses Netlify by default, you can easily deploy to Vercel by following this guide.

Prerequisites

  • A Vercel account
  • Your project in a Git repository
  • Node.js 18 or higher

Configuration Changes

1. Switch to Vercel Adapter

First, install the Vercel adapter:

Terminal window
npm install @astrojs/vercel@7

2. Update Configuration

Modify your astro.config.mjs:

import { defineConfig } from "astro/config";
import vercel from "@astrojs/vercel/serverless"; // Add this line
// ... other imports remain the same


export default defineConfig({
  // ... other config remains the same
  adapter: vercel(), // Change this line
});

3. Commit Changes

Terminal window
git add .
git commit -m "Switch to Vercel adapter"
git push

Deployment Steps

1. Import Your Project

  1. Go to Vercel Dashboard
  2. Click “Import Project”
  3. Select your Git repository
  4. Vercel will auto-detect Astro configuration

2. Configure Project

In the Vercel dashboard:

  1. Keep the auto-detected build settings
  2. Add environment variables:
    Terminal window
    SANITY_TOKEN=your_sanity_api_token
    SANITY_PROJECT_ID=your_sanity_project_id
    SANITY_DATASET= production
    SANITY_STUDIO_PREVIEW_URL= #name of your website
    PUBLIC_SANITY_VISUAL_EDITING_ENABLED=true
    NOTIFICATION_EMAIL= #your email
    RESEND_API_KEY=your_resend_api_key
  3. Click “Deploy”

Custom Domain Setup

  1. Go to Project Settings → Domains
  2. Click “Add Domain”
  3. Follow Vercel’s domain configuration steps

Deployment Features

Vercel provides:

  • Automatic HTTPS
  • Preview deployments
  • Edge functions support
  • Analytics
  • Performance monitoring

Troubleshooting

Common Issues

  1. Build Failures

    • Check Node.js version compatibility
    • Verify all dependencies are installed
    • Review build logs

  2. Runtime Errors

    • Confirm environment variables are set
    • Check Sanity connection
    • Verify SSR configuration

  3. Performance Issues

    • Enable Vercel’s edge caching
    • Optimize image loading
    • Review Vercel Analytics

  4. Invalid Runtime Error If you encounter the error: “The following Serverless Functions contain an invalid ‘runtime’: - _render (nodejs18.x)”, follow these steps:

    • Click on “Go to Project”
    • Navigate to Settings
    • Look for the Node.js Version setting
    • Set it to Node.js 18.x
    • Click on save
    • Go back to Deployments
    • Click on Redeploy

Need Help?