Deploy to Netlify

Netlify is an excellent alternative hosting platform for your Astro portfolio, offering continuous deployment, form handling, and serverless functions.

Why Netlify?

Netlify provides several compelling features:

Continuous Deployment: Automatic builds from Git
Global CDN: Fast content delivery worldwide
Form Handling: Built-in form processing
Serverless Functions: Add backend functionality
Deploy Previews: Test changes before going live
Custom Domains: Free HTTPS with Let’s Encrypt

Prerequisites

Git Repository

Your code should be in a Git repository (GitHub, GitLab, or Bitbucket).

Netlify Account

Create a free account at netlify.com

Deployment Methods

Method 1: Deploy via Netlify Dashboard (Recommended)

Import Repository

Log in to Netlify
Click Add new site → Import an existing project
Connect to your Git provider and select your repository

Configure Build Settings

Set up your build configuration:

Base directory: Leave empty (root)
Build command: pnpm run build
Publish directory: dist
Node version: 18 or higher

Netlify auto-detects Astro projects, but it’s good to verify these settings.

Deploy Site

Click Deploy site and wait for the build to complete.Netlify will:

Clone your repository
Install dependencies
Run the build command
Deploy to their global CDN
Provide a URL (e.g., random-name-123456.netlify.app)

Visit Your Site

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

Method 2: Deploy with Netlify CLI

For developers who prefer command-line workflows:

Install Netlify CLI

pnpm add -g netlify-cli

netlify login

This opens your browser for authentication.

Initialize Project

From your project root:

netlify init

Follow the prompts to link your site.

Deploy

Build and deploy in one command:

netlify deploy --prod

Method 3: Deploy with netlify.toml

For version-controlled configuration, create a netlify.toml file:

[build]
  command = "pnpm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"
  NPM_FLAGS = "--legacy-peer-deps"

[[redirects]]
  from = "/*"
  to = "/404.html"
  status = 404

Commit this file to your repository for consistent builds.

Configuration Options

Build Settings

Optimize your build with these settings:

[build]
  command = "pnpm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"
  PNPM_VERSION = "8.15.5"

Package Manager

Ensure Netlify uses pnpm by adding to netlify.toml:

[build.environment]
  NPM_FLAGS = "--prefix=/dev/null"
  
[build]
  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"

Alternatively, set the package manager in the Netlify dashboard under Site settings → Build & deploy → Environment.

Post-Deployment Configuration

Custom Domain

Add Domain

Go to Site settings → Domain management
Click Add custom domain
Enter your domain name

Configure DNS

Point your domain to Netlify using one of these methods:Option A: Netlify DNS (Recommended)

Use Netlify’s nameservers
Automatic SSL certificate
Managed DNS records

Option B: External DNS

Add a CNAME record pointing to your Netlify subdomain
Add A record: 75.2.60.5

Enable HTTPS

Netlify automatically provisions a Let’s Encrypt certificate.Enable Force HTTPS in domain settings to redirect all HTTP traffic.

Update Configuration

Update astro.config.ts and package.json with your custom domain:

export default defineConfig({
  site: "https://yourdomain.com",
  // ...
});

Environment Variables

Add environment variables for API keys and other configuration:

Go to Site settings → Environment variables
Click Add a variable
Enter key-value pairs

PUBLIC_API_KEY=your_api_key_here
PUBLIC_SITE_URL=https://yourdomain.com

Only use PUBLIC_ prefix for client-side variables. Server-side variables are not available in static Astro builds.

Automatic Deployments

Production Deployments

Netlify automatically deploys when you push to your production branch:

git add .
git commit -m "Update portfolio content"
git push origin main

Deploy Previews

Every pull request gets a deploy preview:

Create a feature branch
Push changes and open a PR
Netlify builds a preview and comments on the PR
Test changes before merging

Deploy previews are available even on the free tier!

Branch Deploys

Deploy specific branches for staging:

Go to Site settings → Build & deploy → Deploy contexts
Select branches to deploy
Each branch gets its own subdomain

Advanced Features

Form Handling

Add forms to your portfolio without a backend:

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="Your email" />
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>

Netlify automatically handles form submissions. View responses in your dashboard.

Redirects and Rewrites

Create SEO-friendly URLs with redirects:

[[redirects]]
  from = "/blog/*"
  to = "/posts/:splat"
  status = 301

