Netlify Deployment Guide — Static Sites and Serverless Functions

Netlify is a cloud platform for deploying static sites and serverless functions directly from Git repositories. It combines global CDN delivery, instant rollbacks, and built-in form handling into a single workflow.

In this tutorial, you will learn how to connect a Git repository for automatic deployment, use the Netlify CLI for local development, write serverless functions in JavaScript, configure redirects and headers, handle form submissions without a backend, and run A/B split tests. DodaTech uses Netlify to host Doda Browser marketing pages and documentation sites.

What You’ll Learn

By the end of this guide, you will deploy a React application to Netlify from GitHub, write and test serverless functions locally, create _redirects and _headers files for precise control, and set up split testing for deployment variants.

Why Netlify Matters

Netlify eliminates server management for frontend teams. Every Git push triggers a build, runs your build command, and deploys to a global CDN in under a minute. Atomic deploys and instant rollbacks make shipping safe and fast.

Netlify Learning Path

    flowchart LR
  A[Git-based Deploy] --> B[Netlify CLI]
  B --> C[Serverless Functions]
  C --> D[Redirects & Forms]
  D --> E[Split Testing]
  E --> F{You Are Here}
  style F fill:#f90,color:#fff
  

Git-Based Deployment

Connect your Git repository to Netlify for continuous deployment:

1. Push your site to GitHub, GitLab, or Bitbucket
2. Log in to netlify.com → Sites → Import from Git
3. Select your repository and configure build settings

The most common settings:

Build command: npm run build
Publish directory: build

Netlify automatically detects frameworks like React, Vue, Gatsby, and Hugo.

Deployment flow

    sequenceDiagram
    Developer->>GitHub: git push
    GitHub->>Netlify: Webhook trigger
    Netlify->>Netlify: npm install && npm run build
    Netlify->>CDN: Deploy to edge
    CDN-->>Developer: https://site-name.netlify.app
  

Expected output in deploy log

10:15:23 AM: Build ready to start
10:15:25 AM: npm install completed
10:15:35 AM: Build script ran successfully
10:15:36 AM: Deploying to CDN
10:15:37 AM: Site is live at https://my-app.netlify.app

Netlify CLI

Install the CLI for local development:

npm install -g netlify-cli

Common commands

# Log in to Netlify account
netlify login

# Link local project to a Netlify site
netlify init

# Start a local dev server with functions support
netlify dev
# Opens at http://localhost:8888

# Deploy a preview (draft URL)
netlify deploy

# Deploy to production
netlify deploy --prod

Local function development

netlify dev
# Functions in /netlify/functions/*.js are served at /.netlify/functions/*

Serverless Functions

Netlify Functions let you run backend code without managing servers. Create a function at /netlify/functions/hello.js:

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  const name = event.queryStringParameters.name || "World";

  return {
    statusCode: 200,
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ message: `Hello, ${name}!` }),
  };
};

Local and deployed testing

# Local (with netlify dev)
curl http://localhost:8888/.netlify/functions/hello?name=Alice
# → {"message":"Hello, Alice!"}

# Deployed
curl https://my-app.netlify.app/.netlify/functions/hello?name=Alice
# → {"message":"Hello, Alice!"}

Environment-specific functions

// netlify/functions/subscribe.js
exports.handler = async (event) => {
  if (event.httpMethod !== "POST") {
    return { statusCode: 405, body: "Method Not Allowed" };
  }

  const { email } = JSON.parse(event.body);

  // In production, this writes to a database
  console.log(`New subscriber: ${email}`);

  return {
    statusCode: 200,
    body: JSON.stringify({ success: true, email }),
  };
};

Redirects and Headers

Netlify uses a _redirects file (placed in the publish directory):

# _redirects — one rule per line

# Single page app: all routes to index.html
/*    /index.html    200

# Permanent redirect
/blog/*    https://blog.example.com/:splat    301

# Proxy to external API
/api/*    https://api.example.com/:splat    200

# Splash page redirect
/old-page    /new-page    301

# Country-based redirect
/    /us   302    Country=us
/    /eu   302    Country=*

For headers, use _headers:

# _headers

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

/assets/*
  Cache-Control: public, max-age=31536000, immutable

Forms

Netlify handles form submissions without a server. Add netlify attribute to your HTML form:

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <label>Name: <input type="text" name="name" required /></label>
  <label>Email: <input type="email" name="email" required /></label>
  <button type="submit">Send</button>
</form>

Submissions appear in the Netlify dashboard (Forms tab) and can trigger notifications or JavaScript function hooks.

Expected behavior

Form submitted → Netlify captures data → Dashboard updates → Optional webhook

Split Testing

Netlify can split traffic between multiple deploys for A/B testing:

# Deploy a new version as a branch
netlify deploy --branch experiment

# In the dashboard, configure split percentages:
# Production (main): 50%
# Branch (experiment): 50%

Visitors are consistently served the same variant via cookie-based stickiness.

Common Errors

1. Build Fails on Netlify but Works Locally

Environment differences. Check the Node.js version in Netlify dashboard (Site settings → Build & deploy → Environment). Use .nvmrc or NODE_VERSION in environment variables.

2. Functions Return 404

Functions must be in netlify/functions/ (default) or a custom functions directory configured in netlify.toml. Ensure netlify dev is running and the path is correct.

3. Redirect Rules Not Working

The _redirects file must be in the published directory (e.g., build/), not the project root. Netlify processes redirects in order — the first match wins.

4. Forms Not Capturing Submissions

Forms need data-netlify="true" on the <form> tag and a hidden form-name input matching the form name. If using a SPA, forms require a special submission handler.

5. Deploy Preview Shows Broken Images

Asset paths are likely absolute (/images/logo.png) but the site is deployed to a sub-path for the deploy preview. Use relative paths or configure a pathPrefix.

6. netlify.toml Not Being Read

The netlify.toml config file must be in the repository root. Validate with netlify config:validate.

7. Large File Size Limits

Netlify Functions have a 10-second timeout and 10MB response limit. For larger operations, use background functions or an external service.

Practice Questions

1. What is the purpose of the netlify.toml file?

It configures build commands, publish directory, redirects, headers, functions settings, and environment variables in a single version-controlled file.

2. How do you deploy a preview from the CLI?

Run netlify deploy. It creates a draft URL that is not promoted to production until netlify deploy --prod.

3. What is the file-based redirect syntax for proxying /api to an external service?

/api/* https://external-api.com/:splat 200 — the splat captures the wildcard portion of the URL.

4. How do Netlify Forms handle submissions without a backend?

The data-netlify="true" attribute causes Netlify’s CDN nodes to intercept the POST request and store the submission in the Netlify dashboard.

5. Challenge: Write a serverless function that returns visitor geolocation

Use the event.headers object to read x-country (Netlify adds geolocation headers automatically). Return the country and region as JSON.

Mini Project: Full Netlify Deployment

Build and deploy a complete serverless application:

1. Create a React app with npx create-react-app my-site
2. Add a function at netlify/functions/subscribe.js that accepts POST with email and logs it
3. Create a _redirects file: /* /index.html 200
4. Add a contact form with data-netlify="true"
5. Deploy to Netlify from Git or via CLI

cd my-site
npm install -g netlify-cli
netlify init
git push
# Or: netlify deploy --prod --dir=build

Test your deployed site:

curl https://my-site.netlify.app/.netlify/functions/subscribe \
  -X POST -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}'
# → {"success":true,"email":"test@example.com"}

This deployment pattern is used by DodaTech for Doda Browser landing pages and DodaZIP documentation sites.

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.