Written by a working engineer

A media for first-time builders with AI

Getting Started

Put Your Page on the Internet — Go Live for Free with GitHub + Vercel

Take the profile page you built with Artifacts and publish it on the internet using GitHub and Vercel. Let Claude Desktop handle the heavy lifting. All you do is ask.

Reading time: 8 min

Goal - After reading this article -

The web page you built with Artifacts will be live on the internet, with a URL you can share with anyone.

Give your page a real URL

In the previous article, we built a profile page just by chatting with Claude. Seeing it pop up in the browser was pretty satisfying, right?

But here's the thing — that page only exists on your computer. If you want to show someone, you'd have to hand them your laptop.

In this article, we're going to publish that page on the internet so anyone can see it just by clicking a link. By the end, you'll be able to say "I have my own website."

And it won't cost a thing. We'll use two free services — GitHub and Vercel. And as usual, Claude does the hard part.

What are GitHub and Vercel?

Two new names just showed up, so let's break them down quickly.

GitHub

A service that stores files on the internet. Developers use it to manage code, but for us, it's just a place to keep our HTML file. Think of it like Google Drive for code.

Vercel

A service that takes files stored on GitHub and turns them into a live website. GitHub alone just stores your file — Vercel gives it a URL that anyone can visit.

So the flow goes like this:

  1. Save the code from Artifacts
  2. Upload it to GitHub
  3. Vercel sees the file on GitHub and automatically turns it into a website
  4. You get a URL

"Steps 2 and 3 sound complicated..." Don't worry — Claude handles all of that for you. All you need to do is create your accounts and ask Claude to take care of the rest.

Step 1: Download your code from Artifacts

First, let's save the code from the page you made with Claude.

  1. Open Claude and find the conversation where you built your profile page
  2. Click the download button in the top-right corner of the Artifacts preview
  3. Move the downloaded index.html to your Desktop

You can technically put it anywhere, but the Desktop makes it easy to tell Claude where to find it later.

Step 2: Create a GitHub account

Next, let's set up a GitHub account. This is the one part you'll need to do yourself.

GitHub

GitHub official — Create an account

github.com
  1. Click "Sign up" in the top right
  2. Enter your email, password, and a username
  3. Complete the verification and you're done

Don't overthink your username — you can always change it later.

Step 3: Create a Vercel account

GitHub is done. One more account to set up, and then it's Claude time.

Vercel

Vercel official — Publish websites for free

vercel.com
  1. Click "Start Deploying"
  2. Choose "Continue with GitHub"
  3. Authorize the connection with GitHub

Since you're logging in with your GitHub account, there's no new password to remember.

That's all the prep work. From here, Claude takes over.

Step 4: Ask Claude to "publish it"

Here's where the magic happens. But first, one new thing to know.

So far, we've asked Claude to "explain" and "create" things. But Claude Desktop can actually run commands on your computer — not just chat. We'll use this feature to have Claude handle everything from uploading to GitHub to publishing on Vercel.

Open Claude Desktop, start a new chat, and try asking something like this. Don't worry about the technical terms — just copy and paste it as-is.

Take the index.html on my Desktop, create a repository on GitHub, upload it, and deploy it on Vercel. Use the gh command to push to GitHub and the vercel command to deploy.

Claude will then run the commands right on your computer. Uploading to GitHub, publishing on Vercel — Claude walks through each step for you.

You might see prompts like "Allow this action?" along the way. Just check what it's asking and hit "Allow."

Tips!!
The first time, tools like gh and vercel might not be installed on your computer yet. Claude will notice and ask "Can I install this?" — just say yes, and it'll handle the installation automatically.

Step 5: Check your URL and share it

When Claude finishes, you'll see a URL in the chat — something like this. If you don't see it, you can grab it from Vercel's website.

https://my-profile-xxxxx.vercel.app

Paste that URL into your browser. Your profile page is now live on the internet.

Text this URL to a friend — they'll be able to see your page right on their phone. Give it some time and it could even start appearing in Google searches.

From here on out, we'll build all sorts of things together on firstprompt — games, useful tools, and more. And whenever it's time to publish, the steps are always the same.

Tips!!
Want a shorter URL, or your own custom domain (like tanaka.com)? You can set that up in Vercel's project settings. Custom domains do cost money though, so the free URL works perfectly fine for now.

Updating your page later

Now that it's live, the next question is: "What if I want to change something?" Same answer as always — just ask Claude.

  1. Ask Claude to update your profile page
  2. Save the new code as index.html, overwriting the old one
  3. Ask Claude to "update GitHub and redeploy on Vercel"

Claude handles everything, and within seconds your updated page is live.

firstprompt itself is built with Claude using this exact same workflow. It really is that simple.

When things go wrong

You might hit an error or run into something unexpected along the way. That's totally fine.

Just show the error message to Claude. Say "I got this error — what should I do?" and it'll explain the cause and walk you through the fix.

Ask Claude when you're stuck. That's been the approach throughout this entire series, and it still works.

Summary

Here's what we covered:

  • GitHub stores your files, Vercel turns them into a live website
  • Once you've created your accounts, just ask Claude to "publish it"
  • If you hit an error, show it to Claude and it'll help you fix it
  • Updating your page follows the exact same flow

With this, the "First Steps" series is complete. You've gone from chatting with AI to building a web page and publishing it on the internet — all by just asking.

Here's the thing: you don't need to memorize any of this. If you're unsure about something, just ask Claude. GitHub, Vercel, commands — "I don't really get it but Claude made it work" is a perfectly valid starting point. Understanding catches up as you keep going.

"I have my own website" — that has a nice ring to it, doesn't it?

※ AI is a powerful tool, but it can sometimes behave in unexpected ways. We are not responsible for any damages caused by AI-generated content or actions. Always back up important data and review AI outputs yourself before using them.