Quick Reference Guide

Deployment Step-by-Step Guide

Get your project live on the internet at a real URL. Two paths — pick whichever works.

Before You Start

  • Your project is built in Replit and the live preview works
  • You've finished Lesson 5.5 (your project is tested and polished)
  • A parent is reachable in case the deploy screen asks for payment info — see Path A below

Path A: Replit's Built-In Deploy (One Click — but Check the Cost First)

Replit has a Deploy button right in your Repl. Click it and you get a live URL. Done. But Replit periodically changes what's included on its free plan — sometimes the basic "static" deploy for HTML/CSS/JS projects is free, sometimes it's behind a paid plan, sometimes it's free for a limited time before they ask for a credit card.

Get a parent before you click Deploy

When the deploy screen opens, look for the price near the deploy button.

  • If it says free or $0, go ahead and deploy.
  • If it asks for a credit card or shows any monthly cost, don't enter card info. Close the deploy screen and use Path B (Netlify) below. Netlify's free tier is rock-solid for projects in this course.

If the deploy is free, here's what happens:

  1. Open your project in Replit and confirm the preview pane shows your latest version.
  2. Click the Deploy button in the toolbar.
  3. Choose Static Deployment or Autoscale — whichever option Replit offers for HTML/CSS/JS projects (the wording changes; either works).
  4. Follow the prompts. Replit builds and deploys your project.
  5. You'll get a live URL — usually something like your-project.replit.app. Copy it.
  6. Visit the URL in a new browser tab. Your project is live on the internet.
  7. To update later: edit your project in Replit and click Deploy again. Changes go live in seconds.

Path B: Free Deploy with Netlify (Works No Matter What)

Netlify lets you drag-and-drop a folder and get a live URL in 30 seconds, free. The trick is getting your project out of Replit and onto your computer first. Here's the full walkthrough:

Step 1: Download your Repl as a folder

In Replit, look for a three-dot menu (⋯) or a settings icon on your Repl. Find an option that says Download as zip (the wording varies — sometimes it's under "Export" or "Download project"). If you can't find it, ask AI: "How do I download my Repl as a zip file in Replit?"

Save the .zip to your Downloads folder. Then double-click it to unzip — you'll get a folder with your project files inside (index.html, style.css, etc.).

Step 2: Make a Netlify account

Go to netlify.com and click Sign up. Netlify is 13+ and may want a parent's email confirmation — same routine as Replit. Sign up with a free email account or with your GitHub account.

Step 3: Drag the folder onto Netlify

Once you're logged in to Netlify, the dashboard has a section labeled something like "Want to deploy a new site without Git? Drag and drop your site output folder here."

Drag the unzipped folder from Step 1 onto that area. (The folder, not the .zip file. Make sure your index.html is at the top level of the folder, not inside another sub-folder.)

Step 4: Wait 30 seconds, then click your URL

Netlify gives you a random-looking URL like jolly-cupcake-1234.netlify.app. Click it — your project is live on the internet. Anyone with that URL can visit it.

Step 5 (optional): Pick a nicer URL

In your Netlify site dashboard, click Site settings → Change site name to swap the random name for something readable like my-habit-tracker.netlify.app.

To update your deployed project later

Make changes in Replit, download the zip again, drag the folder to your existing Netlify site (click Deploys → Drag and drop your folder here). Updates go live in seconds.

Common Deployment Issues

  • Site shows a blank page: Make sure your main file is named index.html (lowercase). Hosting platforms look for that filename first. If it's named anything else (like main.html or Index.html), rename it.
  • Images or styles not loading: Check that file paths in your code use relative paths (images/photo.jpg) not paths from your computer (C:/Users/...). Capitalization has to match exactly — Photo.jpg won't load if the file is named photo.jpg.
  • Works in Replit, broken once deployed: Try a hard refresh in your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Browsers cache old versions; this forces a fresh load.
  • Charts not showing up: If you're using Chart.js or any library loaded from a CDN, make sure the link uses https:// (not http://). Most modern hosts block insecure resources.

If you're stuck, paste the issue into your AI assistant: "My deployed project at [URL] is showing [describe what's wrong]. The version in Replit works fine. What's likely the cause?"

Post-Deployment Checklist

  • Open the live URL on your actual phone (not just a resized browser)
  • Open it on a desktop or laptop computer too
  • Click every link and button
  • Check that all images and styles load correctly
  • Try adding data, filling forms, or interacting with every feature
  • Share the link with 2–3 testers and ask for honest feedback

Your first deployment is your MVP — the simplest version that works. It doesn't have to be perfect. You'll improve it based on real feedback in Lesson 5.8.

Back to Dashboard →