How to Publish a Claude Artifact as a Real Website
Claude built you a beautiful website inside an artifact. You clicked "Publish" — and got a link on claude.site wrapped in Anthropic's interface. That's great for showing a demo, but it isn't your website. Here's how to put your Claude-generated page online as a real site with your own address.
Claude is genuinely excellent at building web pages. Ask for a landing page, a portfolio, or a one-pager, and it renders a complete artifact you can preview live in the chat. The code it produces is self-contained — HTML, CSS, and JavaScript in a single file — which happens to be the perfect format for instant hosting.
The problem is the last step. Claude's built-in Publish button creates a link that lives on Anthropic's own domain, inside their UI. You can't put it on your own address, you don't fully control it, and it's clearly a "Claude demo" rather than a real website. If you want something you'd actually use — for a business, a portfolio, a project — you need to get that HTML onto real hosting. The good news: it takes about a minute.
First, get the HTML out of Claude
Claude gives you a few ways to extract the raw code from an artifact. Any of these works:
- Copy button: in the artifact panel on the right, click the copy icon (top corner) to copy the full code to your clipboard.
- Download button: look for the download icon (a downward arrow) — Claude saves the artifact as an
.htmlfile to your downloads. - Just ask: type "Show me the complete HTML for this artifact" and Claude pastes the full code into the chat. Select all, copy.
Tip: ask for a single HTML file
If Claude built your artifact in React, ask it to "give me this as a single self-contained HTML file with all CSS and JavaScript inline." A single HTML file is the easiest thing to host — there's nothing to build or assemble, so it works instantly when you paste it.
Step-by-step: from Claude artifact to a live website
Copy your artifact's HTML
Use the copy or download button in Claude's artifact panel, as described above. Make sure you have the complete page — it should start with <!DOCTYPE html> and end with </html>.
Create a free hosting account
Sign up for a free Hostilo account. It takes about a minute and doesn't require a credit card. Choose a name for your site — that becomes your public address, like your-name.hostilo.page.
Paste, save, and go live
Open the editor, paste your artifact's HTML, and click Save. Your site is instantly live at your own address, with a free HTTPS certificate already applied. No claude.site wrapper, no Anthropic UI — just your page, on the open web.
Claude's Publish vs. real hosting — what's the difference?
| Claude "Publish" | Real hosting | |
|---|---|---|
| Address | claude.site/... (Anthropic's domain) | Your own name / domain |
| Looks like | A Claude demo | A real website |
| Custom domain | No | Yes (on paid plans) |
| Contact forms, analytics | No | Yes |
| Full control | Limited | Yes — it's yours |
For sharing a quick demo with a colleague, Claude's Publish is fine. For anything you want to treat as a real website — something you'd put on a business card or send to a client — you want it on proper hosting with your own address.
Editing and updating later
Because your artifact is a single self-contained file, updating is easy. Want to change something? You have two options: edit the code directly in the Hostilo editor and save, or go back to Claude, ask for the change, copy the new version, and paste over the old one. The live site updates immediately either way. Many people just keep iterating in Claude and re-pasting — it's the fastest loop.
Bonus: let Claude (or your AI agent) publish for you
If you use Claude regularly, you can skip copy-paste entirely: add https://hostilo.app/mcp as a custom connector, sign in, and ask Claude to "publish this as my-page" (guide in the docs). If you use Cursor or Windsurf, there's another hands-off path. Hostilo has an API built for AI agents, so your assistant can publish and update sites on your behalf — you generate an API key, give it to your agent, and it deploys directly. You never touch the dashboard. For most people, copy-paste is more than enough, but if you're living inside AI coding tools, this closes the loop completely.
Turn your Claude artifact into a real website
Paste your Claude HTML, hit save, and get a live site at your own address in seconds. Free to start, no credit card.
Publish your artifact freeFrequently asked questions
Why not just use Claude's Publish button?
You can — but it puts your site on a claude.site URL inside Anthropic's interface. That's fine for a demo, but you can't use your own domain, add contact forms, or treat it as a real, independent website. Real hosting gives you all of that.
My artifact is a React component, not plain HTML. Does that work?
The simplest path is to ask Claude to convert it: "Give me this as a single self-contained HTML file with all CSS and JavaScript inline." Then paste that. A single HTML file hosts instantly with nothing to build.
Will interactive artifacts (charts, calculators) still work?
Yes — as long as everything the page needs is inside the file (or loaded from a public CDN), interactive pages work exactly as they did in Claude's preview.
Is it free?
Yes. You can publish on a free subdomain with HTTPS and no credit card. The only condition is a login at least once every 30 days; otherwise your sites are paused, never deleted, and come back as soon as you log in. PRO ($29/year) adds custom domains and removes that rule.
Can I use my own domain?
Yes, on a paid plan. You point your domain (like yourname.com) at your site, verify ownership with a DNS record, and an SSL certificate is issued automatically.
Your Claude creation deserves a real home
Stop settling for a demo link. Give your artifact a real address in under a minute.
Get started free
