How can I connect my Claude Artifact to the World Wide Web?

Say you’ve asked Claude to build something like a quote calculator, a booking page or a price list. It works and it looks right. The problem is that it only exists inside Claude, so nobody can visit it at yourname.com.

This guide goes from that artifact to a real website on your own domain. You don’t need to be a programmer to follow it. Claude writes the code and I give you the commands to copy. Where a technical term comes up I’ll explain it, and there’s a glossary at the bottom.

First, check whether you need any of this

You might not. If you only want to show a few people what you’ve made, Claude can share it for you. Open the artifact, click Publish (on some plans it’s called Share) and send them the link. It’s free and takes a few seconds.

The rest of this guide is for when you want your own domain, your own branding, or something people are going to rely on. With a Claude link you don’t control the address or the hosting, and there’s not much room to build on it later.

The six stops

Step 1: Ask Claude what it should be built with

Rather than guessing, go back to the conversation where you built the artifact and paste this in. The last line is the important one. Some features only work inside Claude, and you want to find that out now rather than after it’s live.

If the artifact is written in React, the answer will often be TypeScript with Next.js, so that’s what I’ve used for the rest of this guide. React builds pages out of reusable components. TypeScript catches a lot of mistakes before the code ever runs. Next.js handles the parts of a real website you don’t want to build yourself, such as routing, server code and production builds. If Claude recommends something else, the later steps are much the same.

Step 2: Ask Claude to build it properly

An artifact is built to look right in the moment. A real product has to keep working, and still be easy to change a year from now. Most of that comes down to how the code is organised, and you can ask for it directly.

You can view, copy or download the code from the artifact window, but a real project needs more files than the artifact has. It’s simpler to have Claude write out the full project.

There are a few technical terms in that prompt. You don’t need to understand them to use it, but this is roughly what each one means.

A one-page tool doesn’t need five design patterns, which is why the prompt says “only where they genuinely help”. Every extra layer is more code to read and more places for something to go wrong.

Once Claude has finished, ask it to review its own work. It’s one more message and it’s worth sending.

Step 3: Get it running on your computer

You need three free programs. Node.js builds and runs the project. Git records every change, so you can always go back to an earlier version. The GitHub CLI lets you work with GitHub from your own computer.

You’ll type the commands into a terminal, which is a window where you give the computer instructions by typing. On Windows, search the Start menu for PowerShell. On Linux, open Terminal.

sudo apt update
sudo apt install -y git curl
# Node.js: copy the install line from github.com/nvm-sh/nvm,
# reopen the terminal, then run:
nvm install --lts
# GitHub CLI: follow the steps for your system at cli.github.com

winget install OpenJS.NodeJS.LTS
winget install Git.Git
winget install GitHub.cli

Close the terminal, open it again and run the commands below. The first three should each print a version number. The last two tell Git who you are, so put in your own name and email.

node --version
git --version
gh --version
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

node --version
git --version
gh --version
git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Then create the project.

npx create-next-app@latest my-site
cd my-site
npm run dev

npx create-next-app@latest my-site
cd my-site
npm run dev

When it asks you questions, take the recommended defaults. They include TypeScript and Tailwind, and artifacts are usually styled with Tailwind anyway. Open http://localhost:3000 in your browser and you’ll see the starter project running on your own machine. Nobody else can see it yet.

Now replace the starter files with the ones Claude wrote in Step 2, and check it looks the way it did in Claude. If you get an error, paste the whole thing into Claude. Press Ctrl+C in the terminal when you want to stop it.

Step 4: Store your code on GitHub, privately

GitHub stores your code online and keeps every version of it. The code is part of your business, so keep it private.

1. Create a free account at github.com.
2. Turn on two-factor authentication in Settings, so someone with your password still can’t get in without your phone.
3. Log in from the terminal with gh auth login and follow the prompts.
4. From inside your project folder, run the commands below.

git add .
git commit -m "First version"
gh repo create my-site --private --source=. --remote=origin --push

git add .
git commit -m "First version"
gh repo create my-site --private --source=. --remote=origin --push

A repository, or repo, is a project folder that Git keeps track of. Open yours on github.com and check there’s a small Private label next to its name.

Step 5: Publish it with Vercel or Cloudflare

Hosting is the server that keeps your site available all the time. Vercel and Cloudflare both connect directly to GitHub and both run Next.js. This is how I’d choose between them.

Option A: Vercel

1. Go to vercel.com, choose Sign up, then continue with GitHub.
2. Click Add New, then Project.
3. When it asks which repositories it can see, choose only my-site, so it can read that code and nothing else.
4. Click Import, leave the settings as they are, and click Deploy.
5. After a minute or so you’ll have a free address like my-site.vercel.app.

Option B: Cloudflare

1. Create a free account at dash.cloudflare.com.
2. Next.js needs a small adapter to run on Cloudflare. Ask Claude: “Set this project up to deploy on Cloudflare Workers using the OpenNext adapter, and give me the exact build and deploy commands.” This website runs that way.
3. In the dashboard, open Workers & Pages, create an application and connect it to your GitHub repo, again choosing only my-site.
4. Enter the commands Claude gave you. You’ll get a free .workers.dev address.

Button names change from time to time, so if something doesn’t match, look for the closest option or ask Claude. Whichever host you pick, publishing is automatic from here. Push a change to GitHub and the live site rebuilds itself.

git add .
git commit -m "Describe what you changed"
git push

git add .
git commit -m "Describe what you changed"
git push

If the project uses secrets from .env.local, add them in your host’s settings as well, under Environment Variables on Vercel or Variables and Secrets on Cloudflare. Skip this and anything that relies on them will fail on the live site, even though it works fine on your computer.

Step 6: Connect your own domain

A domain name is your address, like yourname.com. You rent it by the year, usually for somewhere around £6 to £15 ($8 to $20) depending on the ending.

1. Buy one from a registrar, a company that sells domain names, such as Cloudflare Registrar, Namecheap or Porkbun. Keep it short and easy to spell, and turn on auto-renew so it doesn’t lapse.
2. In your host, find the Domains settings for the project and add your domain. Add www.yourname.com as well, so both versions work.
3. Your host will show you one or two DNS records. Copy them exactly into the DNS settings at your registrar. If the domain is already with Cloudflare and you’re hosting there too, it can add them for you.
4. Wait. It’s often a few minutes, but it can take up to a day or two. Your host turns on HTTPS (the padlock) once the domain is connected.

To check whether the domain is pointing at the right place yet, run this. It works on both systems. An error or an old address just means it hasn’t updated yet.

nslookup yourname.com

nslookup yourname.com

Once it’s live

That’s the route from Claude to a live site. Before you start telling people about it, I’d read these two, because they cover the problems that don’t show up until real people use it:

• What does my app actually need? Database, login, email, payments and caching, and how to tell when you don’t need them.
• Before you launch: security, licences and checks. The checks to run, and the paperwork people forget.

What it costs, in pounds and dollars

For a small site the bill is smaller than most people expect. This is what I’d budget, and I’ve shown both currencies because the tools bill in dollars. Prices were checked in November 2026 and change often, so confirm them on each company’s pricing page.

Database, email and login services add to this only if you need them, and most have a free tier to start. See what your app actually needs for those costs.

If you’d rather hand it over, that’s what I do. Tell me what you’ve built and I’ll tell you what it needs, give you a fixed price and get it live. See my services and pricing, or get in touch for a free 20-minute call.