Skip to content

deployment-netlify.md

Latest commit

 

History

History
322 lines (225 loc) · 7.5 KB

deployment-netlify.md

File metadata and controls

322 lines (225 loc) · 7.5 KB

Deploying to Netlify

Netlify is a developer-friendly hosting platform that's perfect for static sites. It offers generous free tier, instant deployments, and built-in CI/CD.

Prerequisites

  • A Netlify account (free) - Sign up at netlify.com
  • Your code in a Git repository (GitHub, GitLab, or Bitbucket)

Cost

FREE tier includes:

  • 100GB bandwidth/month
  • Automatic SSL
  • Custom domain support
  • Continuous deployment
  • Unlimited sites

Perfect for landing pages with moderate traffic!

Method 1: Deploy from Git Repository (Recommended)

This method automatically rebuilds and deploys your site on every git push.

Step 1: Connect Your Repository

  1. Log in to Netlify
  2. Click "Add new site" → "Import an existing project"
  3. Choose your Git provider (GitHub, GitLab, or Bitbucket)
  4. Authorize Netlify to access your repositories
  5. Select your landing page repository

Step 2: Configure Build Settings

Fill in the build settings:

Base directory: (leave empty)
Build command: npm run build
Publish directory: dist

Advanced build settings (optional):

Node version: 22

Step 3: Deploy

  1. Click "Deploy site"
  2. Netlify will:
    • Install dependencies
    • Run your build command
    • Deploy the dist folder
  3. Your site goes live in 1-2 minutes!

You'll get a random URL like: https://random-name-123456.netlify.app

Step 4: Customize Your Site Name (Optional)

  1. Go to Site settings → Site details
  2. Click "Change site name"
  3. Choose a custom name: https://your-landing-page.netlify.app

Method 2: Drag and Drop Deployment

Perfect for quick tests or if you don't have a Git repository.

Step 1: Build Locally

npm run build

Step 2: Deploy

  1. Go to Netlify Drop
  2. Drag and drop your dist folder
  3. Your site is live instantly!

Note: This method doesn't support automatic deployments. You'll need to manually upload the dist folder each time you make changes.

Method 3: Netlify CLI

For developers who prefer the command line.

Step 1: Install Netlify CLI

npm install -g netlify-cli

Step 2: Login to Netlify

netlify login

This opens a browser window to authenticate.

Step 3: Initialize Your Site

netlify init

Follow the prompts:

  • Create & configure a new site
  • Choose your team
  • Set site name (or use auto-generated)
  • Build command: npm run build
  • Publish directory: dist

Step 4: Deploy

netlify deploy --prod

Or for preview deployments:

netlify deploy

Adding a Custom Domain

Step 1: Add Domain in Netlify

  1. Go to Site settings → Domain management
  2. Click "Add custom domain"
  3. Enter your domain (e.g., yourdomain.com or landing.yourdomain.com)
  4. Click "Verify" and "Add domain"

Step 2: Configure DNS

Option A: Use Netlify DNS (Recommended - Easiest)

  1. Netlify will provide nameservers
  2. Go to your domain registrar
  3. Replace existing nameservers with Netlify's nameservers: 
    dns1.p01.nsone.net
dns2.p01.nsone.net
dns3.p01.nsone.net
dns4.p01.nsone.net
  4. Save changes

Option B: External DNS

Add these DNS records at your domain registrar:

For apex domain (yourdomain.com):

Type: A
Name: @
Value: 75.2.60.5

For subdomain (landing.yourdomain.com):

Type: CNAME
Name: landing
Value: your-site.netlify.app

Step 3: Enable HTTPS

  1. Wait for DNS propagation (up to 48 hours, usually faster)
  2. Netlify automatically provisions SSL certificate
  3. Enable "Force HTTPS" in Domain settings

Environment Variables (If Needed)

If you need environment variables for your build:

  1. Go to Site settings → Environment variables
  2. Click "Add a variable"
  3. Add key-value pairs
  4. Redeploy your site

Build Configuration File (Optional)

Create a netlify.toml file in your project root for advanced configuration:

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

[build.environment]
  NODE_VERSION = "22"

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

This file is version-controlled and ensures consistent builds.

Deploy Previews

Netlify automatically creates deploy previews for pull requests:

  1. Create a pull request on GitHub
  2. Netlify builds and deploys a preview
  3. Get a unique URL to test changes
  4. Share with team before merging

Perfect for collaboration!

Forms Integration (Bonus Feature)

Netlify has built-in form handling—perfect for landing page contact forms!

Step 1: Add Netlify Attribute to Your Form

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Step 2: Deploy

Netlify automatically detects and handles the form!

Step 3: View Submissions

  1. Go to Site settings → Forms
  2. View all submissions
  3. Set up email notifications

Free tier includes:

  • 100 form submissions/month
  • Spam filtering
  • Email notifications

Analytics (Optional)

Netlify offers basic analytics for $9/month per site, but you can use free alternatives:

  • Google Analytics
  • Plausible Analytics (privacy-friendly)
  • Cloudflare Analytics (if using Cloudflare DNS)

Troubleshooting

Build Fails

  1. Check the build logs in Netlify dashboard
  2. Verify package.json includes all dependencies
  3. Test build locally: npm run build
  4. Check Node version compatibility

404 Errors After Deployment

Add redirect rules in netlify.toml:

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

Custom Domain Not Working

  • Wait 24-48 hours for DNS propagation
  • Check DNS settings: dig yourdomain.com
  • Verify nameservers if using Netlify DNS
  • Check for conflicting DNS records

Performance Optimizations

Netlify automatically provides:

  • Global CDN: 100+ edge locations worldwide
  • Automatic compression: Gzip and Brotli
  • HTTP/2: Faster loading
  • Instant cache invalidation: Changes go live immediately
  • Asset optimization: Images and code optimization

Rollback Deploys

Made a mistake? Easy rollback:

  1. Go to Deploys tab
  2. Find the previous working deploy
  3. Click "Publish deploy"
  4. Previous version is live in seconds

Deployment Badges

Show deployment status in your README:

[![Netlify Status](https://api.netlify.com/api/v1/badges/YOUR-SITE-ID/deploy-status)](https://app.netlify.com/sites/YOUR-SITE-NAME/deploys)

Find your badge in Site settings → General → Status badges

Next Steps

  • Set up custom domain for professional branding
  • Configure form notifications for lead capture
  • Enable deploy notifications (Slack, email, etc.)
  • Set up branch deploys for staging environments

Cost Summary

Free tier:

  • Cost: $0/month
  • Bandwidth: 100GB/month
  • Build minutes: 300 minutes/month
  • Sites: Unlimited

Perfect for landing pages! You'll likely never need to upgrade unless you get massive traffic.

Deployment Time: 1-3 minutes per deployment Difficulty: Very Easy 🟢