Vibe Coding for Beginners: From Zero to App/Develop a website
Lesson 4 / 4 · 35 min · 0 / 2 exercises
Course contents
Project · 2 hands-on exercises

Put it online for free

Publish your site on a free hosting plan, know its limits and terms, and check what you're making public before you press the button.

A site on your laptop is a draft; a site with an address is real. Static sites like yours (plain files, no server code) are cheap to host, so several companies host them free. Before you publish, take two minutes to check what you're about to show the world.

What a host does

A host keeps a copy of your files on computers that are always online and sends them to anyone who visits your address. For a static site, that's the whole job, which is why free plans can afford it. Most hosts connect to GitHub: you push your commits there, and the host updates the live site automatically each time. Publishing becomes “commit and push,” and every version stays in your history.

Free options, as of November 2026

HostFree planGood to know
Cloudflare Pages500 builds a month, up to 100 projects, 20,000 files per siteConnects to a GitHub repository; no bandwidth limit is listed on its limits page
Netlify$0, with a 300-credit limit; each production deploy uses 15 creditsThat's about 20 production deploys if nothing else uses credits; deploy previews are unlimited
VercelHobby plan, $0, with 100 GB of data transfer a monthVercel says Hobby is “for personal, non-commercial use”
GitHub PagesSites up to 1 GB, with a soft limit of 100 GB of bandwidth a monthNot allowed as free hosting “to run your online business”, or for sending passwords or card numbers
Your app builderBolt's free plan includes hosting with Bolt branding; v0 deploys to Vercel; Google AI Studio publishes to Cloud RunCloud Run pricing may apply; check your builder's plan for custom domains
Practice site or real business?
For a practice project, any of these work. If the site will advertise a real business, read the terms first: Vercel's Hobby plan is for personal, non-commercial use, and GitHub Pages isn't meant for running an online business. Cloudflare's and Netlify's pricing and limits pages don't mention a similar restriction, but read their terms for yourself before you rely on them.
Quick checkExercise 1 of 2

Crumb & Co. is a real bakery, and the site will advertise it. Based on the table, which choice fits the plan terms best?

Before you publish

Remember from Module 1: every file in a static site can be downloaded by anyone, even files you never link to. If it's in the folder you publish, treat it as public.

Sort itExercise 2 of 2

Publish it, or keep it out of the site?

Card 1 of 6

An API key you pasted in while testing

Definition of done0 / 5
Pick your track · finish either one
Steps · 0 / 5 done

  1. Make a GitHub account

    Sign up at github.com if you don't have an account. The free plan is enough for everything in this course.

    VerifyYou can sign in at github.com.

  2. Push the project to GitHub

    Ask the agent to create a private repository and push your commits. It will usually use the GitHub command-line tool (gh) and may ask to install it. Approve the login in your browser when asked.

    prompt
    Put this project on GitHub as a new private repository named crumb-and-co. First check that no secrets or personal files are in the folder. Walk me through any login steps, and tell me the repository URL when you're done.
    VerifyThe repository URL opens in your browser and shows your files.

  3. Connect a free host

    Sign up for Cloudflare Pages or Netlify (or Vercel Hobby for a personal project), choose to import a project from GitHub, and pick crumb-and-co. It's a plain static site: if the host asks for a build command, leave it empty; if it asks for an output or publish folder, use the project's main folder. Ask your agent if a setting is unclear.

    VerifyThe host shows a successful deploy and a live address.

  4. Check the live site on your phone

    Open the live address on your phone, on mobile data if you can, so you know it works away from your laptop. Tap every link.

    VerifyEvery section loads and every link works on a real phone.

  5. Ship a small change

    Ask for one small change, then commit and push it. Watch the host's dashboard pick it up.

    prompt
    Change the footer to say “Fresh every morning since 2026.” Then commit and push.
    VerifyThe live site shows the new footer within a few minutes.
Check your understanding
Q1. You deleted a test API key from your files, but the folder had been published for a week. What should you assume?
Q2. Why connect your host to GitHub rather than uploading files by hand each time?
· Tick off the 5 step(s) above.
· Work through the 2 remaining exercises above (stuck? each one can show you the answer).
· Score 100% on the quiz.