Skip to main content
Vercel is the recommended hosting platform for this portfolio template. It provides zero-configuration deployment, automatic HTTPS, and seamless Git integration.

​
Why Vercel?

This template is optimized for Vercel deployment:
  • Zero Configuration: The included vercel.json provides optimal settings
  • Built-in Analytics: Vercel Analytics and Speed Insights are pre-integrated
  • Automatic Deployments: Every push to your repository triggers a deployment
  • Preview URLs: Get unique URLs for every pull request
  • Edge Network: Global CDN for fast content delivery
  • Custom Domains: Free HTTPS with custom domain support

​
Prerequisites

1

GitHub Account

Your code should be in a GitHub repository (GitLab and Bitbucket also supported).
2

Vercel Account

Create a free account at vercel.com

​
Deployment Methods

1

Import Repository

  1. Log in to Vercel Dashboard
  2. Click Add New → Project
  3. Import your Git repository
Import Git Repository
2

Configure Project

Vercel will auto-detect the Astro framework. The vercel.json file provides these settings:
{
  "installCommand": "pnpm install",
  "buildCommand": "astro build",
  "outputDirectory": "dist"
}
No manual configuration needed! Vercel reads these settings automatically.
3

Deploy

Click Deploy and wait for the build to complete (usually 1-2 minutes).Vercel will:
  • Install dependencies with pnpm
  • Run the build command
  • Deploy to the edge network
  • Provide a production URL (e.g., your-project.vercel.app)
4

Visit Your Site

Once deployed, click the generated URL to view your live portfolio!

​
Method 2: Deploy with Vercel CLI

For advanced users who prefer command-line deployment:
1

Install Vercel CLI

pnpm add -g vercel
2

Login to Vercel

vercel login
3

Deploy

From your project root:
vercel
Follow the prompts to link your project.
4

Deploy to Production

vercel --prod

​
Post-Deployment Configuration

​
Custom Domain

1

Add Domain

  1. Go to your project settings on Vercel
  2. Navigate to Domains
  3. Click Add and enter your domain
2

Configure DNS

Point your domain to Vercel:
  • A Record: 76.76.21.21
  • CNAME: cname.vercel-dns.com
Vercel provides specific DNS instructions based on your domain registrar.
3

Update Site URL

Update the site field in astro.config.ts and package.json:
export default defineConfig({
  site: "https://yourdomain.com",
  // ...
});
Commit and push to trigger a new deployment.

​
Environment Variables

If you add features requiring environment variables:
  1. Go to Project Settings → Environment Variables
  2. Add your variables (e.g., PUBLIC_API_KEY)
  3. Redeploy for changes to take effect
Variables prefixed with PUBLIC_ are exposed to the client. Use them only for non-sensitive data.

​
Analytics Configuration

The template includes Vercel Analytics out of the box: 
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/astro';
Analytics are automatically enabled on Vercel. View insights in your project dashboard.

​
Automatic Deployments

​
Production Deployments

Every push to your main branch triggers a production deployment: 
git add .
git commit -m "Update content"
git push origin main
Vercel will:
  1. Build your site
  2. Run any configured checks
  3. Deploy to production
  4. Send you a notification

​
Preview Deployments

Every pull request gets a unique preview URL:
  1. Create a new branch
  2. Push changes
  3. Open a pull request
  4. Vercel comments with the preview URL
Preview deployments are perfect for testing changes before merging to production.

​
Deployment Configuration

The vercel.json file controls deployment behavior: 
{
  "installCommand": "pnpm install",
  "buildCommand": "astro build",
  "outputDirectory": "dist",
  "github": {
    "silent": true
  }
}
  • installCommand: Uses pnpm (as specified in package.json)
  • buildCommand: Runs Astro build
  • outputDirectory: Points to the build output
  • github.silent: Reduces GitHub comment notifications

​
Troubleshooting

​
Build Failures

Vercel auto-detects pnpm from packageManager in package.json. If issues persist, explicitly set it in vercel.json:
{
  "installCommand": "npm install -g pnpm && pnpm install"
}
Ensure Sharp is installed in dependencies:
pnpm add sharp
Sharp is required for Astro’s image optimization.
If your build takes longer than 15 minutes, consider:
  • Optimizing large images before committing
  • Reducing the number of pages generated
  • Upgrading to a Vercel Pro account for longer build times

​
Deployment Issues

Astro generates static HTML files. Ensure your routes match the file structure in src/pages/.
Check that your site configuration in astro.config.ts matches your deployment URL.

​
Performance Optimization

Vercel provides built-in optimizations:
  • Edge Caching: Automatic caching at 100+ edge locations
  • Compression: Brotli and gzip compression
  • HTTP/2: Multiplexed connections
  • Image Optimization: Automatic format and size optimization
Monitor your site’s performance with Vercel Speed Insights in the dashboard.

​
Rollback Deployments

If something goes wrong:
  1. Go to Deployments in your Vercel dashboard
  2. Find a previous successful deployment
  3. Click the three dots → Promote to Production
Your site will instantly rollback to that version.

​
Next Steps

Custom Domain

Configure a custom domain for your portfolio

Vercel Analytics

Learn more about built-in analytics

Environment Variables

Manage sensitive configuration

Vercel CLI

Advanced CLI usage and commands

Build docs developers (and LLMs) love

Get started for freeTalk to us