Deploy any site in 60 seconds with Netlify

What Netlify is

Netlify is a hosting platform built for modern websites. It's what you use when you want to put your HTML/CSS/JS project online without touching servers, DNS settings, or terminal commands (unless you want to).

Method 1 — drag & drop (easiest)

Have a plain HTML/CSS/JS folder? Use this. No Git, no CLI, no account setup beyond a free signup.

Method 2 — connect a GitHub repo (pro setup)

This is how real sites ship. Push code → Netlify auto-builds & deploys. Every branch gets its own preview URL. You get rollbacks for free.

Build settings for common frameworks

Build command:      (leave blank)
Publish directory:  .

Build command:      npm run build
Publish directory:  dist

Build command:      npm run build
Publish directory:  .next

# Netlify auto-detects Next.js and installs the adapter

Build command:      npm run build
Publish directory:  dist

Method 3 — the Netlify CLI (for power users)

When you want to deploy from your terminal, preview locally, or script deploys into CI.

# Install the CLI once, globally
npm install -g netlify-cli

# Log in (opens a browser for auth)
netlify login

# From inside your project folder:

# Deploy a draft URL (safe — doesn't overwrite production)
netlify deploy

# Deploy to production
netlify deploy --prod

# Runs your dev server + Netlify Edge locally.
# Forms, functions, and redirects all work as they would in production.
netlify dev

Rename your site — ditch the random URL

When you first deploy, Netlify gives you a charming-but-random subdomain like brilliant-cat-123abc.netlify.app. That's fine for a test, but not for sharing with a client, a professor, or on your résumé. Rename it in 30 seconds.

Option A — Rename from the dashboard (most common)

Option B — Use netlify.toml for build + env config

A netlify.toml file at your project root lets you version-control build settings, redirects, headers, and environment variables. It's perfect for team projects — settings move with the repo.

# Save this as netlify.toml at your project root

[build]
  # Folder Netlify serves after the build finishes
  publish = "dist"

  # Command Netlify runs to build your site
  command = "npm run build"

  # Base directory (only for monorepos — usually omit)
  # base = "packages/web"

[build.environment]
  # Node version used during the build
  NODE_VERSION = "20"

  # Any env vars your build needs
  VITE_API_URL = "https://api.example.com"

# Pretty URLs — strip .html from every page
[[redirects]]
  from = "/:page.html"
  to   = "/:page"
  status = 301

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

[build]
  publish  → Which folder to deploy (dist, build, public, .)
  command  → Shell command to produce that folder
  base     → Only for monorepos; where to run npm install

[build.environment]
  Build-time only env vars. For runtime vars
  (Netlify Functions), use the dashboard UI.

[[redirects]]
  Double brackets = list — you can add as many as you want.
  Each needs from / to / status.

[[headers]]
  Same double-bracket pattern for response headers.
  Apply security, caching, CORS rules per path.

# Tip: comments start with # and are ignored.
# netlify.toml is TOML format (similar to INI files).

Netlify Forms — no backend required

Add data-netlify="true" to any form. Submissions land in your dashboard, with optional email notifications and spam protection.

<form name="contact"
      method="POST"
      data-netlify="true">

  <!-- Hidden input required by Netlify to name the form -->
  <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>

  <label>Message
    <textarea name="message" required></textarea>
  </label>

  <button type="submit">Send</button>
</form>

<form name="contact"
      method="POST"
      data-netlify="true"
      data-netlify-honeypot="bot-field">

  <!-- Hidden field humans skip, bots fill in — silent spam filter -->
  <p style="display:none;">
    <label>Don't fill this out: <input name="bot-field"></label>
  </p>

  <!-- ...rest of your form -->
</form>

Custom domain in 3 clicks

Netlify gives you a .netlify.app URL free. To use your own domain:

1. In your site dashboard → Domain settings → Add a custom domain
2. Type your domain (e.g. yourname.com) and click Verify
3. Either point your DNS to Netlify (they give you the nameservers) or add a CNAME record at your registrar. Both work.
4. SSL certificate is issued automatically within a few minutes

Redirects, headers, and _redirects

Drop a _redirects or netlify.toml file in your project root for advanced routing.

# Old URL → new URL (permanent, 301)
/old-page    /new-page    301

# Short URL → external link
/github      https://github.com/yourname    302

# SPA fallback — any unmatched route goes to index.html
/*           /index.html  200

# netlify.toml lives at the project root

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

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

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

Why Netlify is perfect for students