Experience our new AI powered Web and Mobile app building platform 🚀rocket.new. Build any app with simple prompts- no code required.
Sign in
Sign in
Topics
Develop and deploy your next application in just minutes.
Frameworks we support
Integrations we support
Master Netlify deployment with this direct guide. Learn to connect your git repository for continuous deployment, manage build settings and environment variables, and add backend power with serverless functions for a seamless web hosting experience.
Getting your website live shouldn't feel like climbing Mount Everest. You've built something amazing, and now you want the world to see it. This guide walks you through Netlify deployment from your first push to production mastery, sharing real-world examples and proven strategies that work.
Think of Netlify as that friend who always has your back. While other platforms make you jump through hoops, Netlify watches your git repository and springs into action the moment you push changes. No more manual uploads or complex server configurations.
The platform now offers an always-free plan with generous monthly limits: 100 GB bandwidth, 300 build minutes, 125,000 functions, and 1 million edge function invocations, plus 10 GB storage. You can deploy commercial projects, personal sites, or creative experiments without financial risk.
Ready to deploy? The process starts when you create a new site. Head to your Netlify dashboard and click "Add new project". You'll connect your git provider, whether that's GitHub, GitLab, or another service. This connection becomes the foundation of everything.
1// Example netlify.toml configuration 2[build] 3 command = "npm run build" 4 publish = "dist" 5 6[build.environment] 7 NODE_VERSION = "18" 8 9[[redirects]] 10 from = "/*" 11 to = "/index.html" 12 status = 200
This configuration file tells Netlify exactly how to handle your project. The build command runs your build process, while the publish directory specifies where your final files live. Think of it as providing Netlify with a roadmap for your project.
Here's where things get interesting. Once continuous deployment is configured, you can update your Production site and staging site or “Deploy Preview” with Git push. No manual intervention is required.
Every time you push to your git repository, Netlify automatically detects the changes and kicks off a new build. The platform runs your build command, processes your files, and deploys the result to your live site. This process typically takes just a few minutes.
This diagram shows the complete deployment flow. When you push changes, Netlify clones your repository, installs dependencies from your package.json, runs your build command, and deploys the results across its global CDN.
Your build settings determine how Netlify processes your project. The base directory indicates to Netlify where to locate your code. Most projects use the repository root, but monorepos might specify a subdirectory.
Have you ever wondered why some builds fail while others succeed effortlessly? The secret lies in the proper configuration. If Netlify automatically detects that your site is a monorepo or uses a framework that Netlify can identify, Netlify will automatically fill in some of these configuration fields for you when you first create your site.
The publish directory contains your deploy-ready files. For React apps, this might be "build". For Vue projects, it could be "dist". The build command generates these files, running scripts like "npm run build" or "yarn build.”
| Framework | Build Command | Publish Directory |
|---|---|---|
| React | npm run build | build |
| Vue | npm run build | dist |
| Angular | ng build | dist |
| Gatsby | gatsby build | public |
| Next.js | npm run build | .next |
Environment variables store sensitive information, such as API keys and database URLs. You can declare and set environment variables using the Netlify UI, CLI, API, or a Netlify configuration file. The key is choosing the right method for your needs.
Creating environment variables through the Netlify UI keeps sensitive values out of your repository. Navigate to your project configuration, then select Environment Variables. You can create variables individually or import them from a .env file.
When working locally, the Netlify CLI automatically syncs these variables to your development environment. Run "netlify dev" and your local build has access to the same environment variables as production.
1# Create environment variables via CLI 2netlify env:set API_KEY "your-secret-key" 3netlify env:set DATABASE_URL "your-database-connection" 4 5# List all environment variables 6netlify env:list 7 8# Import from .env file 9netlify env:import .env
These CLI commands let you manage environment variables directly from your terminal. The variables you create apply to all deploy contexts by default, but you can specify different values for production, preview, and branch deploys.
Deploy contexts let you customize behavior for different scenarios. Production builds use one set of settings, while deploy previews might use another. This flexibility proves invaluable when testing features or debugging issues.
Environment variables have a key name, scope, and one or more contextual values. By default, environment variables are available to all scopes and have the same value for all deploy contexts. You can override this behavior to create context-specific configurations.
The branch deploys automatically when you push to any branch. Deploy previews generated for pull requests, giving you a live preview of proposed changes. These preview deployments help catch issues before they reach production.
Static sites don't have to stay static. Netlify functions provide serverless computing power without requiring server management. Netlify Functions are serverless functions that are version-controlled, built, and deployed along with the rest of your Netlify project.
Create a "netlify/functions" directory in your project repository. Drop JavaScript or TypeScript files here, and Netlify automatically detects and deploys them. These functions can handle form submissions, process payments, or connect to external APIs.
The functions share the same environment variables as your site builds. This means your API keys and database connections work seamlessly across your entire application stack.
The Netlify CLI transforms how you interact with the platform. Netlify's command-line interface (CLI) lets you configure continuous deployment directly from the command line. Install it globally with npm or yarn, then authenticate with your Netlify account.
Common workflows become simple commands. Need to preview changes locally? Run "netlify dev". Want to deploy without waiting for CI? Use "netlify deploy". Testing a function? Try "netlify functions:invoke".
The CLI bridges the gap between local development and production deployment. Your locally running site has access to the same redirects, headers, and functions as production. This eliminates the frustrating "works on my machine" scenarios.
The netlify.toml file provides fine-grained control over your deployment process. The netlify.toml is a configuration file that specifies how Netlify builds and deploys your site — including redirects, branch and context-specific settings, and more.
Store this file in your repository root. Netlify reads it during every build and applies the specified settings. You can configure different build commands for different contexts, set custom headers, and define complex redirect rules.
Version control tracks changes to your netlify.toml file. When someone forks your repository, they get identical project configuration. No manual setup is required in the Netlify UI.
Just type your idea, and within minutes, you will ship the first version of your website for your business.
Supports:
Figma to code
Flutter (with state management)
React, Next.js, HTML (with TailwindCSS/HTML), and reusable components
Third-party integrations like GitHub, OpenAI, Anthropic, Gemini, Google Analytics, Google AdSense, and Perplexity.
Email provider via Resend
Payment integration via Stripe
Database support with Supabase integration
Ship your app via Netlify for free
Visual element editing
Upload custom logos, screenshots, and mockups as design references — or swap images instantly.
Publish your mobile and web app with Netlify and share a fully interactive link.
Deployment issues happen to everyone. The key is knowing how to debug them quickly. Netlify provides detailed build logs for every deployment. Access these through your site overview or the deploys page.
Build failures usually fall into common categories. Missing dependencies appear as 'module not found’ errors. Wrong build commands result in empty publish directories. Environment variable issues cause runtime failures in functions.
The site overview provides a dashboard of your deployment status. Failed builds display prominently, with direct links to the relevant logs. Successful deployments show deployment URLs and build times.
Faster builds mean faster iterations. The build system will use this directory to perform caching during the build process. Netlify automatically caches dependencies between builds, but you can optimize further.
Consider these performance improvements. Pin dependency versions to avoid unexpected changes. Use' npm ci' instead of' npm install' for faster and more reliable installations. Split large builds into smaller, focused commands.
Build minutes count toward your monthly quota. Optimize your build process to stay within limits. The free plan includes 300 build minutes monthly, while paid plans offer more generous allowances.
Your website deserves a professional domain name. Netlify simplifies custom domain setup through the domains section of your site settings. Add your domain, update DNS records, and Netlify handles the rest.
SSL certificates provision automatically for all custom domains. This includes subdomain certificates and automatic renewals. Your site serves over HTTPS without additional configuration or costs.
DNS management becomes straightforward with Netlify DNS. Point your domain to Netlify's name servers and manage all DNS records through the Netlify interface. This includes A records, CNAME records, and MX records for email.
Modern web development is a team sport. Netlify's collaboration features keep everyone synchronized. Deploy previews and let team members review changes before they go live. Branch deploys provide isolated environments for feature development.
Shared environment variables simplify team onboarding. Set API keys and configuration values once, and all team members have access. Role-based permissions control who can modify sensitive settings.
Deploy Previews are unique atomic deploys with a permalink that you can share and refer back to. Every pull request generates its preview URL, making code review more effective.
Security starts with proper environment variable management. Never commit API keys or secrets to your git repository. Use Netlify's environment variable system to securely store sensitive values.
Variables set in a Netlify configuration file override variables set with the Netlify UI, CLI, or API. Be careful when mixing configuration methods to avoid unexpected overrides.
The sensitive variable policy provides additional protection for public repositories. Configure this policy to control access to environment variables when external contributors submit pull requests.
Deployment problems usually have predictable solutions. Build failures often stem from missing dependencies or incorrect build commands. Check your package.json for typos and ensure all dependencies are listed.
Function errors typically involve issues with environment variable access or API endpoint functionality. Use the function logs to identify specific error messages. The netlify dev command helps debug functions locally.
Site loading issues might indicate problems with your publish directory or redirect configuration. Verify that your build command generates files in the expected location. Check your netlify.toml for redirect conflicts.
Netlify grows with your project. The platform handles traffic spikes automatically through its global CDN. Edge locations deliver your content from servers closest to your users.
Function performance scales based on usage patterns. Each month, the free plan receives 125,000 function calls and 1 million edge function invocations. Paid plans offer higher limits and premium features.
Consider implementing edge functions for performance-critical operations. These run closer to your users, reducing latency for dynamic content. Use them for A/B testing, personalization, or geo-specific redirects.
Netlify deployment transforms the traditional hosting experience into a modern and developer-friendly one. From your first git push to production-scale applications, the platform handles complexity while keeping simple tasks simple.
The combination of continuous deployment, serverless functions, and global CDN creates a powerful foundation for web applications. Whether you're shipping a personal blog or a complex business application, Netlify provides the tools and reliability you need.
Start with a simple static site, then add functions and advanced features as your project grows. The platform's flexibility means you're never locked into a particular approach or architecture.
