Module 4: Netlify CLI Deployment

Overview

Your website lives on GitHub—but only developers can see it there. Time to share it with the world! Using Netlify CLI with Claude's guidance, you'll deploy your site to a real web address that anyone can visit. No server setup, no complex configuration—just pure deployment magic.

What You'll Learn

Installing and setting up Netlify CLI
Deploying directly from your terminal
Understanding the deployment process
Setting up custom domains
Managing and updating deployments

Prerequisites

Completed Modules 1-3
Website in GitHub repository
Netlify account (free at netlify.com)
30 minutes to go live
Excitement to see your site online!

Why Netlify?

The Modern Web Platform

Netlify offers:

Instant deployment: Seconds, not hours
Global CDN: Fast everywhere
HTTPS included: Secure by default
Custom domains: Professional URLs
Continuous deployment: Auto-updates

CLI vs Web Interface

Web interface:

Leave terminal
Drag and drop files
Click through options
Manual process

CLI with Claude:

Stay in terminal
Deploy with commands
Automation ready
Professional workflow

Installing Netlify CLI

Quick Installation

Ask Claude:

⚡ Install Netlify CLI for me. I want to deploy my website project.

Claude will:

npm install -g netlify-cli

Then verify:

netlify --version

First-Time Authentication

⚡ Help me authenticate with Netlify. I have an account but 
haven't used the CLI before.

The process:

Run netlify login
Browser opens
Authorize CLI access
Return to terminal
Ready to deploy!

Your First Deployment

The Magic Moment

In your project directory:

⚡ Deploy my website to Netlify. This is my first deployment.

Claude runs:

netlify deploy

You'll see:

"This folder isn't linked to a site yet"
"Create & configure a new site"
Choose team
Optional: custom site name

Understanding the Process

⚡ Explain what just happened during the deployment. 
What did Netlify do with my files?

Claude explains:

Files uploaded to CDN
Unique URL generated
Draft deployment created
Not live yet (preview only)

Preview Deployments

Testing Before Going Live

After initial deploy:

⚡ Open my Netlify draft deployment so I can preview it.

Claude runs:

netlify open:site

Your browser shows the preview URL!

Checking Everything Works

⚡ What should I check in my preview deployment before going live?

Claude suggests testing:

All pages load
Images appear
Links work
Responsive design
Forms function

Going Live

Production Deployment

Once satisfied with preview:

⚡ My preview looks perfect. Deploy it to production so it's live.

Claude runs:

netlify deploy --prod

That's it! Your site is live at: https://[your-site-name].netlify.app

Your Live URL

⚡ Show me my live website URL and help me share it.

Claude helps you:

Find your URL
Open in browser
Copy for sharing
Celebrate! 🎉

Custom Domain Setup

Professional Web Address

⚡ I want to use a custom domain instead of .netlify.app. 
Guide me through the process.

Claude explains:

Buy domain (if needed)
Add to Netlify
Configure DNS
Wait for propagation
HTTPS automatic

Free Netlify Subdomain

⚡ Can I change my Netlify subdomain to something more memorable?

Change from amazing-einstein-a1b2c3 to your-project-name!

Deployment Configuration

netlify.toml File

⚡ Create a netlify.toml configuration file for my site. 
Explain what it does.

Claude creates:

[build]
  publish = "."

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

Headers and Redirects

⚡ Add security headers and create a redirect from /home to /

Learn advanced configuration!

Updating Your Site

The Update Workflow

Make changes and redeploy:

⚡ I updated my website. Walk me through the complete process 
to get changes live.

Claude guides:

Save changes
Git commit
Git push to GitHub
Deploy to Netlify
Verify updates

Quick Deploy

⚡ Is there a faster way to deploy changes while I'm developing?

Learn about:

Draft deployments
Production when ready
Continuous deployment (next module!)

Essential Netlify Commands

CLI Command Reference

⚡ Show me the most useful Netlify CLI commands with examples.

Key commands:

# Deploy draft
netlify deploy

# Deploy production
netlify deploy --prod

# Open site
netlify open:site

# Open admin
netlify open:admin

# View site info
netlify status

# Link to existing site
netlify link

# Unlink site
netlify unlink

Environment Variables

Secure Configuration

⚡ How do I add environment variables to my Netlify site? 
When would I need them?

Learn about:

API keys
Configuration values
Secure storage
Access in code

Setting Variables

⚡ Add an environment variable for my contact form endpoint.

Claude shows both CLI and UI methods.

Deployment Features

Deploy Previews

⚡ What are deploy previews and how do they work?

Understand:

Every deploy has unique URL
Test before production
Share specific versions
Rollback capability

Instant Rollbacks

⚡ I deployed a broken version! How do I quickly go back 
to the previous working version?

Crisis management with Claude!

Forms and Functions

Netlify Forms

⚡ My site has a contact form. Set it up to work with 
Netlify's form handling.

Claude adds:

Form detection attribute
Spam protection
Submission handling
Email notifications

Serverless Functions

⚡ Can I add backend functionality to my static site?

Discover Netlify Functions basics!

Performance Optimization

Asset Optimization

⚡ How can I make my Netlify site load faster?

Claude explains:

Image optimization
CSS/JS minification
Caching strategies
CDN benefits

Analytics

⚡ Set up Netlify Analytics to see who visits my site.

Learn about privacy-friendly analytics.

Troubleshooting

Common Issues

"Page not found" errors

⚡ Some pages show 404 errors on Netlify but work locally. 
Help me fix this.

"Deploy failed"

⚡ My deployment failed with an error. Help me understand 
and fix it.

"Changes not showing"

⚡ I deployed but don't see my changes live. What could be wrong?

Checkpoint Task

Your Mission

Deploy your website to the world:

Netlify Setup
- Install Netlify CLI
- Authenticate with account
- Link to your project
- Configure site settings
First Deployment
- Deploy to draft URL
- Preview and test everything
- Deploy to production
- Share your live URL
Site Enhancement
- Add custom site name
- Configure netlify.toml
- Set up form handling
- Test contact form
Update Workflow
- Make visible change
- Commit to Git
- Push to GitHub
- Deploy to Netlify
- Verify live update
Professional Touch
- Add favicon
- Configure 404 page
- Set up redirects
- Optimize performance