BUILT SOMETHING
WITH AI?
LET’S PUT IT ON THE WEB.

You’ve made something with AI. A website, a little game, a tool, maybe an idea you’ve been kicking around for years.

It looks pretty good in the chat window.

Now comes the question: How do you put it somewhere people can actually use it?

That’s what we’re doing here.

In the accompanying video, I build a website for Archer, my Boxer. Photos, a gallery, some Boxer facts, a little personality. A perfectly reasonable use of technology that would have seemed like science fiction not very long ago.

Archer contributed absolutely nothing to the development process. He remains essential personnel.

You can explore the finished project and see the files behind it:

• Visit Archer the Great
• Explore the GitHub repository

I use ChatGPT in the video. Below, I’ll walk through that approach and explain how to accomplish the same thing with Claude. They can both help you build, but their connections and working environments are different.

You only need to follow one AI route.

What we’re connecting, and why

There are three parts to this setup:

The basic flow is:

Describe what you want → build the files → save them to GitHub → publish through Vercel.

A couple of terms will show up along the way:

• A repository, usually shortened to repo, is your project’s home on GitHub.
• A commit is a saved set of changes.
• A branch is a separate version where you can work on changes.
• A deployment is a published version of your project.

You don’t need to become a software engineer before continuing. You just need to recognize those words when a button asks you about them.

Before we start: what does this cost?

You can use a free GitHub account for this example.

Vercel’s free Hobby plan is for personal, noncommercial projects within its usage limits. A personal dog website is a good example. A commercial business site needs an appropriate commercial plan, such as Pro. “You can host this personal project for free” does not mean “every business website gets unlimited free hosting.” Vercel’s Hobby plan details

Your AI subscription is separate. Access to coding tools, plugins, and connectors depends on your account and plan. Claude Code’s cloud sessions currently require an eligible paid Claude plan. Claude Code availability

You also don’t need to buy a domain just to try this. Vercel supplies a project address ending in vercel.app.

For Archer’s simple site, we don’t need a database, paid image service, or AI API running behind the scenes. AI helps create the website. The website itself doesn’t need to call an AI every time someone admires the dog.

Step 1: Create your GitHub account

Go to GitHub and choose Sign up.

Follow the account setup prompts and verify your email address. If you already have an account, sign in to that one. GitHub’s account setup guide

Use an account you intend to keep. Your projects are going to live here.

Step 2: Create and initialize your repository

Once you’re signed in:

1. Click the + menu and choose New repository, or visit Create a new repository.
2. Choose your account as the owner.
3. Give the repository a name.
4. Choose Public or Private.
5. Turn on Add a README file.
6. Click Create repository.

Don’t skip the README. This initializes your repository with its first file and commit, giving our connected tools a starting point. GitHub’s own beginner walkthrough uses this approach. GitHub’s repository quickstart

In the video, I name the repository name.

A dazzling achievement in naming. You can probably improve on it.

Something like archer-website, my-first-site, or your actual project name will be easier to recognize later.

Public means people can see the source files. Private restricts access to the repository. A private repository can still power a public website through Vercel.

For this demonstration, I made the repository public so you can explore it. For client work, I generally keep the source private.

Keep passwords, API keys, and private client material out of your project files.

Step 3: Create your Vercel account

Go to Vercel and create your account. Signing up with GitHub is convenient because we’re going to connect the two.

Choose the plan appropriate for your project.

There are two separate connections to understand:

• Signing in identifies you.
• Authorizing the Vercel GitHub app lets Vercel access your repository.

Being signed in doesn’t automatically mean Vercel can see every project you own.

We’ll import the repository after the website files are ready. In the video, I connect it earlier. That works too, but a repository containing only a README doesn’t have a homepage to display yet.

If you deploy that early and see a 404, you haven’t necessarily broken anything. You may simply have published an empty cupboard.

Let’s put the website in it.

Step 4A: Connect ChatGPT to GitHub

