Deploy your project

Your projects are static sites: just files (HTML, CSS, JavaScript, images) with no server code. Many hosts serve static sites for free with HTTPS included. This guide stays provider-neutral; pick whichever you like.

1. Get your files ready

1. Download the project from the Playground (Export ZIP) or a lesson/project (Download project) and unzip it.
2. Make sure index.html is at the top of the folder you'll upload. Hosts look for that exact name.
3. Check your paths are relative (style.css, images/logo.png, not C:\Users\…) and match file names exactly — most servers are case-sensitive, so Logo.png ≠ logo.png.
4. Search your code for anything secret. Everything you deploy can be read by anyone who visits.

2a. Plain HTML/CSS/JS projects

The unzipped folder is already the website. Three common free options:

• Netlify Drop — open app.netlify.com/drop and drag your project folder onto the page. You get a live URL in seconds. Create a free account (or claim the site) if you want it to stay online and to update it later.
• GitHub Pages — create a public repository on GitHub, choose Add file → Upload files and drag in your files, then commit. In the repository's Settings → Pages, set the source to deploy from the main branch, root folder. After a minute or two your site is at https://<username>.github.io/<repository>/.
• Vercel — sign up for a free account, then either import a Git repository (push your files to GitHub first) or run the Vercel CLI from the project folder. For a plain static folder no build settings are needed.

2b. React (Vite) projects

A React project must be built first. The build turns your JSX into plain, optimised files in a dist folder — that folder is what you deploy, not src.

npm install        # once
npm run build      # creates the dist/ folder
npm run preview    # optional: test the built site locally

• Netlify Drop: drag the dist folder (not the whole project) onto the drop page.
• Vercel or Netlify with Git: push the whole project (without node_modules and dist) to GitHub and import it. They usually detect Vite automatically; if asked, the build command is npm run build and the output directory is dist.
• GitHub Pages: your site lives under /<repository>/, so set base: "/<repository>/" in vite.config.js before building. Vite's documentation has a ready-made GitHub Actions workflow for deploying dist.

3. After it's live

• Open the URL on your phone as well as your computer.
• Open the browser's developer tools and check the Console for 404 errors (usually a wrong path or file-name case).
• To update the site, deploy again (drag the folder again, or push to Git if it's connected).
• A custom domain (like yourname.my) is optional and usually paid; every host above gives you a free address first.