Netlify Deploy Guide: Host Your Website for Free in Minutes

Why Netlify?

Netlify is one of the most popular platforms for deploying static sites and modern web applications.

Key features:
- Free tier - 100GB bandwidth, 300 build minutes/month
- Drag-and-drop deploy - No Git required
- Continuous deployment - Auto-deploy from Git
- Serverless functions - Backend without servers
- Forms handling - Built-in form processing
- Global CDN - Fast loading worldwide

Method 1: Drag and Drop (Fastest)

The quickest way to deploy—no setup required.

Step 1: Build your project locally

npm run build

Step 2: Go to app.netlify.com

Step 3: Drag your build folder (e.g., dist, build) to the deploy area

Step 4: Get your live URL instantly!

Perfect for:
- Quick demos
- One-time deploys
- Testing builds

Method 2: Git Deployment (Recommended)

Connect your repository for automatic deployments.

Step 1: Sign Up and Connect

1. Go to netlify.com
2. Sign up with GitHub, GitLab, or Bitbucket
3. Click "Add new site" → "Import an existing project"

Step 2: Configure Build Settings

Netlify detects most frameworks automatically. Common settings:

Step 3: Deploy

Click "Deploy site" and wait 1-2 minutes.

Step 4: Access Your Site

Get your URL: https://random-name.netlify.app

Continuous Deployment

With Git connected, every push triggers a new deployment:

git add .
git commit -m "Update homepage"
git push
# Netlify automatically deploys!

Deploy previews: Every pull request gets its own preview URL for testing before merging.

Custom Domain Setup

Step 1: Add Domain

1. Go to Site settings → Domain management
2. Click "Add custom domain"
3. Enter your domain (e.g., example.com)

Step 2: Configure DNS

Option A: Use Netlify DNS (Recommended)
- Follow prompts to change nameservers

Option B: External DNS
Add these records:

# For apex domain
Type: A
Name: @
Value: 75.2.60.5

# For www subdomain
Type: CNAME
Name: www
Value: your-site.netlify.app

Step 3: Enable HTTPS

SSL is automatically provisioned. Wait a few minutes after DNS propagates.

Environment Variables

Store secrets and configuration securely.

Step 1: Go to Site settings → Environment variables

Step 2: Add your variables

DATABASE_URL=mongodb://...
API_KEY=your-secret-key

Step 3: Access in your code

// Node.js
const apiKey = process.env.API_KEY;

// Frontend (build time only)
const apiUrl = process.env.REACT_APP_API_URL;

Important: Frontend env vars are embedded at build time, not runtime.

Netlify Forms

Handle form submissions without a backend.

Step 1: Add netlify attribute to your form

<form name="contact" netlify>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Step 2: Deploy

Step 3: View submissions in Site settings → Forms

Netlify handles spam filtering, notifications, and storage.

Serverless Functions

Add backend logic with Netlify Functions.

Step 1: Create functions folder

netlify/
└── functions/
    └── hello.js

Step 2: Write your function

// netlify/functions/hello.js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify!" })
  };
};

Step 3: Call from frontend

fetch('/.netlify/functions/hello')
  .then(res => res.json())
  .then(data => console.log(data.message));

Redirects and Rewrites

Handle routing with _redirects file or netlify.toml.

_redirects file

# Redirect old URL to new
/old-page  /new-page  301

# SPA fallback
/*  /index.html  200

netlify.toml

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

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

Build Optimization

Speed up builds

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"
  NPM_FLAGS = "--legacy-peer-deps"

Caching dependencies

Netlify caches node_modules automatically. For faster builds:
- Use package-lock.json (consistent installs)
- Avoid unnecessary dependencies

Troubleshooting

Build Failed

Check:
1. Build logs in Netlify dashboard
2. Does build work locally? npm run build
3. Node.js version match?

Common fixes:

# netlify.toml
[build.environment]
  NODE_VERSION = "20"
  CI = "false"  # Ignore warnings as errors

404 on Refresh (SPA)

Cause: Server doesn't know about client-side routes

Fix: Add _redirects file

/*  /index.html  200

Mixed Content Errors

Cause: Loading HTTP resources on HTTPS site

Fix: Use HTTPS URLs or protocol-relative URLs

<!-- Bad -->
<script src="http://example.com/script.js"></script>

<!-- Good -->
<script src="https://example.com/script.js"></script>

Netlify vs Vercel

Both are excellent. Netlify has more built-in features; Vercel excels with Next.js.

Conclusion

Netlify makes deployment incredibly simple. Whether you drag-and-drop or connect Git, you'll have your site live in minutes.

Key takeaways:
- Drag-and-drop for quick deploys
- Git connection for continuous deployment
- Built-in forms and serverless functions
- Easy custom domain setup

Start deploying with Netlify today!

Need Deployment Help?

We help you set up and optimize your Netlify deployments.

Get Help