Netlify is like a landlord for your website — it gives your site a home on the internet so anyone with a web browser can visit it. Drag and drop your files, connect your GitHub, or let your AI tool deploy automatically. It's one of the easiest ways to get a website live, with extras like forms, serverless functions, and split testing built right in.
When you build a website on your computer, only you can see it. To let the rest of the world visit it, you need to put it on a server — a computer that's always connected to the internet. That's what Netlify does: it takes your website files and puts them on super-fast servers around the world.
Think of Netlify as Vercel's friendly neighbor. They do similar things, but Netlify has some unique tricks. You can literally drag and drop a folder of website files onto Netlify's dashboard, and your site is live in seconds. No terminal commands, no configuration files.
But Netlify isn't just basic hosting. It also handles forms (so visitors can submit contact forms without you building a backend), serverless functions (small pieces of backend logic without managing a server), and deploy previews (a temporary version of your site for every change, so you can check it before going live).
Netlify is especially popular with static sites, Gatsby, Hugo, Astro, and any frontend framework. If your AI tool builds a website for you, Netlify is one of the simplest places to put it online.
Sign up with your email, GitHub, GitLab, or Bitbucket account. It's free and takes 30 seconds. No credit card required.
Option A: Connect your GitHub repository — Netlify will automatically build and deploy your site every time you push changes. Option B: Drag and drop your website folder directly onto the Netlify dashboard. Both work, but connecting GitHub is better for ongoing projects.
Once connected, Netlify detects your framework (React, Next.js, Gatsby, etc.), installs dependencies, and builds your site. In a minute or two, you get a live URL like your-site.netlify.app.
Want your site at yourdomain.com instead of the .netlify.app URL? Go to Domain settings, add your domain, and update your DNS records. Netlify gives you free SSL (the lock icon in browsers) automatically.
The simplest way to deploy a website: drag your folder onto the Netlify dashboard and it's live. No terminal, no commands, no configuration. Like uploading a photo to social media, but for entire websites.
Connect your GitHub, GitLab, or Bitbucket repository. Every time you (or your AI tool) pushes changes, Netlify automatically rebuilds and redeploys your site. Set it and forget it.
Every pull request gets its own temporary URL so you can preview changes before they go live. Like trying on clothes before buying — see how your changes look without affecting the real site.
Add a contact form to your site without building any backend. Just add a special attribute to your HTML form and Netlify handles collecting submissions, sending notifications, and storing responses.
Need a bit of backend logic? Serverless functions let you run small pieces of code without managing a server. Perfect for handling form submissions, talking to APIs, or processing payments.
Run code at the edge — meaning on servers closest to your visitors. This makes things like personalization, A/B testing, and geo-redirects lightning fast.
Test different versions of your site with real visitors. Send half your traffic to version A and half to version B to see which performs better. Built right into the platform, no extra tools needed.
Add user registration and login to your site without building it from scratch. Netlify Identity handles signups, password resets, and access control right out of the box.
Every site on Netlify gets HTTPS automatically — that's the lock icon in your browser that tells visitors your site is secure. No setup required, it just works.
Easily set up URL redirects (send old URLs to new ones) and rewrites (make one URL serve content from another). Useful for custom 404 pages, language routing, and API proxying.
Extend your build process with plugins — like add-ons that optimize images, check for broken links, or generate sitemaps automatically during every deploy.
Store secrets like API keys and passwords securely. They're available during builds and in serverless functions but never exposed to visitors. Like a safe deposit box for your app's sensitive information.
1. Deploy to Netlify
"Help me deploy this website to Netlify. Walk me through connecting my GitHub repository, configuring the build settings, and getting a live URL. My project uses React with Vite as the build tool."
2. Set up a contact form
"Add a contact form to my website using Netlify Forms. I need fields for name, email, and message. When someone submits it, I want to get an email notification. No backend code — just use Netlify's built-in form handling."
3. Create a serverless function
"Create a Netlify serverless function that handles a 'subscribe to newsletter' API endpoint. It should accept an email address, validate it, save it to a database, and return a success or error message."
4. Set up redirects
"Set up redirects on my Netlify site. I need: all old blog URLs (/blog/old-post) to redirect to new URLs (/articles/old-post), a custom 404 page, and all HTTP traffic redirected to HTTPS. Create the _redirects file or netlify.toml config."
5. Environment variables
"Help me set up environment variables on Netlify for my app. I need to store my database URL, API keys for Stripe and Resend, and a secret key for authentication. Show me how to add them in the Netlify dashboard and use them in my code."
6. Custom domain setup
"Walk me through connecting my custom domain to my Netlify site. I bought mydomain.com from Namecheap. Show me exactly which DNS records to add and how to configure it in Netlify so my site works at mydomain.com with HTTPS."
7. Split testing
"Set up a split test on my Netlify site. I want to test two different hero sections — version A has a video background and version B has an illustration. Split traffic 50/50 between two Git branches and help me track which one converts better."
8. Deploy previews
"Help me configure Netlify deploy previews for my team. Every time someone opens a pull request on GitHub, I want Netlify to automatically build a preview version of the site so we can review changes before merging."
9. Netlify Identity login
"Add user authentication to my Netlify site using Netlify Identity. I need a signup/login form, protected pages that only logged-in users can see, and a way to manage users from the Netlify dashboard."
10. Build plugins
"Set up Netlify build plugins for my site. I want to automatically optimize all images during build, generate a sitemap.xml for SEO, and run a broken link checker after every deploy. Show me how to install and configure these plugins."
11. Netlify CLI local development
"Help me set up the Netlify CLI for local development. I want to test my serverless functions and forms locally before deploying. Walk me through installing the CLI, linking my site, and running 'netlify dev' to preview everything."
Drag-and-drop is great for quick tests, but connecting your GitHub repository means every change deploys automatically. No more manual uploading — push your code and Netlify handles the rest.
Deploy previews give you a unique URL for every pull request. Share it with others to get feedback before your changes go live. It's like a dress rehearsal for your website.
Need a contact form? Don't build a backend — just add data-netlify="true" to your HTML form tag. Netlify collects submissions, sends you notifications, and even blocks spam. It's the easiest way to get forms working.
Create a custom 404.html page so visitors who hit a broken link see something helpful instead of a generic error. Add a redirect rule to make it work: /* /404.html 404
Instead of configuring everything in the dashboard, put your settings in a netlify.toml file in your project. This way your build settings, redirects, and environment variables are version-controlled alongside your code.
If your builds are slow, enable Netlify's build caching and make sure you're not reinstalling everything from scratch each time. The free tier has limited build minutes, so faster builds save money.
This usually means Netlify doesn't know how to build your project. Check that your build command and publish directory are correct in the Netlify dashboard. For React apps, it's typically "npm run build" with a publish directory of "build" or "dist".
If you're using a single-page app (React Router, Vue Router), you need a redirect rule. Add a _redirects file with "/* /index.html 200" so Netlify serves your index page for all routes instead of looking for individual files.
Make sure your form has the data-netlify="true" attribute and a name attribute. If you're using React, you may need to add a hidden form in your HTML file. Check the Netlify dashboard under Forms to see if submissions are being captured.
DNS changes can take up to 48 hours to spread across the internet (this is called propagation). Double-check your DNS records match what Netlify shows. If you're using a subdomain (like www), make sure you set up both the root domain and the www version.
Enable Netlify's asset optimization in your site settings — it can minify CSS and JavaScript and compress images. Also make sure you're not loading massive images or unnecessary libraries. Netlify's CDN (global network of servers) helps with speed automatically.
Environment variables in Netlify are only available during the build process and in serverless functions — they're NOT sent to the browser for security reasons. If you need a value in the browser, your build tool needs to embed it at build time (like REACT_APP_ prefix in Create React App or VITE_ in Vite).
| Feature | Netlify | Vercel | Render | CF Pages | GitHub Pages |
|---|---|---|---|---|---|
| Drag-and-drop deploy | Yes | No | No | No | No |
| Built-in forms | Yes — free | No | No | No | No |
| Serverless functions | Yes | Yes | Yes | Workers | No |
| Split testing | Yes — built-in | Edge middleware | No | No | No |
| Deploy previews | Yes | Yes | Yes | Yes | No |
| Free SSL | Yes | Yes | Yes | Yes | Yes |
| Best for | Static sites, forms | Next.js apps | Full-stack apps | Speed, Workers | Simple static sites |
