How to deploy a website on Netlify, step by step

This page may contain affiliate links from which Blur Studio earns commissions.

Netlify is a platform that takes the files making up your website and publishes them online, with free SSL and a fast global network, and no server for you to set up or maintain. There are two genuinely different ways to get a site onto it, and this guide walks through both.

Option 1: drag-and-drop deploy

This is the fastest way to see your site live, and it doesn't require a Git repository at all.

1. Go to Netlify's drop page. This is a dedicated page just for dragging a folder in.
2. Sign in to Netlify. You need an account to keep the deploy and manage it later, though the deploy itself happens the moment you drop the folder in.
3. Drag your site's build or output folder onto the page. This is usually a folder named something like dist, build, or public, generated by whatever tool built your site. If you're working with a plain folder of HTML, CSS, and JavaScript files with no build step, drag that folder directly.
4. Wait for it to publish. Netlify auto-detects your framework if one is present, and your site goes live at a netlify.app address almost immediately.
5. Know the size limits. Your project folder needs to be under 50MB total, with individual files under 10MB each. A typical small business site with optimized images fits comfortably within that.

To update the site later, drag an updated folder onto the same deploy and it republishes. This works fine for a one-off site or a quick prototype, but it has a real limitation: there's no automatic connection between your actual source code and what's live, so every update is a manual re-drag rather than something that happens on its own.

Option 2: Git-based continuous deployment

This is the setup most real, ongoing small business sites actually use, because it means every change you or a developer makes gets published automatically.

1. Put your site's code in a Git repository. GitHub is the most common choice; Netlify also supports GitLab, Bitbucket, Azure DevOps, and Cursor Origin.
2. Go to Netlify's start page and connect your repository. You'll authorize Netlify to access your Git provider and then select the specific repository for your site.
3. Select your production branch. Usually called main, this is the branch Netlify watches and automatically publishes from.
4. Check your build command and publish directory. Netlify auto-detects sensible defaults for most common frameworks, but confirm the build command (what command actually builds your site) and the publish directory (where the built files end up) match what your project needs.
5. Push a change and watch it deploy. From here on, every push to your production branch triggers an automatic build and deploy, with no manual step required.

The real advantage of this setup over drag-and-drop is what happens on every other branch and pull request too: Netlify automatically creates a live preview URL for each one, so you (or a developer, or a client) can see a specific change live before it merges into the real site.

Checks to run right after launch

• Open the live URL on your phone, not just your computer. A surprising number of first-deploy issues only show up on a smaller screen.
• Click through every page and every link. Confirm nothing is pointing at a local file path or an address that only worked on your own computer.
• Check that forms and any interactive features actually submit. A contact form that worked in local development can fail silently once deployed if it depends on an environment variable or a service that wasn't configured in Netlify's dashboard.
• Connect your real domain once you're confident. Your site works fine on its netlify.app address first, and you can point your own domain at it once you're ready; my guide to connecting a custom domain covers that step by step.
• Bookmark the deploy log. If a future deploy fails, the build log is where the real reason almost always shows up; my guide to reading a failed Netlify build log walks through exactly how to find it.

Which option should you actually use?

If you just want to see a finished site live right now, drag-and-drop is genuinely the fastest path and there's no shame in using it for a prototype or a one-off page. If you're running an actual small business site that will keep changing, set up Git-based deployment from the start; the few extra minutes of setup pay for themselves the first time you need to publish a quick fix without re-exporting and re-dragging a whole folder.

Build settings by common project type

Netlify auto-detects most popular frameworks, but it helps to know roughly what it's looking for so you can confirm the defaults are actually correct for your project.

Project type	Typical build command	Typical publish directory
Plain HTML, CSS, and JavaScript, no build step	(none needed)	The folder containing your HTML files directly
Astro	npm run build	dist
Next.js (static export)	npm run build	out
Hugo	hugo	public
Create React App or Vite	npm run build	build or dist

If your build fails and the publish directory listed doesn't match what your project's build command actually produces, that mismatch alone is one of the most common beginner deploy failures, and it's worth checking before assuming anything deeper is wrong.

Environment variables: the step people forget

If your site uses any API keys, a database connection, or similar secret values, add them in Netlify's dashboard under your site's environment variable settings, not just in a local .env file on your own computer. A local .env file never gets uploaded to Netlify, so a build that works perfectly on your machine but fails or behaves oddly once deployed is very often this exact issue: a value your code expects that was never added to Netlify's own settings.

Common beginner mistakes to avoid

• Deploying the wrong folder in drag-and-drop: Make sure you're dragging your project's built output folder, not the raw source code folder with all your original files still in their unbuilt form.
• Forgetting to set the production branch: If your Git-based site isn't updating when you push, double check it's watching the branch you're actually pushing to.
• Assuming a drag-and-drop deploy updates automatically: It doesn't. Every change requires dragging an updated folder in again, which is the main reason most ongoing sites move to Git-based deployment instead.
• Not testing on a deploy preview before changing the live domain: Especially relevant the first time you connect a custom domain, since it's much easier to debug an issue on a safe preview URL than on your actual live site.