From ChatGPT to a live website: the complete step-by-step guide

ChatGPT is surprisingly good at writing websites. Describe a bakery, a portfolio or a wedding page and it will produce HTML, CSS and JavaScript in seconds. What it can’t do is put that site on the internet for you.

Here’s the shortest path from chat to a live website.

Step 1: Ask for code you can actually publish

The way you ask makes publishing much easier. A prompt that works well:

Build a one-page website for a small pottery studio called “Moss & Kiln”. Return a single HTML file with all CSS and JavaScript inline. Use relative links, no build tools, and a contact form that POSTs to /_forms/contact. Include a proper <title> and meta description.

Why each part matters:

• Single HTML file — one thing to copy, nothing to forget.
• No build tools — the page runs as soon as it’s served.
• Form action — the contact form will actually deliver messages.
• Title and description — what people see in Google and link previews.

Step 2: Copy the code

Use the copy button on the code block (or in canvas). Make sure you got everything from <!doctype html> to </html>.

Step 3: Paste it into StaticHero

1. Sign up (free).
2. Choose an address like moss-and-kiln.statichero.site.
3. Pick Paste code, paste, and press Publish.

The site is live with HTTPS immediately.

Step 4: Make changes

Two ways to iterate:

• Small edits (a phone number, a typo): open the Files tab and edit index.html in the browser. Save to publish.
• Bigger changes: ask ChatGPT, copy the new version, paste it again. The old version is kept automatically.

If ChatGPT gave you several files

Sometimes you’ll get index.html, style.css and script.js as separate blocks. Either ask ChatGPT to “combine everything into one HTML file”, or:

1. Create a folder on your computer.
2. Save each block as a file with the exact name ChatGPT used.
3. Drag the folder into StaticHero.

Multi-page sites

Ask for each page as a separate file (index.html, about.html, menu.html) with links like <a href="about.html">. Put them in one folder and upload it. StaticHero serves /about from about.html automatically, so URLs stay clean.

Common problems and fixes

The page looks unstyled. The CSS was in a separate block you didn’t save, or the <link> path doesn’t match the file name.

Images are broken. ChatGPT often uses placeholder image URLs. Replace them with your own images (uploaded alongside the HTML) or royalty-free images you have the right to use.

The form does nothing. Check the <form> tag has action="/_forms/contact" and method="POST".

Make it yours

A site that works is step one. Before you share it widely, connect your own domain, add a favicon, and turn on analytics so you can see whether people actually find it.