What Is Netlify? Free Hosting That Actually Works for AI-Built Apps

Why AI Coders Need to Know This

You just spent a few hours in Cursor or Claude Code building something — maybe a portfolio site, maybe a landing page for a side project, maybe a React app that actually does something useful. It runs great on localhost:3000. Your AI says it's done. But nobody else on earth can see it.

So you ask your AI: "How do I put this on the internet?" And there's a solid chance it says "Deploy to Netlify."

Netlify is one of the three platforms vibe coders encounter the most — alongside Vercel and Railway. Each one is good at different things, but Netlify has carved out its space as the go-to for static sites, JAMstack projects, and anything that doesn't need a persistent backend server. If your AI built you a React app with Vite, an Astro blog, a Hugo documentation site, or even a plain HTML/CSS portfolio — Netlify is often the fastest path from "works on my machine" to "live on the internet."

Here's why you should understand it:

• AI tools recommend it constantly. When you ask how to deploy a static site or frontend app, Netlify is one of the top suggestions. Over 4 million developers have deployed to Netlify as of 2026.
• It has features your AI will silently configure. Forms, redirects, serverless functions — your AI might set these up without explaining what they do. You need to know so you can debug when they break.
• The free tier is genuinely usable. Unlike platforms that give you a "free trial" with a credit card, Netlify's free tier handles real projects with 100GB bandwidth and 300 build minutes. No card required.
• Things work differently after deployment. Your site behaves differently on Netlify than on your laptop — especially with routing, environment variables, and serverless functions. Understanding the differences saves you hours of debugging.

If you're building with AI tools and want to share what you've made with the world, Netlify is one of the easiest on-ramps to the live internet. Let's break down exactly how it works.

What Netlify Actually Does

At its core, Netlify does five things. Understanding each one saves you from the confused Googling that happens when something doesn't work:

1. Hosting on a Global CDN

When you deploy to Netlify, your site's files (HTML, CSS, JavaScript, images) don't sit on one server in one location. They get distributed across a global content delivery network — servers spread around the world. When someone in London visits your site, they get the files from a server in Europe. Someone in Tokyo gets them from Asia. This is why Netlify sites load fast without you doing anything special.

2. Automatic Deploys from GitHub

You connect your GitHub repo to Netlify once. After that, every time you push code to your main branch, Netlify automatically detects the change, pulls your code, runs the build command (like npm run build), and deploys the result. Push from Cursor, and 60-90 seconds later your changes are live. No SSH, no FTP, no manual uploading.

3. Serverless Functions

Need a little bit of backend code? Netlify Functions let you write small server-side functions (Node.js or Go) that run on demand without managing a server. Put a JavaScript file in your netlify/functions/ directory and it becomes an API endpoint automatically. Your AI might use these for form processing, API proxying, or database queries.

4. Built-in Forms

This is a Netlify-specific feature that Vercel and Railway don't have. Add netlify as an attribute to any HTML <form> tag, and Netlify automatically captures form submissions — no backend code, no database, no third-party service. You see submissions in your Netlify dashboard. It's dead simple for contact forms, signup forms, and feedback widgets. The free tier gives you 100 submissions per month.

5. Deploy Previews

Every pull request on GitHub automatically gets its own preview URL on Netlify. It looks something like deploy-preview-42--your-site.netlify.app. You can see exactly what your changes look like before merging to production. Share the preview link with someone for feedback. This is a feature most vibe coders don't know they have — and it's incredibly useful.

Real Scenario: You Built a Portfolio Site with AI, Now You Need It Live

Let's walk through the most common path. You asked Claude or Cursor to build you a portfolio site. It generated a React app with Vite — three pages, a contact form, some project showcases, and nice animations. It looks great on localhost:5173.

You ask your AI:

Your AI will probably suggest Netlify. Here's the step-by-step it gives you:

