ChatGPT · 5 steps
Build your website with ChatGPT in under an hour
I built a custom single-page website inside ChatGPT and put it live on Netlify's free plan. Here are the five steps and the exact prompts, ready to copy.
I built a custom single-page website inside ChatGPT and put it live on Netlify's free plan. Here are the five steps and the exact prompts, ready to copy.
Analyze these visuals. I want a single-page website matching this aesthetic. My business is [business name]. I [what you do and for whom]. I've attached [my brand guidelines / screenshots / logo]. My brand colors are [hex codes]. Here are sites whose look I love: [URL 1], [URL 2], [URL 3]. Describe the look back to me as a short list: colors with hex codes, font style, spacing, button style and overall mood. Don't write any code yet.
Here is all the content for my homepage, section by section. Keep my exact wording. Don't write any code yet, just confirm you have every section. ## Hero banner [Headline, one line underneath it, and the text for one button] ## Social proof [Client names, logos you'll add, short testimonials with names] ## Services [Each service: name and two sentences] ## Contact [What you want people to send you, plus your email]
Write a fully responsive, modern landing page using HTML, matching the look we agreed in step 1 and using my content from step 2. Include these sections in this order: a hero banner, a social proof grid, a services list and a contact form. Put everything in one file called index.html, with all the CSS inside the file. Make the contact form a Netlify form: name="contact", method="POST", data-netlify="true". Where I need an image, add a clearly labelled placeholder. Give me the complete file in a single code block.
Make the headline in the hero bigger. Change the [button name] button to my brand blue, [hex code]. Make the copy in the [section name] section punchier. Keep it under [40] words. I've changed the design since we started. Update my brand guidelines from step 1 so they match the page as it is now.
Ask ChatGPT for the final code, copy it, and save it as index.html inside a new folder, using a plain-text editor such as Notepad or TextEdit set to plain text. Put any images in the same folder. Sign up for a free Netlify account and stay signed in, then go to app.netlify.com/drop and drag the folder onto the page. Your site gets an address ending in netlify.app. New Netlify accounts start with projects set to private, so only you can see it at first. Select Make public, or go to Project configuration, then General, then Visitor access, and set Project visibility to public. To update the site later, open it in Netlify and drag your new folder onto the Production deploys area.
Yes, ChatGPT can write a complete single-page website in HTML. Give it your brand look and your homepage content, then ask for a fully responsive landing page with a hero banner, a social proof grid, a services list and a contact form. Ask for everything in one file called index.html so it's ready to upload.
Switch the code block from Code to Preview. ChatGPT shows an HTML page as a working page right in the chat, so you see the layout before you save anything. Then tell ChatGPT what to change in plain words, like "make the headline bigger", and check the Preview again.
Use Netlify Drop. Save the code as index.html in a folder, sign up for a free Netlify account, then drag the folder onto app.netlify.com/drop. Your site gets an address ending in netlify.app. The free plan is $0 a month and includes 300 credits, and each live deploy uses 15, so batch your edits.
New Netlify accounts start with projects set to private, so only you can see the site at first. Select Make public, or go to Project configuration, then General, then Visitor access, and set Project visibility to public. Making a project public costs nothing extra.
Yes, Netlify's free plan includes custom domains with SSL. In your Netlify project, open Domain management, select Add a domain, then Add a domain you already own, and follow the setup wizard. Netlify adds a free HTTPS certificate automatically once your DNS is set.
Your finished site is the best record of your brand you'll ever have. The bonus gives you the prompt that turns it into a one-page brand guide, plus my checklist for a custom domain, a working contact form and a phone check.
Using the final version of my index.html, write a one-page brand guide I can reuse for social posts, slides and future pages. Include: every color with its hex code and where it's used, fonts and sizes for headings and body text, button styles, spacing rules, the tone of voice in the copy with three example lines, and a short do and don't list. Format it with clear headings so I can paste it into a document.
In your Netlify project, open Domain management, select Add a domain, then Add a domain you already own. Follow the setup wizard to point your domain at Netlify. Netlify adds a free HTTPS certificate automatically once the DNS is set.
In your Netlify project, go to Forms and select Enable form detection. Then drag your folder onto Production deploys again so Netlify finds the form. To get each message by email, go to Forms, then Submission notifications, and select Add notification. Send yourself a test message.
Prompts, step-by-step guides and checklists you can put to work today.