Follow this section if you’re using ChatGPT. Claude users can jump to Step 4B.

The video uses ChatGPT Work with a GitHub plugin that can work with the repository.

Open ChatGPT and select Work. ChatGPT also offers Codex for software development with developer tools and codebase context. The tools available in a conversation determine what it can actually do. ChatGPT’s setup guide

To connect GitHub:

1. Open Plugins. In the video, I access it through settings.
2. Search for GitHub.
3. Open the plugin’s details and install it.
4. Complete the GitHub sign-in and authorization prompts.
5. Grant access to your project repository.
6. Start a new Work conversation and ask it to use the connection.

Plugin installation and authentication can happen in separate steps, so finish any sign-in prompt that appears when you first use it. OpenAI’s plugin instructions

Use this prompt, replacing the example with your own account and repository:

Use the GitHub plugin to inspect my repository, YOUR-USERNAME/YOUR-REPOSITORY. Confirm the repository name, default branch, and files currently present. Tell me whether the tools available in this conversation can create or update files and commit changes.

That last sentence is useful.

A connection that can read a repository isn’t automatically a connection that can edit it. If ChatGPT can only search or summarize your files, use a coding environment with repository write access, such as Codex, rather than repeatedly asking a read-only connection to publish something.

In my recorded session, ChatGPT confirmed read and write access before we built the site.

Do I also need the Vercel plugin?

It’s useful if you want the AI to inspect deployments or work directly with Vercel.

If Vercel is available in your ChatGPT plugin directory, install it and complete its authorization flow. Then ask:

Use the Vercel connection to identify the project linked to YOUR-USERNAME/YOUR-REPOSITORY. Confirm the project and production branch before making any changes.

But a direct Vercel connection is optional for this workflow. Once Vercel is connected to GitHub, repository changes can trigger deployment automatically. You can also manage the initial deployment through Vercel’s dashboard.

You don’t need to spend the afternoon configuring an extra connection just to publish a simple page.

Step 4B: Connect Claude to GitHub

Follow this section if you’re using Claude.

Claude has a GitHub integration for bringing repository files into a conversation. It also has Claude Code, which can work on the project itself.

Those are different jobs.

To discuss or review code in a normal Claude chat

1. Open a conversation.
2. Click + and choose Add from GitHub.
3. Connect your GitHub account if prompted.
4. Select the repository and relevant files.

You can also add GitHub content to a Claude Project and sync it when the source changes. This is useful for questions and analysis, but attaching repository content isn’t the same as setting up an editing and deployment workflow. Claude’s GitHub integration guide

To build the website with Claude Code in your browser

1. Open Claude Code.
2. Sign in with your eligible Claude account.
3. Follow the Sign in with GitHub authorization flow.
4. Install or configure the Claude GitHub app for the repository you want to use.
5. Complete the default environment setup if prompted.
6. Select your repository and submit your task.

Claude Code can work on a branch and push changes to GitHub. You can review the changes, request revisions, and create a pull request. A pull request is simply a proposal to bring that work into the main version of the project. Claude Code’s browser setup guide

For a first project, tell it:

Inspect YOUR-USERNAME/YOUR-REPOSITORY. Build the website described below on a new branch. Check the result, commit the files, and prepare a pull request for me to review. Explain what I need to do next in plain language.

Optional: Connect Claude directly to Vercel

Vercel provides an official remote connector at:

https://mcp.vercel.com

MCP is the connection standard. You don’t need to learn it to use the connector. Vercel’s official connector documentation

For an individual Claude account with custom connectors available:

1. Open Customize → Connectors.
2. Click + → Add custom connector.
3. Name it Vercel and enter the server address above.
4. Add the connector, then connect and sign in to Vercel.
5. In the conversation, use + → Connectors to enable it.

Team and Enterprise accounts may need an owner to add the connector first. Also, don’t assume a connector enabled in a regular Claude conversation is automatically available in a separate Claude Code session. Claude’s custom connector instructions

