How to build a website the right way

You no longer need to know how to code to build a fast, professional website. You need to understand which tools exist, what each one does, and how to let AI write the code for you. That's exactly how the site you're on right now was built.

Why not Wix or WordPress? They're great for getting started, but a site built in code is faster, fully flexible, completely yours, and you can connect any system to it: a chatbot, forms that land straight in a spreadsheet, a voice bot, anything you like.

The big picture: what each tool does

Think of building a website like building a house:

• VS Code: the workbench. The app where you open the website's files.
• Claude Code or Codex: the contractor. An AI assistant that writes and fixes code from plain-language requests.
• GitHub: the safe. Stores every file and the full history of every change.
• Vercel: the house on the street. Puts the site on the internet so anyone can visit.
• Supabase: the storage room. A database for information like leads, users and content.
• Namecheap: the address. Where you buy a domain name like mybusiness.com.

1. VS Code: the workbench

VS Code is a free code editor from Microsoft, used by most developers in the world. Even if you never write code yourself, it's where you see the site's files, run it on your computer, and work with the AI assistants.

1. Download VS Code from code.visualstudio.com and install it.
2. Also install Node.js (the recommended LTS version) from nodejs.org. It's the engine that runs the site on your computer.
3. Install Git from git-scm.com. It's the tool that saves versions and talks to GitHub.
4. Create a new folder for the site and open it in VS Code (File → Open Folder).

2. Claude Code and Codex: your developers

This is the part that changes everything. Claude Code (by Anthropic) and Codex (by OpenAI) are AI coding agents: not just a chat that answers questions, but an assistant that reads your whole project, writes files, runs commands, checks that everything works and fixes errors on its own.

• Claude Code: works as a VS Code extension or in the terminal (the black window where you type commands). Requires a paid Claude plan.
• Codex: OpenAI's agent, also available as a VS Code extension. You sign in with a paid ChatGPT account.
• You can use one or both. Some people build with one and let the other review the work.

How do you work with them? Write a clear request, the way you'd brief a designer. For example:

Build a fast, mobile-first website for my business using Next.js.
Business: [what you do, in one sentence]
Audience: [who your customers are]
Pages: Home, About, Services, Contact
Style: dark background, green accents, clean and modern
The main goal of every page: get the visitor to message me on WhatsApp.
Before writing code, show me a short plan and wait for my approval.

3. GitHub: the safe and the time machine

GitHub keeps all of your site's code in the cloud, with a full history of every change. If something breaks, you go back to the previous version in one click. If your laptop is stolen, the code is safe. And if you work with a designer or developer, everyone works on the same files without overwriting each other.

• commit: saving a point in time, with a short message describing what changed.
• push: sending your saved changes from your computer to GitHub.
• pull: bringing changes others uploaded down to your computer.

You don't have to memorize the commands. Tell Claude Code or Codex "save and push to GitHub" and it does it.

4. Vercel: putting the site live

Vercel is the server that runs your site and serves it fast to visitors around the world. The magic is the GitHub connection: every time you push a change to GitHub, Vercel rebuilds and publishes the site on its own, within a minute or two.

1. Sign up to Vercel with your GitHub account.
2. Click Add New → Project and pick your project from GitHub.
3. Click Deploy. A minute later you have a live site at a temporary address ending in vercel.app.
4. Add keys and passwords under Settings → Environment Variables.

Vercel also creates a preview for every work branch, so you can check a change at a separate address before it reaches the real site.

5. Supabase: when the site needs to remember things

A simple brochure site doesn't need a database. But the moment your site has to store information, Supabase comes in: form submissions, users who sign up and log in, guides and products you manage from the site, or a knowledge base for a chatbot.

• Database: organized tables, like a smart spreadsheet.
• Auth: user sign-up and login, including sign-in with Google.
• Storage: hosting images and files uploaded through the site.

The free plan is enough for most small businesses. Note: on the free plan, a project that isn't used for a week is paused and needs to be woken up.

6. Namecheap: buying your address

Vercel's temporary address works, but a business needs its own. On Namecheap you buy a domain, usually for around $10–$20 a year. Check the renewal price too, not just the first-year deal.

1. Search Namecheap for the name you want and buy it.
2. In Vercel, open your project → Settings → Domains and add the domain.
3. Vercel shows exactly which DNS records (the settings that point your address to the server) to add. Copy them into Namecheap under Domain List → Manage → Advanced DNS.
4. Wait a little, sometimes a few hours. Vercel adds the padlock (HTTPS) automatically.

How it all works together

1. Open the project in VS Code.
2. Ask Claude Code or Codex for a change and check it on your computer.
3. Tell it to save and push to GitHub.
4. Vercel picks up the change and publishes the updated site on its own.
5. A minute or two later, the change is live at the domain you bought on Namecheap.
6. And when the site needs to store information, it keeps it in Supabase.

It looks like a lot at first, but you set it all up once. From then on, every change to your site is one sentence to your AI assistant. Want to build it together, or need help setting it up? Message me on WhatsApp.