🚀 Lesson 21: Publishing to Netlify

How Web Hosting Works

When you open a website in your browser, here's what happens:

A web host is the computer (server) that stores your files and serves them to anyone who visits your URL. Right now, your files are on your laptop — only you can see them. Hosting puts them on a server that's always connected to the internet.

Static vs. Dynamic Hosting

• Static hosting — serves HTML, CSS, JS, and image files exactly as they are. No server-side processing. This is what your site needs. It's fast, cheap (often free), and simple.
• Dynamic hosting — runs server-side code (PHP, Python, Node.js) to generate HTML on the fly. Needed for apps with databases, user accounts, or real-time features. More complex and expensive.

Your site is static — pure HTML, CSS, and JavaScript. This means you can use free static hosting, which is faster and more reliable than most paid hosting for dynamic sites.

Why Netlify?

There are many static hosting options. Netlify is the best choice for beginners because:

• Free tier — 100GB bandwidth/month, 300 build minutes, custom domains. More than enough for a personal site.
• Drag-and-drop deployment — literally drag your project folder onto the browser. No command line needed.
• Automatic HTTPS — your site gets a free SSL certificate. No configuration required.
• Global CDN — your files are cached on servers worldwide, so the site loads fast for visitors everywhere.
• Netlify Forms — your contact form can receive submissions without any backend code.
• GitHub integration — push to GitHub and your site updates automatically.

Other Static Hosting Options

Deploy with Drag-and-Drop

The fastest way to get your site live. No account setup required for the first deploy — but you'll want to sign up to manage your site afterward.

Step 1: Create a Netlify Account

