Quickstart Publish your first site with Claude Code

A step-by-step guide

Publish your first website with an AI agent

You'll end with your own version of a real website, live on the web, made by telling an AI agent what you want. Work from your phone or your computer.

Start with the big pictureSkip to Step 1
Time: About 1–2 hours

0 of 16 pages done

Start with: The big picture

Counts the pages for the app path. Saved only in this browser. Mark a page done with the button at the bottom of each page.

The one rule

You type or say what you want. The agent does the work. You check it.

Most pages give you a Say this prompt to copy or dictate to the agent. You do things by hand only where the agent has no access: creating your GitHub account, signing in, approving a permission request, installing VS Code if you take that path, and changing a setting on github.com. The main one is turning on GitHub Pages, once, in your repo's Settings → Pages.

A prompt looks like this
Change the site title to "A History of St. Petersburg" and show me what you changed.

What you'll end with

Your own site at https://your-username.github.io/your-repo/, on a subject you choose. You start by copying one of two real sites:

  • history-of-tampa, one long scrolling story. Use it to learn any history subject: a city or neighborhood, a material like indigo, an industry, a company or a movement. Researching, sourcing and telling the story is how you learn it.
  • startup-india-guide, a multi-page minisite with a sidebar, like this guide. Use it to organize any subject that needs several pages: a directory, a handbook, a resource guide or a program catalog.

The running example turns history-of-tampa into a history of St. Petersburg, Florida, in a repo called history-of-st-pete. All four sites below are live.

Starter · easiest · learn a historyhistory-of-tampa200 years of downtown Tampa as one scrolling story. Plain files, no build step. (opens in a new tab) Same engine, new topichistory-of-indigoThe Tampa site's engine, telling the history of a dye instead of a city. (opens in a new tab) Starter · harder · multi-page minisitestartup-india-guideIndia's startup schemes as a searchable site with a sidebar. The agent runs its build step. (opens in a new tab) Built from startup-india-guideFlorida Startup Ecosystem MapA directory with a sidebar. Its repo is private, so you can look but not copy it. (opens in a new tab)

The five steps

Step 2 is the only fork in the road: the app path or the VS Code path. Both lead to the same published site.

Step 1 · GitHubCreate your GitHub accountFree. Your username becomes part of your site's address. Step 2 · Set up your agentApp or VS Code?The app path installs no developer tools. The VS Code path works on your computer. Step 3 · Just enough GitRepos, forks, commits and pushesThe few words you need, and the prompts that do the work. Step 4 · Make it yoursPick a starter and rewrite itCopy history-of-tampa or startup-india-guide, then tell the agent your subject. Step 5 · PublishTurn on GitHub PagesOne setting you switch on yourself. Then your site is live.

What you need

  • A GitHub account. It's free. Step 1 walks you through it.
  • A paid AI plan. Claude Pro or higher for Claude Code, or ChatGPT Plus or higher for Codex. The free Claude plan doesn't include Claude Code.
  • A phone or a computer. The app path works from a phone or a browser. The VS Code path needs a computer.

Saved only in this browser.