Website deployment setup on Netlify

Configuring Website Deployment on Netlify

Netlify is a platform for JAMstack applications: static sites, SPAs, Gatsby, Next.js (via Netlify Next.js Runtime). Automatic deploys from Git, built-in forms, functions, A/B testing.

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"
  functions = "netlify/functions"

[build.environment]
  NODE_VERSION = "20"
  NPM_FLAGS = "--prefix=/dev/null"

# SPA: redirect all routes to index.html
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Proxy API
[[redirects]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200
  force = true

# Custom headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Split testing (A/B)
[context.deploy-preview]
  command = "npm run build:preview"

[context.branch-deploy]
  command = "npm run build:staging"

Netlify Functions

// netlify/functions/contact.ts
import type { Handler, HandlerEvent } from '@netlify/functions';

export const handler: Handler = async (event: HandlerEvent) => {
    if (event.httpMethod !== 'POST') {
        return { statusCode: 405, body: 'Method Not Allowed' };
    }

    const { name, email, message } = JSON.parse(event.body || '{}');

    // Send via Nodemailer or Resend
    await sendEmail({ name, email, message });

    return {
        statusCode: 200,
        body: JSON.stringify({ success: true }),
        headers: { 'Content-Type': 'application/json' },
    };
};

Built-in Netlify Forms

<!-- Netlify processes form without Serverless Function -->
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact">
    <p class="hidden">
        <label>Don't fill this: <input name="bot-field"></label>
    </p>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Send</button>
</form>

Submissions available in Netlify Dashboard → Forms. Notifications configured there (email, Slack webhook).

GitHub Actions + Netlify CLI

name: Deploy to Netlify

on:
  push:
    branches: [main, develop]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

      - name: Deploy to Netlify
        run: |
          npx netlify-cli deploy \
            --dir=dist \
            --site=${{ secrets.NETLIFY_SITE_ID }} \
            --auth=${{ secrets.NETLIFY_AUTH_TOKEN }} \
            ${{ github.ref == 'refs/heads/main' && '--prod' || '' }}

Deploy Contexts

Netlify supports different build commands for different contexts:

# Production: main branch
[context.production.environment]
  API_URL = "https://api.example.com"
  ANALYTICS_ID = "G-PROD123"

# Staging: develop branch
[context.branch-deploy.environment]
  API_URL = "https://api-staging.example.com"
  ANALYTICS_ID = "G-STAGING456"

# Preview: all PRs
[context.deploy-preview.environment]
  API_URL = "https://api-dev.example.com"

Netlify Limitations

• Functions: 10 second timeout (Pro: 26 seconds)
• Free plan: 300 build minutes/month, 100GB bandwidth
• Not suitable for PHP/Laravel backend

Implementation Timeline

Connecting React/Vue/Gatsby project: 4–8 hours.