[[redirects]]
  from = "/old-page"
  to = "/new-page"
  status = 301

Custom Headers

Add security headers:

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

Performance Optimization

Netlify provides several performance features:

Asset Optimization: Automatic image compression
Pretty URLs: Clean URLs without .html extensions
HTTP/2 Server Push: Faster asset loading
Post Processing: Minification and bundling

Enable in Site settings → Build & deploy → Post processing:

✅ Bundle CSS
✅ Minify CSS
✅ Minify JS
✅ Compress images

Troubleshooting

Build fails: pnpm not found

Add pnpm installation to your build command:

[build]
  command = "npm install -g pnpm && pnpm install && pnpm run build"

Or install via Netlify plugin:

[[plugins]]
  package = "@netlify/plugin-pnpm"

Images not loading

Verify Sharp is in your dependencies:

pnpm add sharp

Check that images are in public/ or imported correctly.

404 on page refresh

This shouldn’t happen with Astro’s static output, but if it does, add to netlify.toml:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Build timeout

Free tier has a 15-minute build limit. Optimize by:

Reducing image sizes
Using cached dependencies
Minimizing the number of pages

Or upgrade to a paid plan for longer build times.

Monitoring and Analytics

Netlify Analytics

Enable server-side analytics (paid feature):

Go to your site dashboard
Navigate to Analytics
Enable Netlify Analytics

Get insights without client-side JavaScript.

Deploy Notifications

Receive notifications about deployments:

Go to Site settings → Build & deploy → Deploy notifications
Add notifications for:
- Deploy succeeded
- Deploy failed
- Deploy started

Supported channels: Email, Slack, webhook

Rollback Deployments

Revert to a previous deployment:

Go to Deploys in your site dashboard
Find the deployment you want to restore
Click Publish deploy

Your site instantly reverts to that version.

Next Steps

Custom Domain

Set up a custom domain with HTTPS

Form Handling

Add contact forms without a backend

Functions

Add serverless functionality

Netlify CLI

Advanced CLI usage and local development

Get Started

Core Concepts

Customization

Deployment

Why Netlify?

Prerequisites

Deployment Methods

Method 1: Deploy via Netlify Dashboard (Recommended)

Method 2: Deploy with Netlify CLI

Method 3: Deploy with netlify.toml

Configuration Options

Build Settings

Package Manager

Post-Deployment Configuration

Custom Domain

Environment Variables

Automatic Deployments

Production Deployments

Deploy Previews

Branch Deploys

Advanced Features

Form Handling

Redirects and Rewrites

Custom Headers

Performance Optimization

Troubleshooting

Monitoring and Analytics

Netlify Analytics

Deploy Notifications

Rollback Deployments

Next Steps

Custom Domain

Form Handling

Functions

Netlify CLI

Build docs developers (and LLMs) love

Get Started

Core Concepts

Customization

Deployment

​Why Netlify?

​Prerequisites

​Deployment Methods

​Method 1: Deploy via Netlify Dashboard (Recommended)

​Method 2: Deploy with Netlify CLI

​Method 3: Deploy with netlify.toml

​Configuration Options

​Build Settings

​Package Manager

​Post-Deployment Configuration

​Custom Domain

​Environment Variables

​Automatic Deployments

​Production Deployments

​Deploy Previews

​Branch Deploys

​Advanced Features

​Form Handling

​Redirects and Rewrites

​Custom Headers

​Performance Optimization

​Troubleshooting

​Monitoring and Analytics

​Netlify Analytics

​Deploy Notifications

​Rollback Deployments

​Next Steps

Custom Domain

Form Handling

Functions

Netlify CLI

Build docs developers (and LLMs) love

Why Netlify?

Prerequisites

Deployment Methods

Method 1: Deploy via Netlify Dashboard (Recommended)

Method 2: Deploy with Netlify CLI

Method 3: Deploy with netlify.toml

Configuration Options

Build Settings

Package Manager

Post-Deployment Configuration

Custom Domain

Environment Variables

Automatic Deployments

Production Deployments

Deploy Previews

Branch Deploys

Advanced Features

Form Handling

Redirects and Rewrites

Custom Headers

Performance Optimization

Troubleshooting

Monitoring and Analytics

Netlify Analytics

Deploy Notifications

Rollback Deployments

Next Steps