How to build and publish a website with Claude Code

Getting a project online can sound like a lot of setup. You need somewhere to keep the files, something to help you build, and a way to put the result at a link.

You can do all of that in a browser with three accounts. A fourth comes in when the project needs to store shared data.

• GitHub holds the files and their history.
• Claude Code writes and changes those files.
• Vercel turns the project into a website.
• Supabase stores data, when you need it.

These are the tools I use and understand, so they are the ones I can walk you through honestly. The shape matters more than the names. A place for the files, an assistant to build, a host to publish, a database when you need one. Other tools fill the same roles, and once you have done this once, swapping one out is not hard.

Here is the path from no accounts to something you can open and share. Nothing needs to be installed on your computer.

GitHub · where the files live

GitHub keeps your project's files online and records changes to them. Claude Code works with those files, and Vercel publishes them.

GitHub calls the project's folder a repository.

1. Go to github.com and create an account.
2. Click + → New repository.
3. Give it a name, like my-project.
4. Choose Public or Private. Private is fine. Claude Code and Vercel can reach it once you grant access.
5. Select Add a README file, then Create repository.

A private repository can still power a public website. The files and the published site have separate access settings.

Claude Code · building the project

Claude Code is Anthropic's coding agent. You describe what you want in plain words. It reads the project and writes or changes the files.

1. Go to claude.ai and choose a plan that includes Claude Code on the web.
2. Open claude.ai/code.
3. Follow the prompts to connect GitHub and grant access to your repository.
4. Select the repository and complete the environment setup when prompted.
5. Start a session and describe what you want to build.

Paste this into your first Claude Code session and replace the brackets.

I'm building my first web project using Claude Code, GitHub, and Vercel. I'm working entirely in a browser.

My idea: [describe your project]
Who it is for: [describe the users]
The main thing someone should be able to do: [describe the core experience]

Help me get the smallest useful version online.

Start by inspecting this repository. Ask only the questions you need before building, and choose a simple approach that works on Vercel. Explain technical terms briefly when they come up.

Build the first version so it works on desktop and mobile. Use placeholder content where needed. Add Supabase only if the core experience requires shared or persistent data.

When it is ready:

• Run the available checks and tell me what passed, what failed, and what I should try myself.
• Commit and push the work to a branch, then create a pull request if your tools support it.
• Walk me through merging it and importing the repository into Vercel, including the exact deployment settings this project needs.

Clearly distinguish what you have completed from steps I need to do in my browser. If you cannot access a service, guide me through it. Never ask me to paste passwords or secret keys into chat.

If something fails, help me diagnose it and continue from where we left off.

You do not need to know the framework or file structure before you start. Describe the outcome, answer Claude's questions, and let it propose the approach.

When the first version is ready, ask Claude to commit and push its work, then create a pull request. That is a proposed change to the project.

Review it on GitHub and merge it into main. Think of main as the approved version. It is the version Vercel will publish.

Vercel · the link

GitHub stores the project. Vercel makes it available as a website.

1. Go to vercel.com and sign up with Continue with GitHub.
2. Choose a plan that fits your use. Hobby is free for personal, non-commercial projects. Check the requirements for work or commercial projects.
3. Choose Add New → Project and import your repository.
4. Grant the Vercel GitHub app access when prompted.
5. Check the detected project settings, then click Deploy. If the settings are unclear, ask Claude what the project needs.

When deployment succeeds, Vercel gives you an address, something like my-project.vercel.app.

Open it. That is your project, online.

Vercel now watches the repository. Changes merged into main trigger a new production deployment, and the same link shows the updated version after deployment succeeds.

Supabase · when the project needs shared data

You can build plenty without a database.

Add one when the project needs to save information across visits or share it between people: accounts, submissions, votes, saved items, or anything else that needs to persist.

Supabase provides a database, along with tools for sign-in and file storage.

1. Go to supabase.com and create an account.
2. Create a project. Supabase asks you to pick a region and set a database password while it does. Save that password in a password manager.
3. Connect Supabase to Claude, so it can set up and manage the database directly instead of you carrying commands back and forth by hand.
4. Tell Claude what the project needs to save and who should be able to read or change it. Have it set up the tables and the access rules, explain them in plain terms, and apply them through the connection once you confirm.
5. Ask which environment variables the website needs. Add them in your Vercel project's settings, then redeploy.

Adding a database is its own guide. See How to add a database to your project with Supabase for the full walkthrough, including Row Level Security to keep the data safe.

What it costs, and the order

For a personal project within the free limits, GitHub, Vercel Hobby and Supabase Free can cost nothing. Claude Code is the paid account in this setup. Work or commercial projects may need paid hosting.

Check the current pricing before you start.

The order is:

1. GitHub: somewhere for the files.
2. Claude Code: help building the project.
3. Vercel: a link you can open and share.
4. Supabase: shared data, if you need it.

Start with the smallest useful version of your idea. Get it online, try it, and give someone else the link.

Appendix · useful next steps

Secure your accounts

Enable two-factor authentication on GitHub and the other services. When connecting a service, grant access only to the repositories or projects it needs.

Give Claude standing instructions

Ask Claude to create a CLAUDE.md file with the project's purpose, conventions, and expectations. Claude loads those instructions in future sessions.

Keep it practical: what the project does, how to run it, and what should happen before a change is ready.

Set up checks

Once the first version works, ask Claude to add checks for the behavior that matters:

Set up appropriate checks for this project. Cover the main user flow, explain what each check verifies, and tell me how to run them.

Ask it to run those checks before proposing a change. You can also have it configure GitHub Actions to run them automatically on pull requests.

Passing checks are useful evidence. Still open the project and try the important flows yourself.

Connect additional tools

The database steps connect Supabase to Claude. Vercel offers a similar MCP connection, so Claude can work with your deployments and settings directly too. Follow Vercel's connection instructions and confirm Claude can see the tools before asking it to use them. It is a convenience, not required for the setup above.

Check database access and keys

When adding Supabase, describe who should be able to read and change each kind of data. Ask Claude to configure and verify the permissions and Row Level Security policies.

Supabase's publishable key is intended for browser use. Its secret key has elevated access and must stay in server-side code, outside the repository and browser bundle. Older projects may use the names anon and service_role.

Ask Claude to verify where each key is used before deployment.

Know the free-tier limits

Free plans have usage limits. Supabase projects may also pause after a period of low activity and need to be restored from the dashboard.

Check those limits when the project becomes something people depend on.