Skip to content
Developer Portfolio

Deploy to Netlify

This guide walks you through deploying your Developer Portfolio to Netlify, the default deployment platform for this template.

Why Netlify?

  • Pre-configured adapter
  • Automatic SSL certificates
  • Continuous deployment from Git
  • Built-in form handling
  • Generous free tier

Prerequisites

  • A Netlify account
  • Your project pushed to a Git repository (GitHub, GitLab, or Bitbucket)
  • Node.js 18 or higher

Deployment Steps

1. Connect Your Repository

  1. Log in to Netlify
  2. Click “Add new site” → “Import an existing project”
  3. Connect to your Git provider
  4. Select your developer portfolio repository

2. Configure Build Settings

Netlify should auto-detect these settings, but verify they match:

Terminal window
Build command: npm run build
Publish directory: dist
Node version: 18 (or higher)

3. Set Environment Variables

You can enter your environment variables before deploying or update them later in the Netlify dashboard.

In Netlify dashboard:

  1. Go to Site settings → Environment variables
  2. Add your .env 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
    ENABLE_RATE_LIMIT=true

4. Deploy

  1. Click “Deploy site”
  2. Wait for the initial build to complete
  3. Your site will be live at [your-site-name].netlify.app

5. Access Your Sanity Studio

  1. Open a new tab and go to [your-site-name].netlify.app/admin
  2. A pop-up will appear asking you to add your link to CORS
  3. Click the provided link and add your site URL to the CORS settings in Sanity
  4. After that, you’ll be prompted to sign in with your Sanity credentials

Custom Domain (Optional)

To add your custom domain:

  1. Go to Site settings → Domain management
  2. Click “Add custom domain”
  3. Follow Netlify’s DNS configuration instructions

Continuous Deployment

Netlify automatically:

  • Deploys when you push to your main branch
  • Creates preview deployments for pull requests
  • Handles SSL certificate renewal

Troubleshooting

Build Failures

  • Check your Node.js version in package.json
  • Verify all dependencies are installed
  • Review build logs in Netlify dashboard

Runtime Errors

  • Ensure environment variables are set correctly
  • Check Sanity project permissions
  • Verify SSR configuration in astro.config.mjs
  • Community: Access to our private Discord is available for customers. Check your purchase confirmation email for details.