1. Go to app.netlify.com/signup
2. Sign up with your GitHub account (recommended — you'll need this for continuous deployment) or with email
3. Complete the onboarding

Step 2: Deploy by Drag-and-Drop

1. Go to app.netlify.com/drop (or click "Add new site" → "Deploy manually" from your dashboard)
2. Open your file manager and find your project folder (the one containing index.html)
3. Drag the entire folder onto the drop area in the browser
4. Wait 10–30 seconds while Netlify uploads and deploys
5. Your site is live! Netlify generates a random URL like happy-morse-a1b2c3.netlify.app

📁 my-website/          ← drag THIS folder
├── index.html
├── about.html
├── recipe.html
├── contact.html
├── 📁 css/
├── 📁 js/
└── 📁 images/

Step 3: Verify Your Site

1. Click the generated URL to open your site
2. Check all four pages — do the links work?
3. Test the mobile menu on your phone (send yourself the URL)
4. Check dark mode, scroll animations, and the contact form

Customizing Your Subdomain

The random URL isn't great for sharing. Let's change it to something memorable.

1. Go to your Netlify dashboard → click your site
2. Click "Site configuration" (or "Site settings")
3. Under "Site information", click "Change site name"
4. Enter a name like tasty-bites
5. Your site is now at tasty-bites.netlify.app

The subdomain must be unique across all of Netlify. If tasty-bites is taken, try variations like tasty-bites-recipes or add your name.

<meta property="og:url" content="https://tasty-bites.netlify.app/">
<meta property="og:image" content="https://tasty-bites.netlify.app/images/og-image.jpg">

Continuous Deployment with GitHub

Drag-and-drop works, but it's manual. A better workflow: push your code to GitHub, and Netlify automatically rebuilds and deploys your site. Every git push updates your live site in about 30 seconds.

Step 1: Push Your Project to GitHub

If you haven't already, create a GitHub repository and push your code:

# In your project folder (terminal/command prompt)
git init
git add .
git commit -m "Initial commit - complete website"
git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git
git push -u origin main

Step 2: Connect Netlify to GitHub

1. Go to your Netlify dashboard
2. Click "Add new site" → "Import an existing project"
3. Choose GitHub as the Git provider
4. Authorize Netlify to access your repositories
5. Select your project repository
6. Leave build settings at defaults (no build command needed for static HTML)
7. Click "Deploy site"

The Continuous Deployment Workflow

From now on, your workflow is: edit code → commit → push → site is automatically updated. No more dragging folders.

Enabling Netlify Forms

Remember how the contact form's action="#" didn't actually submit anywhere? Netlify Forms fixes this with one small change — no backend code, no third-party service, no API keys.

Step 1: Add the Netlify Attribute

Open your contact.html and add data-netlify="true" to the <form> tag:

<!-- Before -->
<form class="contact-form" action="#" method="POST">

<!-- After -->
<form class="contact-form" name="contact" method="POST" data-netlify="true">

That's it. Seriously. When Netlify deploys your site, it detects the data-netlify="true" attribute, automatically processes the form, and stores submissions in your Netlify dashboard.

Step 2: Add a Hidden Bot-Prevention Field

To reduce spam, add a honeypot field that bots fill out but humans don't see:

<form class="contact-form" name="contact" method="POST"
      data-netlify="true" data-netlify-honeypot="bot-field">

    <!-- Hidden honeypot field — bots fill this, humans don't see it -->
    <p class="hidden">
        <label>Don't fill this out: <input name="bot-field"></label>
    </p>

    <!-- Rest of your form fields -->
    ...
</form>

/* Hide the honeypot field */
.hidden {
    display: none;
}

Step 3: View Submissions

1. Go to your Netlify dashboard → your site
2. Click "Forms" in the sidebar
3. You'll see all form submissions with the sender's name, email, and message
4. Netlify can also email you a notification for each submission — set this up in Form notifications

Optional: Custom Success Page

By default, Netlify shows a generic "form submitted" page. To show your own, add an action attribute pointing to a thank-you page:

<form name="contact" method="POST" data-netlify="true"
      action="/thank-you.html">

Then create a simple thank-you.html page with a message like "Thanks for reaching out! I'll get back to you soon." and a link back to the homepage.

Custom Domains & HTTPS

The .netlify.app subdomain is free and works great. But if you want a professional domain like tastybites.com, here's how it works.

How Domain Names Work

Domain Registrars

A domain registrar is where you buy and manage domain names. Popular options:

• Namecheap — affordable, good UI, includes free privacy protection
• Google Domains (now Squarespace Domains) — clean interface, auto-privacy
• Cloudflare Registrar — at-cost pricing (no markup)
• Netlify — you can buy domains directly through Netlify for seamless setup

Domains typically cost $10–15/year for a .com. You don't need a custom domain to have a working site — the .netlify.app URL is perfectly fine for a personal project or portfolio.

Connecting a Custom Domain

1. In Netlify: Site settings → Domain management → "Add custom domain"
2. Enter your domain (e.g., tastybites.com)
3. Netlify gives you DNS records to add at your registrar
4. At your registrar, update the DNS to point to Netlify
5. Wait for DNS propagation (can take up to 48 hours, usually under an hour)
6. Netlify automatically provisions an SSL certificate — your site works on https://

What is HTTPS?

HTTPS (the lock icon in the browser) means the connection between the visitor and your server is encrypted. Netlify provides this for free, automatically. Without HTTPS, browsers show a "Not Secure" warning — which scares visitors and hurts SEO. All Netlify sites get HTTPS by default, including custom domains.

Updating Your Live Site

Your site is live — but you'll want to make changes. Here's how, depending on your deployment method:

If You Used Drag-and-Drop

1. Make your changes locally
2. Test with Live Server
3. Go to your Netlify site dashboard → "Deploys"
4. Drag your updated project folder onto the deploy area
5. Netlify replaces the old version with the new one

If You Connected GitHub

1. Make your changes locally
2. Test with Live Server
3. Commit and push to GitHub:

git add .
git commit -m "Update hero section text and fix mobile nav"
git push

Netlify detects the push and redeploys automatically. Your live site updates in about 30 seconds.

Rollbacks

Made a mistake? Netlify keeps every previous deployment. Go to Deploys, find the previous working version, and click "Publish deploy" to roll back instantly. This is one of Netlify's best features — you can never permanently break your live site.

Hands-on Exercise

Summary

📁 Your Completed Project

my-website/                         🌐 LIVE at yoursite.netlify.app
├── css/
│   └── style.css                   ← all styles: base, nav, hero, cards,
│                                      forms, dark mode, animations, responsive
├── images/
│   ├── favicon-32.png              ← browser tab icon
│   ├── og-image.jpg                ← social sharing preview
│   ├── about-photo.jpg
│   ├── recipe-pasta.jpg
│   ├── recipe-salad.jpg
│   └── recipe-soup.jpg
├── js/
│   └── script.js                   ← mobile menu, dark mode, scroll
│                                      animations, back-to-top
├── index.html                      ← Homepage
├── about.html                      ← About page
├── recipe.html                     ← Recipe page
├── contact.html                    ← Contact page (Netlify Forms)
└── thank-you.html                  ← Form success page (optional)

✅ Validated HTML & CSS
✅ Lighthouse scores 80+/90+/90+/90+
✅ Responsive from 375px to 1920px
✅ Accessible (keyboard, screen reader, contrast)
✅ Dark mode with persistence
✅ Smooth transitions & scroll animations
✅ prefers-reduced-motion respected
✅ Working contact form
✅ LIVE ON THE INTERNET

🚀 Where to Go from Here

This course gave you a strong foundation. Here are paths to keep growing:

• JavaScript — add real interactivity: image carousels, form validation, dynamic content, API calls. This is the natural next step.
• CSS Frameworks — try Tailwind CSS or Bootstrap to build faster with pre-made utility classes and components.
• Static Site Generators — Eleventy or Hugo solve the copy-paste problem for multi-page sites with templates and markdown.
• Git & GitHub — learn version control to track changes, collaborate, and unlock the full power of continuous deployment.
• React or Vue — component-based frameworks for building complex, interactive web applications.
• Build more sites — the best way to improve is to build. A portfolio, a blog, a project for someone else. Every site you build makes you faster and better.

Congratulations on completing the course. Your website is live. Go share it. 🎉