How to Build a Website with Claude and Put It Online (2026)

Yes, Claude can build a website, and in 2026 there are three ways to do it: a one-page site in a chat, a designed page in Claude Design, or a multi-page site that Claude Code writes into a folder on your computer. What Claude doesn't do is host it. Its Share links stay on claude.ai under Claude's own header, so a site at your own address means exporting the files, or letting Claude publish them to a host through a connector. Here's how to build a website with Claude on each route, and how to put the result online.

Anyone expecting a Claude website builder in the Wix sense, where the editor, the hosting and the bill come as one product, will find something narrower: Claude is the part that writes the pages, in plain HTML or whatever framework you ask for, and the rest is your call.

Checked October 29, 2026. Claude's product names and menus have had a short shelf life this year, so every fact below carries a date.

Choosing a Claude website builder: chat, Claude Design or Claude Code

Use a chat for a single page, Claude Design for a page you want to shape visually, and Claude Code for a multi-page site you'll keep updating. That choice decides most of what follows, including how the site gets online.

Claude's three ways to build a website, checked October 29, 2026

Sources: Anthropic's help center on Claude Design, the Claude Code artifacts docs and claude.com/pricing.

Claude Design is now a template you start an artifact from: Output > Design in a chat's message box, a Design template in the Artifacts tab, or /design in Claude Code. The standalone claude.ai/design closes on December 14, 2026, after which, Anthropic says, "it's read-only, and you can't start new projects there".

New to using Claude to build a website? Start in a chat: it's the simplest of the three, and one HTML file is about the easiest thing there is to host.

Putting it online: Claude's own links vs a real host

A Claude Share link gives you one page at Claude's address. A website is a set of pages that link to each other, at an address you control, that you can update without the address changing, and that takes a host.

Ways to put a Claude-built site online, checked October 29, 2026

Claude plans: artifact link sharing needs Pro and up (Team and Enterprise also need External sharing on), and so do Claude Code artifacts, whose public links need an Owner's OK on Team and Enterprise. Claude Design is on every plan, though its help page doesn't say whether a shared design opens signed out.

Sources: Anthropic's help center on sharing artifacts and custom connectors, the Claude Code artifacts docs, Netlify's connector listing, Wix's Send to Wix docs and Hostsmith's MCP docs.

Two points come with an asterisk, because the documentation disagrees with itself. Anthropic's help center says "Everyone needs a Claude account" to open a shared artifact, while the Share dialog and the Claude Code docs say public links need none; the guide to sharing Claude artifacts sorts out which to believe. And the help center puts Send to in the Export menu, while Netlify and Wix put it under Share, so look in both.

Route 1: a one-page site in a Claude chat

Ask for a single page in a chat, and say plainly that you want one self-contained file. This works on any plan:

Build a one-page website for Northside Bikes, a bicycle repair shop. Sections: a hero with the shop name and a "Book a repair" button that opens an email, a list of services, opening hours, a map link and a contact email. Style: clean and warm, plenty of white space, dark green accents. Put everything in one self-contained index.html: inline CSS and JavaScript, no frameworks, no build step, system fonts, and make sure it works on a phone.

