Hands-on

From nothing to a live website.

This is the whole loop, with the real commands: create a site, push it to GitHub, and deploy it live on Vercel. By the end you will have a URL anyone in the world can open — and your first thing to log as a verified proof. It is free, works on almost any laptop, and you do not pay anyone to do it for you.

Before you start you need three free things: a code editor (VS Code or Cursor), Node.js and Git installed (see Set up your PC), a free GitHub account, and a free Vercel account (sign up for Vercel with your GitHub account — it makes step 3 one click).

1. Create your site

The fastest way to a real, modern site is one command. It builds a working Next.js app you can edit and grow.

1. Create the project

In your terminal, run this and accept the defaults when it asks (just press Enter through the questions). Replace my-first-site with any name.

npx create-next-app@latest my-first-site
2. Go into the folder and run it

Start the local development server, then open the link it prints (usually http://localhost:3000) in your browser.

cd my-first-site
npm run dev
3. Make it yours

Open app/page.tsx in your editor, change some text, and save. The browser updates instantly. That is your site — congratulations, you are building.

Even simpler (no framework): make a folder, create a file called index.html with some HTML in it, and open it in your browser. It still counts — you can put a plain HTML site on GitHub and Vercel exactly the same way below.

2. Push your code to GitHub

GitHub is where your code lives online — a backup, a public proof of your work, and the thing Vercel deploys from.

1. Create an empty repository on GitHub

Go to github.com/new, give it a name (e.g. my-first-site), leave it Public, do not tick “Add a README”, and click Create repository.

2. Connect and push from your project folder

Run these in your project. (If you used create-next-app, it already ran git init and made a first commit, so you may only need the last two lines.) Replace YOUR-USERNAME with your GitHub username.

git init
git add .
git commit -m "My first site"
git branch -M main
git remote add origin https://github.com/YOUR-USERNAME/my-first-site.git
git push -u origin main
3. When it asks you to log in

GitHub no longer accepts your password on the command line. The easiest fix is the GitHub CLI — install it, then run this once and follow the browser prompt:

gh auth login

(Alternatively, create a Personal Access Token at GitHub → Settings → Developer settings, and paste it when asked for a password. Or use the GitHub Desktop app for a click-based version of all of this.)

4. From now on

Every time you change something, save it to GitHub with three commands:

git add .
git commit -m "what I changed"
git push

3. Deploy it live on Vercel

This is the moment your site gets a real address on the internet.

The easy way (recommended) — import from GitHub

Go to vercel.com/new, sign in with GitHub, click Import next to your repository, and click Deploy. Vercel detects Next.js automatically, builds your site, and gives you a live URL in about a minute. Bonus: every git push after this deploys your changes automatically.

The terminal way (optional)

If you prefer the command line, install the Vercel CLI and deploy from your folder:

npm install -g vercel
vercel          # follow the prompts to link the project
vercel --prod   # publish to your live URL
If your app uses secrets

Never commit API keys or a .env file. Add them in Vercel under Project → Settings → Environment Variables instead, then redeploy.

Make it count

4. Turn it into proof

You now have a live URL and a public repo — that is exactly what a verified proof is made of. Log it on your Builder Passport: the live link, the GitHub repo, and a 60-second note on how it works and what you would improve.

Building from Nigeria — keep these in mind

  • It is all free. GitHub and Vercel have generous free tiers — you do not pay to host a first site, and no one should charge you to deploy it.
  • Commit and push often, so a power cut never costs you your work — your code is safe on GitHub the moment you push.
  • Download tools once on good data (the create-next-app step pulls a lot), then most of the work is offline.
  • Never put a secret or a .env file in your repo. See secure vibe coding.