For our beginner workflow, GitHub’s connection to Vercel remains the straightforward publishing route.

ChatGPT versus Claude: what actually changes?

For this project, the biggest practical difference is the workflow, rather than which AI wins an imaginary coding cage match.

Both routes benefit from the same things: a clear brief, real assets, specific feedback, and someone actually opening the finished page.

That someone is you. Congratulations on your promotion to creative director.

Step 5: Give the AI something useful to work with

Before asking it to build, gather:

• Your photos or illustrations.
• Your logo, if you have one.
• The information the page needs to communicate.
• The action you want visitors to take.
• A few preferences about color, typography, and personality.

For Archer, I supplied ten photos and a straightforward brief.

Attach your files to the task when the interface supports it. A cloud session cannot see a folder on your computer merely because you mention its name. If necessary, upload the images into an assets folder in your repository through GitHub’s Add file → Upload files interface.

If you already have a project, tell the AI to inspect and use those files. You don’t need to rebuild from scratch just to get it online.

A website prompt you can adapt

Build a responsive website about Archer, my Boxer, using the attached photos.

Title it “ARCHER THE GREAT” with bold, distinctive typography. Use blue as the main accent color, a playful dog theme, and tasteful paw-print details.

Include a strong opening section, a photo gallery with images that open larger when clicked, and a short section of accurate Boxer facts with sources.

Optimize the photos for the web while keeping them sharp. Create appropriately sized gallery thumbnails and descriptive image text.

Add an inquiry form at the bottom, but clearly label it as a demo. It must not claim to send a message, and it should not send or store submissions yet.

Use simple HTML, CSS, and JavaScript suitable for deployment from the repository root on Vercel. Include an index.html homepage.

Make the text readable, the buttons easy to use, and the layout work on phones as well as desktops.

Build the actual project files in YOUR-USERNAME/YOUR-REPOSITORY. Explain what you made, what you checked, and anything still unfinished.

Notice what’s in there: the subject, the assets, the visual direction, the sections, the interactions, and the limits.

“Make me an awesome website” leaves a lot open to interpretation.

The AI’s interpretation of awesome may involve seventeen gradients and a spinning cube. Sometimes you just wanted a dog.

Step 6: Review the first version

The first version gives you something concrete to react to.

Open it. Read it. Click it.

In the video, a decorative paw print lands somewhere I don’t particularly want it. That’s a revision, not a reason to throw the whole project out.

Give specific feedback:

Keep the current layout, colors, and typography. Move the decorative paw prints away from the headline. Increase the paragraph text size on mobile. Leave the photo gallery unchanged.

That’s much more useful than:

Make it better.

You can also ask the AI to perform a focused check:

Check the page at phone and desktop sizes. Look for overlapping text, horizontal scrolling, broken images, unreadable buttons, and links that do nothing. Fix those problems without redesigning the page. Tell me what you verified and what you couldn’t verify.

Then look for yourself.

An AI saying “everything works” is a report. Opening the site and testing it is evidence.

Step 7: Save the website to GitHub

The project needs to exist as files in the repository, not just as code displayed in a conversation.

For the ChatGPT route, ask:

Commit and push the completed website files to YOUR-USERNAME/YOUR-REPOSITORY. Confirm the branch and provide a link to the saved commit. Make sure index.html and all required images, styles, and scripts are included.

For the Claude Code route, review the proposed changes and pull request. Once you’re satisfied, merge the pull request into the branch you’ll use for production, typically main.

For Archer, the finished repository contains the homepage, styling, scripts, image assets, a README, and Vercel configuration.

You can inspect those files in the actual Archer repository.

Step 8: Import the project into Vercel

Now we have something to publish.

1. Open your Vercel dashboard.
2. Choose Add New → Project.
3. Find your GitHub account under the repository import options.
4. Locate your repository.
5. Click Import.

If it’s missing, look for Configure GitHub App. Grant Vercel access to that repository, save, and return to the import screen.