Refine it by chatting, then share the artifact on a paid plan, or choose Export > HTML from its title menu (the way out on Free, which can't link-share new artifacts) and put the file on a host; the guide to hosting an HTML file online compares five. Per Hostsmith's docs, Claude can also publish the page from the chat through the Hostsmith connector and hand back a live URL. Share settings and export gotchas are in the guide to publishing Claude artifacts, and the prompt-to-URL workflow has more prompt templates.

Route 2: build a website with Claude Design

Claude Design suits a page whose look matters more than its page count, and it's on every plan, Free included. The flow, per Anthropic's help center:

1. Start a design from a chat or the Artifacts tab, as above.
2. Describe the page. Name the goal, the layout, the content and the audience:

Design a landing page for Northside Bikes, a neighborhood bicycle repair shop. Goal: get people to book a repair. Layout: a hero with a photo placeholder and a booking button, three service cards, opening hours, a short "about us" and a footer with the address. Audience: commuters and weekend riders, mostly on phones. Style: warm and practical, dark green and cream.

3. Refine it. Chat handles broad changes, inline comments target one element, and you can edit directly on the canvas.
4. Export it. The Export button offers Export as standalone HTML and Download as .zip (plus PDF, PPTX and Google Slides), and Handoff to Claude Code.

Send to is the other way out, to one of 15 tools: Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel and Wix. Hostsmith isn't one, and the site lives at that tool's address, so read its docs first. Wix says Send to Wix "deploys only one HTML page, so extra pages aren't included", and once you publish from your own project, sending again "creates a separate new site". Netlify says you update by deploying again. For Lovable, the Lovable deploy guide covers what's next.

To host it on Hostsmith, choose Export as standalone HTML, save the file as index.html, zip it and drag the .zip into the Hostsmith dashboard, the upload Hostsmith's getting-started guide describes. Download as .zip is the fallback for a multi-file design, but Anthropic doesn't describe its contents, so check that index.html sits at the top level. The drag-and-drop website hosting guide has more.

For something bigger, Handoff to Claude Code is the better exit, since Claude Code carries on from the design rather than a screenshot of it. And anything left in the standalone claude.ai/design needs moving or downloading before December 14, 2026. Moving is "rolling out gradually to paid plans", so if you can't move yet, or you're on Free, download each project there: Share > Project HTML, keep "Project archive" selected, then Export.

Route 3: build a multi-page website with Claude Code

This is how to build a website with Claude Code, and it's the route we'd pick for anything over one page: you get ordinary files in a folder that you can open, edit, keep in git and move.

1. Get a paid plan. Claude Code is "included in all paid plans" and isn't on Free. As of October 29, 2026, Pro is $20 a month billed monthly, or $17 a month billed annually ($200 up front), and Max starts at $100 a month, before tax.

2. Open an empty folder. Install Claude Code from Anthropic's setup docs and start it in a new folder, or use the Code tab in the Claude desktop app:

mkdir northside-bikes
cd northside-bikes
claude

3. Give it a proper brief. A complete first prompt saves rounds of questions:

Build a 4-page static website for Northside Bikes, a bicycle repair shop.
Pages: Home (index.html), About (about.html), Services (services.html), Contact (contact.html).
Use plain HTML and one shared styles.css. No frameworks, no build step.
Every page shares the same header, navigation and footer. Links between pages use relative paths.
Give each page its own <title> and meta description.
There is no backend: the contact form posts to a third-party form service, with a placeholder action URL to replace later.
Put images in an images/ folder and keep each one under 200 KB.
Make it responsive and accessible.

If you'd rather have Astro, say so ("use Astro with static output"): npm run dev gives you a local preview, and npm run build writes the finished site to dist/.

4. Preview and iterate. Ask Claude to start a local server, which behaves more like a real host than double-clicked files, then click through every page at http://localhost:8000:

python3 -m http.server 8000

5. Publish it. Add the Hostsmith connector once, for every project, from your terminal:

claude mcp add --transport http --scope user hostsmith https://mcp.hostsmith.net/mcp

Without --scope user, Claude Code's MCP docs say a server "loads only in the project where you added it". To sign in, start Claude Code again, run /mcp, pick hostsmith and follow the browser steps those docs describe; there's no API key to paste.

Then name exactly what to publish, because the project folder also holds Claude Code's own files (it writes a .claude/ settings folder the first time you approve a permission for good), and none of them belong on a public URL:

Create a Hostsmith site called northside-bikes and deploy only the site files: the .html pages, styles.css and the images/ folder. Leave out .claude/, CLAUDE.md, .git and node_modules.

For Astro, the prompt is "Run npm run build, then create a Hostsmith site called northside-bikes and deploy the contents of dist/."

Per Hostsmith's docs, the agent zips anything over 3 files, or any file over about 1 MB, and Hostsmith unpacks it with subfolders kept; flat pages get clean URLs, so /about serves about.html. A redeploy replaces all the site's files at the same address, so redeploy the whole site, not just the page you touched:

Redeploy the whole site to northside-bikes: every .html page, styles.css and images/.

Hostsmith isn't the only way out, and for some people it isn't the best one. The Claude Code tutorials that rank for this push the folder to GitHub and connect a host such as Cloudflare Pages, which rebuilds on every push; for git history and a free custom domain, that's the better fit (see the GitHub Pages alternatives and Vercel alternatives roundups). Netlify, which also takes a dragged folder through Netlify Drop, makes its own Claude connector; Anthropic Academy's tutorial prompt is "Use my Netlify connector to create a new site project and deploy this as a live website."

Cowork, in the Claude desktop app, works on a folder on your computer as well, and custom connectors such as Hostsmith's work there too.

Putting a Claude-built site on your own domain

Claude's own links can't carry a custom domain, so your own domain always means a host. On Hostsmith, that's Pro and up: add the domain in the Hostsmith app, add the DNS records it shows you at your registrar, and once it's active, Claude can create sites on it and deploy through the connector. Netlify, Cloudflare Pages and GitHub Pages include custom domains on their free plans (October 2026). The domain itself is a yearly cost: Porkbun listed a .com at $11.08 a year on October 29, 2026.

How much does it cost to build a website with Claude?

From $0 to $32 a month on yearly billing. A single page on a shared address costs nothing, a multi-page site costs your Claude plan while you build it, and your own domain adds a host plan (unless your free host includes one) plus the domain's yearly fee.

What a Claude-built website costs, checked October 29, 2026. US dollars before tax; yearly billing where offered, and monthly billing costs more.

Sources: claude.com/pricing, Hostsmith pricing, Porkbun's .com page.

What matters over time is which bill the site depends on. You pay for Claude while you build and for the host while the site is live, so a month without Claude doesn't touch a site on your own host; it's just files, and files don't care which subscription made them. A site that exists only as a claude.ai link stays tied to the account that shared it. One storage note: Hostsmith Free's 5 MB is also its largest single file, enough for a text-and-SVG site; photos push you to Starter.

What to check before a Claude-built site goes live

A few problems only show up once the site is public:

• The form endpoint. Claude's pages have no backend, and Hostsmith, like most static hosts, serves files rather than processing submissions, so a contact form needs a third-party service such as Formspree or Basin, or a mailto: link. If you used the Route 3 prompt, swap the placeholder action URL for the real endpoint before the first deploy.
• What's in the upload. Ask Claude to "list every file you're about to deploy" first. A .claude/, CLAUDE.md, .git or node_modules entry means the deploy set is wrong.
• Previews that mislead. If Claude Code previews the site as an artifact, "Relative links do not resolve" there (per its docs), so a dead menu in that preview isn't a broken site.
• Titles and descriptions. Each page needs its own, which is easy to lose when Claude copies one page to make the next:

Check every page in this folder. Give each one a unique <title> under 60 characters and a meta description under 160 characters, based on what the page says.

Publishing a Claude site on Hostsmith

Hostsmith is our product, so weigh this section accordingly. It hosts static sites, and its connector lets Claude create, deploy and redeploy a live site from the session, on a your-site.us.hostsmith.link address or your own domain from Pro.

In Claude (web, desktop, Cowork): open Customize > Connectors, click + Add, then Add custom connector. Name it Hostsmith, paste https://mcp.hostsmith.net/mcp, click Continue, connect it, and authorize in the browser window that opens. On Team and Enterprise, an owner adds it under Organization settings > Connectors, and each member connects their own Hostsmith account.

In Claude Code: the claude mcp add command from Route 3.

Through the connector, Claude can check your plan and domains, create, list and delete sites, and deploy or redeploy files; MCP comes with every Hostsmith plan, Free included. What it gives you in this workflow: Hostsmith serves the files as you send them, so for Astro, Claude runs the build and deploys dist/; a redeploy from the session lands at the same address; and the connector fits in Free Claude's one custom-connector slot.

The same setup covers client previews. Private Sites, from Starter, puts a site behind a shared password or an email whitelist. You switch it on in the Hostsmith app, not through Claude, and Hostsmith's MCP FAQ says access controls "persist across deploys", so Claude can keep pushing versions only your client can open. Starter has one site, though, so a live site plus a private preview is two sites, which means Pro. More in how to password-protect a website.

Plan prices and storage are in the cost table above, with current prices on the pricing page. On Free, the 5,000 monthly visitors are a soft cap; the 5 GB of monthly bandwidth is the hard limit.

Frequently asked questions

Can Claude build a website for free?

Yes, for a single page. A chat or Claude Design works on the Free plan; Free can't link-share new artifacts, so export the HTML and put it on a free host. Claude Code, the route for multi-page sites, needs a paid plan.

How much does it cost to create a website with Claude?

From nothing for a single page on a shared address to $32 a month on yearly billing for Claude Pro plus Hostsmith Pro on your own domain, as of October 2026. The cost table above has every scenario.

Can Claude Pro build a website?

Yes. Pro adds Claude Code, which builds multi-page sites as real files, and the "Anyone with the link" sharing option for artifacts.

Is Claude a good website builder?

It's good at writing the site, which is the hard part for most people. As a Claude AI website builder in the all-in-one sense, it falls short: no visual editor for clients, no CMS for blog posts and no hosting. Pair it with a host and most of that gap closes.

Can Claude build a WordPress or Wix site?

Through those platforms' own connectors, to a point. Claude's connector directory lists a Wix connector, made by Wix, to "manage and build sites and apps on Wix", and a WordPress.com connector, made by Automattic, that works with sites on paid WordPress.com plans and with self-hosted WordPress connected through Jetpack AI or Jetpack Complete; both need a sign-in. Send to Wix, from Claude Design, sends a single HTML page. For any other WordPress site, getting Claude's theme or posts in is up to your host or a plugin.

Is Claude or ChatGPT better for building a website?

Product shape matters more than benchmarks here. Claude has three surfaces for the job plus its own Share links; ChatGPT builds pages in a chat and connects to some site builders through apps. Either way, you get HTML that needs a host.

Can Claude host a website?

No. Its Share links and Claude Code artifacts are single pages on claude.ai, and for anything hosted, the Claude Code docs say to "deploy it on your own infrastructure instead". Export the files, or have Claude publish them to a host through a connector.

Site builders have bundled the editor and the hosting since the GeoCities days, and Claude, without making much fuss about it, has split them apart again: it writes the files, and where they live is up to you. That's the old static-site arrangement come back round, and the old advice still holds. Keep the files somewhere you control, put them on a host that doesn't care which tool wrote them, and the site will outlast whichever model happened to build it.