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.
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.
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-siteStart the local development server, then open the link it prints (usually http://localhost:3000) in your browser.
cd my-first-site
npm run devOpen app/page.tsx in your editor, change some text, and save. The browser updates instantly. That is your site — congratulations, you are building.
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.
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.
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 mainGitHub 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.)
Every time you change something, save it to GitHub with three commands:
git add .
git commit -m "what I changed"
git push3. Deploy it live on Vercel
This is the moment your site gets a real address on the internet.
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.
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 URLNever commit API keys or a .env file. Add them in Vercel under Project → Settings → Environment Variables instead, then redeploy.
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-appstep pulls a lot), then most of the work is offline. - Never put a secret or a
.envfile in your repo. See secure vibe coding.