How to Publish HTML Made with ChatGPT or Claude

hdply · 2026-08-15

You asked ChatGPT, Claude or Gemini for a landing page, and it produced a complete HTML file that looks great in the chat preview. Now you want a link you can send someone. This guide covers the two things that stand between you and that link: the handful of ways AI-generated HTML breaks once it leaves the chat window, and where to put the file.

First, get the file out of the chat

Copy the entire code block, from <!DOCTYPE html> to the closing </html>, and save it as index.html. Two things go wrong here regularly:

Truncated output. Long pages get cut off mid-tag. Check that the file ends with </html>. If it doesn't, ask for the rest, or ask for the page in two parts and join them.
Smart quotes. Text copied through some interfaces turns " into " and ". Inside HTML attributes that silently breaks them. If your styling looks half-applied, search the file for curly quotes.

Open the file in your browser before doing anything else. What you see locally is what visitors will see.

The four things AI-generated pages get wrong

These aren't the model being bad at HTML — they're artifacts of writing a page for a preview pane rather than for the open web.

1. Placeholder images that never load

Models reach for via.placeholder.com, source.unsplash.com/random or an invented path like images/hero.jpg. The first two depend on services that come and go; the third points at a file that doesn't exist. Replace them with a real image URL, or embed the image directly:

<!-- an inline SVG placeholder that can never 404 -->
<img alt="Hero"
  src="data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'>
      <rect width='100%' height='100%' fill='%23222'/>
    </svg>">

2. Links that go nowhere

Navigation is usually generated as href="#", and forms as <form action="#">. A visitor clicking those gets nothing, and a form "submits" by reloading the page and discarding what they typed. Point the links at real anchors on the page, and give the form a real handler — see adding a contact form without a backend.

3. Missing metadata

The generated page usually has a <title> and nothing else — so it looks anonymous in search results and shows a blank card when someone pastes the link into Slack or a group chat. Fixing that is four tags, covered in the Open Graph guide and the meta tags guide.

4. Desktop-only layouts

Fixed pixel widths and multi-column grids that never collapse look fine in a wide preview and terrible on a phone — where most of the people you send the link to will open it. Check the viewport meta tag and a couple of media queries before you publish.

Check the page is self-contained

AI-generated pages are usually a single file already, which makes them ideal for one-file hosting. Confirm it by scanning for references to files you don't have:

<!-- these need a file next to your HTML — you probably don't have it -->
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

<!-- these are fine: inline, or an external URL -->
<style> /* ... */ </style>
<script> /* ... */ </script>
<link rel="stylesheet" href="https://cdn.example.com/lib.css">

If the model split things into three files, just ask it to inline the CSS and JS into the HTML — it does that reliably.

Publish it

With hdply this is genuinely a minute:

Open the editor and paste the whole HTML file in.
Pick a subdomain — my-page.hdply.com.
Save. The link works immediately, with HTTPS.

You can try it without an account first; those trial sites last an hour, which is enough to check the page renders correctly on a phone before you decide to keep it. If you want to iterate with the AI afterwards, paste the revised HTML over the old version and save again — each save is kept, so a bad revision is one click from being restored.

Iterating with the model after it's live

A workflow that works well: publish early, then give the model your live URL's HTML back with specific changes. Concrete instructions beat open-ended ones — "make the hero section one column below 700px and increase body text to 17px" gets a usable diff; "make it look better" gets a redesign you didn't ask for.

If you're driving an AI agent rather than chatting, hdply has a REST API and an MCP endpoint, so an agent can create and update sites directly — see the API documentation.

Common questions

Is it OK to publish AI-generated content? For your own page, yes. Be aware that search engines rank content on usefulness rather than authorship, so a page of generic filler text won't perform regardless of who wrote it. Also check any images the model suggested — it can't verify licensing.

The page uses React from a CDN. Will that work? Yes, as long as the script tags point at real external URLs. Anything that loads over the network from the visitor's browser is fine.

Can I keep the page private? You can keep it out of search results — hdply publishes sites as noindex unless you turn indexing on per site — but the URL itself is public to anyone who has it. Don't put anything confidential on it.