project weather

Step 6: Deploying

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Put it on the web.

Where We Are

Your weather app works locally. Let's make it available to anyone.

Choose a Platform

For a simple HTML/CSS/JS project, these work great:

  • Netlify — Drag and drop your folder
  • Vercel — Connect a Git repo
  • GitHub Pages — Free hosting from a repo

We'll use Netlify because it's the simplest.

Deploy to Netlify

  1. Go to netlify.com and sign up (free)
  2. From your dashboard, look for "Deploy manually" or drag-and-drop
  3. Drag your entire Weather folder onto the deploy area
  4. Wait a few seconds

Netlify gives you a URL like random-name-123.netlify.app. That's your live site.

Test It Live

Open the URL on your phone. Search for your city. Everything should work exactly like it did locally.

If something breaks:

  • Check the browser console for errors
  • Make sure all file paths are relative (no absolute paths)
  • Re-deploy after fixing

Custom Domain (Optional)

If you want a custom URL:

terminal
I want to set up a custom domain for my Netlify site.
Walk me through the steps.

Checkpoint

By now you should have:

  • App deployed to a live URL
  • Works on mobile
  • Shareable with anyone

What You Learned

  • Static sites deploy in seconds
  • No server needed for client-side apps
  • Your work is now public and shareable

Exercises

  1. Deploy your Weather folder to Netlify and copy the live URL it gives you.
  2. Open that URL on your phone and run a search to confirm the deployed app behaves exactly like your local version.
  3. If anything breaks live, check the browser console, confirm all file paths are relative, fix, and re-deploy.