Deployment Guide

Learn how to deploy your SaaSKit site to various hosting platforms.

Pre-Deployment Checklist

Before deploying, ensure:

• Site builds without errors (pnpm build)
• All environment variables are set
• SEO meta tags are configured
• Analytics are set up (if needed)
• Images are optimized
• Custom domain is configured (if applicable)

Build for Production

Generate the production build:

pnpm build

This creates an optimized build in the dist/ directory.

Deployment Options

Vercel (Recommended)

Vercel offers excellent Astro support with zero configuration.

Steps:

1. Install Vercel CLI (optional):

   npm i -g vercel

2. Deploy:

   vercel

3. Or use GitHub Integration:

   • Push code to GitHub
   • Import project in Vercel dashboard
   • Vercel auto-detects Astro

Configuration

Create vercel.json (optional):

{
  "buildCommand": "pnpm build",
  "outputDirectory": "dist",
  "devCommand": "pnpm dev",
  "installCommand": "pnpm install"
}

Netlify

Netlify also provides great Astro support.

Steps:

1. Install Netlify CLI:

   npm i -g netlify-cli

2. Deploy:

   netlify deploy --prod

3. Or use Netlify Dashboard:

   • Connect your Git repository
   • Build command: pnpm build
   • Publish directory: dist

Configuration

Create netlify.toml:

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

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

GitHub Pages

Deploy to GitHub Pages for free hosting.

Steps:

1. Install gh-pages:

   pnpm add -D gh-pages

2. Update package.json:

   {
     "scripts": {
       "deploy": "gh-pages -d dist"
     }
   }

3. Deploy:

   pnpm build
   pnpm deploy

4. Configure GitHub:

   • Go to repository Settings > Pages
   • Select source branch: gh-pages

Cloudflare Pages

Deploy to Cloudflare Pages for global CDN.

Steps:

1. Connect Repository:

   • Go to Cloudflare Dashboard
   • Pages > Create a project
   • Connect Git repository

2. Build Settings:

   • Build command: pnpm build
   • Build output directory: dist
   • Root directory: /

Self-Hosting

For self-hosting, you can use any static file server.

Using Nginx

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/your-site/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Using Apache

Create .htaccess in dist/:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Environment Variables

Set environment variables in your hosting platform:

Vercel

• Dashboard > Project > Settings > Environment Variables

Netlify

• Site settings > Build & deploy > Environment variables

Cloudflare Pages

• Pages > Your project > Settings > Environment variables

Custom Domain

DNS Configuration

1. Add Domain in hosting platform
2. Update DNS Records:
   • A record or CNAME pointing to hosting provider
3. SSL Certificate - Usually auto-provisioned

Vercel Domain Setup

1. Go to Project Settings > Domains
2. Add your domain
3. Follow DNS instructions

Performance Optimization

Image Optimization

• Use WebP format
• Implement lazy loading
• Use responsive images

Caching

Configure caching headers:

// vercel.json
{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Monitoring

Analytics

Add analytics tracking:

<script>
  // Google Analytics
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Error Tracking

Set up error tracking (e.g., Sentry):

import * as Sentry from "@sentry/astro";

Sentry.init({
  dsn: "YOUR_DSN",
});

Continuous Deployment

GitHub Actions

Create .github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: pnpm install
      - run: pnpm build
      - name: Deploy
        # Add deployment steps

Troubleshooting

Build Fails

• Check Node.js version
• Verify all dependencies installed
• Check for TypeScript errors
• Review build logs

404 Errors

• Ensure redirect rules are configured
• Check base path configuration
• Verify file paths

Slow Performance

• Optimize images
• Enable compression
• Use CDN
• Check bundle size

Next Steps

• Performance Optimization - Optimize your site
• SEO Guide - Improve search rankings
• Monitoring - Set up monitoring

Your site is live! 🎉 Share it with the world!