This is the exact little detour you see in the video. A missing repository often means missing permission, not a broken project.

Use these settings for the Archer-style static site

If a build command is prefilled, enable its override and clear it.

These settings apply to our simple HTML, CSS, and JavaScript site. A project built with Next.js or another framework needs that framework’s settings instead. Don’t force every project into the Archer configuration. Vercel’s build configuration guide

Click Deploy, wait for it to complete, and open the resulting website.

There it is. An actual address you can send to someone.

Step 9: Understand what happens on the next update

With Vercel’s Git integration configured, changes pushed to the production branch normally trigger a new production deployment. Other branches can produce preview deployments so you can inspect changes before merging them. Vercel’s Git deployment guide

That means your ongoing process can be:

Request a change → review it → save it to GitHub → let Vercel publish it.

You don’t necessarily need to issue a separate deployment command after every update.

I still like giving the AI a clear finish line:

Publish the approved changes through the existing GitHub and Vercel setup. Confirm that the production deployment completed successfully and give me the live URL. Don’t report the task complete based only on a successful commit.

Saving code and successfully publishing a website are separate milestones.

“Done” should mean you can open the thing.

Step 10: Check the live website before sharing it

Open the production URL on your computer and your phone. Also try a private browser window to see what a visitor encounters without your account sessions.

Check that:

• The homepage loads.
• Photos appear and look sharp.
• Text is comfortable to read.
• Navigation and buttons lead somewhere useful.
• The gallery opens and closes properly.
• Nothing overlaps or scrolls sideways on mobile.
• Any forms behave exactly as described.
• Visitors can access the intended public page without signing in.

About that inquiry form

Archer’s form is intentionally a demo. It does not send or store messages.

That was part of the brief, and the repository documents it.

A working business form needs a destination, delivery handling, and a real submission test. A pretty button with “Send” written on it is not an email system.

If you want a live form, make that a separate, explicit task:

Connect this form to my chosen form or email service. Add clear success and failure messages and basic spam protection. Then help me test a submission all the way through to receipt in my inbox.

If something goes sideways

You can fix most beginner problems without starting over.

Give your AI the exact error message, the affected URL, and a screenshot when useful.

Try:

The live homepage is returning a 404 at this URL. Inspect the repository structure, deployed branch, root directory, and output settings. Identify the cause before changing anything. Fix the specific problem and verify the live URL afterward.

That is a better starting point than asking for a completely new website because one setting went sideways.

What we actually built

Archer’s project is deliberately approachable:

• A responsive page with blue accents.
• Ten supplied photos, optimized for the web.
• Smaller gallery thumbnails.
• A lightbox for viewing photos.
• Sourced Boxer facts.
• A clearly identified demo inquiry form.

The original full-size photos aren’t committed to the finished repository. The published images were resized, converted to WebP, and stripped of metadata.

You can compare the result with the original brief:

Explore Archer the Great

See how the project is put together on GitHub

Your version doesn’t have to look like mine. It could be a photography page, a community event, a useful calculator, a browser game, or a first prototype of something you want to build for your business.

The point is learning how to move an idea out of a conversation and into something people can use.

Start with something you can finish

For your first project, choose a clear, manageable goal.

A good page. One useful tool. One experience you can explain in a sentence.

User accounts, payments, databases, and live AI features can come later. They require additional setup and testing beyond the static site we built here.

You don’t need to solve all of that before making your first thing.

Give the AI a clear brief. Supply good material. Look carefully at the result. Ask for specific changes. Publish it and test it.

And if the decorative paw prints invade your headline, tell them to move.

You’re in charge.

Want to turn this into something useful for your business?

I help businesses put AI to work through custom websites, workflows, agents, and connected systems.

Sometimes that starts with a better website. Sometimes it starts with a process your team is tired of doing manually. We figure out what would help, then build around how your business actually operates.

Explore my work at adamcagle.com

See my custom website work

Let’s talk about your project

Now go make something worth sharing.

Live long and prosper.

Adam Cagle