Publish a Claude Artifact as a Website, Free

Step by step

1. 1

   Open the artifact

   In your Claude chat, open the artifact and look at its code. An HTML artifact starts with <!DOCTYPE html> or <html>. If it starts with import lines, it is a React artifact: ask Claude to rewrite it as one HTML file first.

2. 2

   Copy the code

   Use the copy button of the artifact, or download it as a file. Menu names can change; any way that gives you the complete code works.

3. 3

   Paste it into SiteUp

   Open siteup.fyi, choose Paste code and paste. If you downloaded an HTML file, drop the file instead. Check the preview before anything goes online.

4. 4

   Pick a name and publish

   Type a link name such as space-quiz, choose how long the site stays online and press Publish. You get the link, a QR code and a private manage link.

Two ways to publish an artifact

• Copy and paste. Works with any Claude plan and takes about a minute. You copy the code from the artifact and publish it on SiteUp in the browser or in the Android app.
• Let Claude publish it. Create a free connection on the AI publishing page and add SiteUp to Claude once as a connector. After that, ask in the chat and Claude sends the files to SiteUp itself and gives you the live link. SiteUp also asks Claude to tell you the expiry date and to give you the private manage link.

With the connector, one sentence is enough:

Publish this artifact on SiteUp as space-quiz for 30 days.

The connector is added on claude.ai on the web, and then it also works in the Claude desktop and mobile apps. The Claude Free plan allows one custom connector.

HTML artifacts and React artifacts

SiteUp hosts static files: HTML, CSS and JavaScript that a browser can open as they are. An HTML artifact is already that, so you can publish it directly.

A React artifact is different. It starts with import lines and an export default component, and it runs inside Claude, which provides React and its helper libraries. A browser cannot run that code on its own, so pasting it as it is gives you an empty or broken page. Ask Claude to convert it first:

Rewrite this artifact as one HTML file with inline CSS and JS. If you need a library, load it from a CDN with a script tag. Reply with the complete file only.

Then copy the new version and publish it. When Claude publishes through the connector, you can ask for both at once: “Turn this into one HTML file with inline CSS and JS and publish it on SiteUp.”

If the artifact asks Claude for answers while it runs, that part only works inside Claude. Ask Claude to replace it with plain JavaScript or to leave it out.

Change the page and keep the same link

Artifacts change often: a new colour, a fixed bug, another level. Your link does not have to change with them.

• In the browser: open My sites, choose the site and press Update files. Paste or upload the new version. The link and the QR code stay the same.
• Through the connector: ask Claude, for example “Update space-quiz with this new version.” Claude replaces the files at the same address. It finds the sites published with your connection on its own; for a site you published another way, give it the site’s manage link.
• On another device: sites published in a browser are saved in My sites in that browser. Sites Claude published are not in that list, but you can add any site there with its manage link.

Fix a blank page

Most blank pages have one of these causes, and you see them in the SiteUp preview before you publish:

• It is React code. You pasted a component with import and export default lines. Ask Claude to rewrite it as one HTML file with inline CSS and JS, as shown above.
• The code is cut off. Long artifacts sometimes stop in the middle. An HTML file should end with </html>. If yours does not, ask Claude for the complete file again.
• A library is missing. Imports such as @/components/ui/... or lucide-react are provided by Claude while the artifact runs there. On a normal web page they do not exist. Ask Claude to replace them with plain HTML and CSS, or to load the library from a CDN.
• The page shows, but without styling. React artifacts often use Tailwind class names. Ask Claude to write the styles into the file, or to load Tailwind from its CDN.

If the page is still blank, tell Claude what you see and paste the code back into SiteUp after each fix. Nothing goes online until you press Publish.

Common questions