1. Push your code to GitHub. If you haven't already, your AI walks you through git init, creating a repo, and pushing.
2. Go to app.netlify.com and sign up with your GitHub account.
3. Click "Add new site → Import an existing project."
4. Select your GitHub repo. Netlify asks for a build command and publish directory.
5. Set the build command to npm run build (or vite build — both work).
6. Set the publish directory to dist (that's where Vite outputs built files).
7. Click Deploy. In about 60 seconds, your site is live at your-site-name.netlify.app.

That's the happy path. Your portfolio is now on the internet. You can share the URL. You can add a custom domain later. Every time you push changes to GitHub, Netlify redeploys automatically.

But your AI probably also generated some configuration files. Let's look at what those do.

What AI Generates When It Adds Netlify Config

When you ask AI to set up Netlify deployment, it often creates configuration files. Here's the most common one and what every line does:

netlify.toml — The Main Config File

# netlify.toml — Netlify deployment configuration
# This file tells Netlify how to build and deploy your site
# Place it in your project root (next to package.json)

[build]
  # The command Netlify runs to build your project
  # Must match a script in your package.json
  command = "npm run build"

  # Where your built files end up after the build command runs
  # Vite → "dist", Create React App → "build", Next.js → ".next"
  publish = "dist"

  # Where your serverless functions live (if you have any)
  functions = "netlify/functions"

# Environment variables for the build step
# Better to set sensitive ones in the Netlify dashboard instead
[build.environment]
  NODE_VERSION = "20"
  NEXT_PUBLIC_SITE_URL = "https://myportfolio.com"

# Redirects — critically important for single-page apps (React, Vue)
# Without this, refreshing any page other than / gives a 404
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Custom headers for security
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"

# Settings for deploy previews
[context.deploy-preview]
  command = "npm run build"

# Settings specific to production deploys
[context.production]
  command = "npm run build"
  [context.production.environment]
    NODE_ENV = "production"

_redirects — The Simpler Alternative

Instead of putting redirect rules in netlify.toml, your AI might generate a _redirects file in your public directory:

# _redirects — Place this in your public/ or static/ folder
# Netlify reads this file for URL routing rules

# For single-page apps: send all routes to index.html
/*    /index.html   200

# Redirect old URLs to new ones
/old-blog    /blog    301

# Proxy API calls to avoid CORS issues
/api/*    https://my-backend.railway.app/api/:splat    200

Common Netlify Problems AI Creates

AI is great at generating code. It's frequently wrong about deployment details. Here are the problems you'll hit:

1. Wrong Build Directory (The #1 Issue)

# AI sets the publish directory wrong in netlify.toml

[build]
  command = "npm run build"
  publish = "build"    # ← WRONG for Vite projects!

# Different frameworks output to different directories:
# Vite (React/Vue/Svelte) → "dist"
# Create React App         → "build"
# Next.js                  → ".next"
# Astro                    → "dist"
# Hugo                     → "public"
# Gatsby                   → "public"

# If Netlify deploys but you see "Page not found":
# Your publish directory doesn't match where your built files actually are.
# Check by running "npm run build" locally and seeing what folder appears.

2. Missing Environment Variables

// AI generates code that references env vars without mentioning
// you need to add them on Netlify
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

// Locally: works fine (reads from .env file)
// On Netlify: both are undefined → your app silently breaks
// Fix: Site Settings → Environment Variables → add each one

// For Vite: variables MUST start with VITE_ to be exposed to the browser
// For Next.js on Netlify: variables MUST start with NEXT_PUBLIC_
// Without the prefix, the variable exists during build but not in the browser

3. Missing SPA Redirect (404 on Page Refresh)

# You built a React single-page app with React Router
# Every page works when you click links within the app
# But if you refresh /about or navigate directly to /projects → 404

# Why: Netlify tries to find a file at /about/index.html
# It doesn't exist — your entire app lives in index.html
# React Router handles routing client-side, but Netlify doesn't know that

# Fix: Add this to netlify.toml:
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# Or create a _redirects file in your public/ folder with:
# /*    /index.html   200

# This tells Netlify: "For any URL, serve index.html and let
# React Router figure out what to display"

4. Redirect Loops

# AI generates conflicting redirect rules that loop forever

# netlify.toml
[[redirects]]
  from = "/blog"
  to = "/articles"
  status = 301

[[redirects]]
  from = "/articles"
  to = "/blog"
  status = 301

# Browser: /blog → /articles → /blog → /articles → ERR_TOO_MANY_REDIRECTS
# Fix: Remove the circular redirect. Decide on ONE canonical URL.

# Another common loop: forcing HTTPS + www at the same time
# Netlify handles HTTPS automatically — don't add your own HTTPS redirect
# It conflicts with Netlify's built-in SSL redirect

5. Build Command Doesn't Match package.json

# AI puts the wrong build command in netlify.toml

[build]
  command = "npm run build"

# But your package.json has:
# "scripts": {
#   "dev": "vite",
#   "generate": "vite build"    ← named "generate" not "build"!
# }

# Netlify runs "npm run build" → script not found → build fails
# Fix: Either rename your script to "build" or change netlify.toml:
[build]
  command = "npm run generate"

How to Debug Netlify Deploys

When your deploy fails or your site looks wrong after deploying, here's exactly how to figure out what went wrong:

Step 1: Read the Deploy Log

Every deploy on Netlify has a detailed log. Go to your site in the Netlify dashboard → Deploys → click the failed deploy. The log shows every step: installing dependencies, running the build command, and publishing files. The error is almost always in the last few lines before it says "Build failed."

Step 2: Test the Build Locally

Before blaming Netlify, run the exact build command on your own machine:

# Run the same command Netlify runs
npm run build

# If it fails locally, it'll definitely fail on Netlify
# Fix the local build first, then push

# If it works locally but fails on Netlify, the difference is usually:
# - Missing environment variables on Netlify
# - Different Node.js version (set NODE_VERSION in netlify.toml)
# - Case-sensitive file imports (your Mac doesn't care, Netlify's Linux does)

Step 3: Check Environment Variables

Go to Site Settings → Environment Variables. Compare every variable against your local .env file. Missing one? That's probably your problem. Typo in the name? That'll do it too.

Step 4: The "Deployed But Broken" Checklist

Run through this every time your Netlify deploy succeeds but the site doesn't work right:

1. ✅ Publish directory: Does it match your framework's output folder? (dist for Vite, build for CRA, public for Hugo)
2. ✅ SPA redirects: If you're using client-side routing (React Router, Vue Router), do you have the /* → /index.html redirect?
3. ✅ Environment variables: Are ALL of them set in Netlify's dashboard? With the correct prefix (VITE_, NEXT_PUBLIC_)?
4. ✅ Build command: Does it exactly match a script in your package.json?
5. ✅ Node version: Set NODE_VERSION = "20" in netlify.toml to match your local version.
6. ✅ Case sensitivity: Do all your file imports match the exact filename capitalization? (Mac is forgiving, Linux is not.)
7. ✅ Mixed content: Are you loading HTTP resources on an HTTPS site? The browser blocks those silently.

Netlify vs Vercel vs Railway — When to Use Which

All three are good platforms. They solve different problems. Here's the honest breakdown:

Netlify Free Tier: What You Actually Get

Netlify's free tier is called "Starter" and it's genuinely usable for real projects. Here's what's included and what will trip you up:

• 100GB bandwidth per month. That's a lot. A typical portfolio site uses 1-5GB/month. You'd need thousands of daily visitors to exceed this.
• 300 build minutes per month. Each deploy takes 1-3 minutes to build. At 2 minutes per build, you can deploy 150 times per month — roughly 5 times per day. Heavy pushers might hit this limit.
• 1 concurrent build. If you push twice quickly, the second build waits until the first finishes. Not a big deal for solo projects.
• 125,000 serverless function invocations per month. If you're using Netlify Functions for API calls, each request counts as one invocation. Most side projects use a fraction of this.
• 100 form submissions per month. The built-in form handling is limited but enough for a contact page. If you need more, use a service like Formspree or build your own with a serverless function.
• Free .netlify.app subdomain. Your site is live at your-site.netlify.app immediately. Custom domains are free to add.
• Free SSL certificates. HTTPS is automatic on both the .netlify.app subdomain and custom domains. Powered by Let's Encrypt.
• Deploy previews. Every pull request gets a preview URL, even on the free tier.

What to Learn Next

Now that you understand what Netlify is and how deployment works, here are the concepts that connect directly:

Frequently Asked Questions