How to Launch a Website with AI

What You'll Build

A simple, modern static website: one HTML file, a stylesheet, and an image or two. Think a personal landing page, a portfolio, a small business site, or a "coming soon" page for a project. The exact same workflow scales up to multi-page sites later, but we're starting small on purpose.

The end result

When you finish this guide you'll have:

• A working website at a public URL like your-site.netlify.app (or your own domain)
• A copy of the code on GitHub that doubles as a backup and a portfolio piece
• An automatic deploy pipeline: change the code and the site updates within seconds
• The exact same setup professional developers use, just simpler

The Big Picture

Before we touch a keyboard, here's the whole pipeline on one screen. Every step we do later fits into this diagram.

What each step does

• You Describe what you want in plain English.
• AI Claude or Cursor writes the actual index.html, styles.css, and any other files.
• GitHub The cloud folder where your code lives. Free, with full version history.
• Host Netlify or DigitalOcean watches GitHub. When the code changes, it serves a new version.
• Live URL What you share with anyone. Works on phones, tablets, and computers, anywhere in the world.

Pick Your AI Tool

You really only need to choose between two paths to start. Both can build the same site. The difference is where the AI lives.

Other AI tools you'll see mentioned

You don't need any of these for this guide, but you'll hear the names:

• GitHub Copilot Autocompletes code as you type. More for ongoing development than starting from scratch.
• ChatGPT Also great at writing HTML and CSS. Anything in this guide that says "Claude" works the same way with ChatGPT.
• Gemini Google's chat AI. Same idea as Claude.
• Windsurf Alternative AI editor similar to Cursor.

Pick one and move on. Switching later is easy because all of them produce the same kind of files.

Accounts You Need

Three free accounts, in this order. Each takes about a minute. Use the same email for all three so they're easy to find later.

1. An AI account (Claude or Cursor)

   Claude: Go to claude.ai and sign up. The free plan handles small sites comfortably.

   Cursor: Download from cursor.com, install it, and create a free account on first launch. Cursor's free tier gives you enough requests to build and tweak a small site.

2. A GitHub account

   Sign up at github.com. GitHub is where your code lives in the cloud. It's free for public projects forever. Pick a username you're happy to share, since it'll appear in your project URLs.

3. A hosting account (Netlify or DigitalOcean)

   Netlify: Sign up at app.netlify.com/signup using "Sign up with GitHub". This pre-links the two accounts and saves a step later. Free tier covers small projects.

   DigitalOcean: Sign up at cloud.digitalocean.com. DO requires a credit card on file even for the free tier. App Platform's static-site Starter plan is $0/month and includes 3 static sites with 1 GiB of data transfer per site (at the time of writing — check current pricing).

Anatomy of a Static Site

Before AI generates anything, it helps to know what it's going to generate. A simple website is just a small folder of files on your computer.

my-site/              your project folder
├── index.html        the page itself (required)
├── styles.css        colors, fonts, layout
├── script.js         optional interactivity
└── images/           logo, photos, icons
    └── logo.svg

That's it. The browser opens index.html, which says "load styles.css and script.js too", and you have a website. The job of the AI is to write good versions of these three files.

What each file actually does

• index.html The structure. "There is a heading, then a paragraph, then a button labeled 'Get in touch'."
• styles.css The look. "Headings are big and dark navy. Buttons are rounded and pink."
• script.js The behavior (optional). "When the button is clicked, smooth-scroll to the contact section."

Prompting AI for Your First Site

This is the most important section in the guide. Most beginner frustration comes from vague prompts that produce vague results. We'll fix that with a simple template.

The 4-part prompt template

Every good "build me a website" prompt has four parts. Use this every single time and your results will jump in quality:

1. WHO it's for      :  "personal portfolio for a freelance illustrator"
2. WHAT'S ON IT      :  "hero with name + tagline, 6-image gallery,
                         about section, contact email"
3. THE VIBE          :  "calm, lots of white space, serif headings,
                         soft pastel accents, mobile-first"
4. THE CONSTRAINTS   :  "single index.html with inline CSS, no
                         frameworks, no build step, no JS unless
                         absolutely needed"

Example 1: A minimal personal page

Paste this into Claude or Cursor's chat and you'll get a full, working file back in seconds:

Build me a one-page personal site for "Sam Rivera, freelance
illustrator based in Lisbon".

Sections, in order:
- Hero with name, one-sentence tagline, and a soft accent shape
- Featured work: a 6-image responsive gallery (use placeholder
  images from picsum.photos)
- Short about paragraph (3-4 sentences I can edit)
- Contact: my email is [email protected]

Vibe:
- Calm, generous white space, serif display font for the name
  (use a Google Font like "Fraunces"), system font for body
- Soft cream background (#faf6f0), warm dark text
- Rounded corners, subtle hover lift on gallery images

Technical constraints:
- Single index.html file with all CSS in a <style> tag
- No JavaScript unless strictly needed
- Mobile-first responsive, looks great at 360px and at 1440px
- Include accessible alt text and meta tags
- Add a favicon as inline SVG so I don't need a separate file

Example 2: A "coming soon" page

Build a "launching soon" page for a product called "Pebble Notes",
a calm note-taking app. Just a logo, headline, one short paragraph,
and an email signup field that looks real but doesn't need to work
yet.

Style: minimal, lots of negative space, soft gradient background
from #f0f4f8 to #e3ecf3, modern sans-serif (Inter from Google
Fonts). Centered vertically and horizontally. Looks like a Stripe
or Linear teaser page.

Single index.html, all CSS inline. No external libraries.

Example 3: A small business landing page

Build a single-page site for "Bramble & Oak", a small bakery
in Brooklyn.

Sections:
- Sticky header with logo (text "B&O") and links to
  Menu / About / Visit
- Hero: photo of bread (use unsplash.com URL), name overlay,
  hours strip
- Menu section: 3 columns (Breads, Pastries, Coffee) with
  4-5 items each, prices on the right
- About: 2 paragraphs + small map placeholder
- Footer: address, phone, social icons (use simple SVG)

Style:
- Warm and rustic but modern. Cream background, espresso brown
  text, terracotta accent (#c1542d)
- Display font: "Playfair Display". Body: "Inter"
- Generous padding, max-width 1100px

Files:
- index.html
- styles.css (separate file this time, please)
No JS framework. Vanilla everything.

Path A: Doing this in Claude (web)

1. Open a new chat

   Go to claude.ai and click New chat.

2. Paste your 4-part prompt

   Use one of the templates above as a starting point. Edit the name, sections, and vibe to match your project.

3. Click the file Claude generates

   Claude will return code in a labeled block. Click the small Copy button (top-right of the code block). Never select-and-copy by hand or you'll lose indentation.

4. Save it as index.html

   On your computer, make a new folder called my-site on your Desktop. Open a plain text editor (TextEdit on Mac, Notepad on Windows). Make sure it's in Plain Text mode, not Rich Text. Paste, then save the file as index.html inside my-site.

5. Repeat for any other files

   If Claude returned a separate styles.css, save it the same way. If everything is inline in index.html, you're done.

Path B: Doing this in Cursor

1. Create a project folder

   Make an empty folder called my-site on your Desktop. In Cursor, choose File → Open Folder… and select it.

2. Open the AI chat panel

   Press Cmd + L (Mac) or Ctrl + L (Windows). The Cursor chat panel slides out on the right.

3. Switch to Agent mode

   At the top of the chat, click the mode dropdown and pick Agent. This lets the AI create files in your folder instead of just printing code at you.

4. Paste your 4-part prompt

   Use the same templates above. Cursor will create index.html (and any other files it decides on) directly in your my-site folder. You'll see them appear in the file tree on the left.

5. Approve the changes

   Cursor shows a diff for every file it creates or edits. Click Accept at the top of each one (or Accept All at the top of the chat).

Preview It on Your Computer

Before going live to the world, let's make sure the site looks right locally. There are three easy ways, in order of simplicity.

Option 1: Just double-click index.html

Open your my-site folder in Finder (Mac) or File Explorer (Windows). Double-click index.html and it opens in your default browser. The address bar will show something like file:///Users/you/Desktop/my-site/index.html. That's fine for static sites with no JavaScript fetching anything.

Option 2: A tiny local server (one command)

Open a terminal (Terminal on Mac, PowerShell on Windows), navigate to your project, and run one command. Pick whichever line works on your machine. Most people have at least one of these already installed:

# Move into your project folder
cd ~/Desktop/my-site

# Then ONE of these (try them top to bottom):
python3 -m http.server 8000        # built-in on macOS & Linux
python -m http.server 8000          # Windows w/ Python
php -S localhost:8000               # if PHP is installed
npx serve .                         # if Node.js is installed

Then open http://localhost:8000 in your browser. Press Ctrl + C in the terminal when you're done.

Option 3: Cursor's built-in preview

If you're in Cursor, just ask the agent: "Start a local dev server and tell me the URL." It will run the command for you and print a clickable link. You can also install the popular Live Server extension from the Cursor marketplace, then right-click index.html → Open with Live Server.

What to check on your preview

• Resize the window down to ~360px wide. Does anything overflow or break? If yes, ask AI: "This breaks at 360px wide. Fix the responsive layout."
• Open Chrome DevTools (right-click → Inspect) and toggle device mode (the phone icon, top-left of DevTools) to test phone sizes.
• Click every link. Make sure they go where you expect or are placeholder # for now.
• Check images load. Broken image icons mean wrong filename or path.

Put Your Code on GitHub

Right now your website only exists on your laptop. To put it on the public internet via Netlify or DigitalOcean, the host needs to be able to read your files. The standard, modern way to share code is GitHub.

The easy way: GitHub Desktop

If you've never touched git before, skip the command line entirely. Use GitHub's free desktop app, which has buttons for everything.

1. Install GitHub Desktop

   Download from desktop.github.com. Open it and sign in with the GitHub account you made earlier.

2. Add your project

   Choose File → Add Local Repository… and pick your my-site folder. GitHub Desktop will ask "this folder isn't a git repository, want to create one?" Say yes.

3. Make your first commit

   You'll see all your files listed on the left. In the bottom-left, type a summary like "first version of my site" and click Commit to main.

4. Publish to GitHub

   At the top, click Publish repository. Give it a name (matches the folder by default), pick whether it's public or private (public is fine for a personal site), and click Publish Repository. Your code is now on github.com.

The Cursor way

If you're in Cursor, you don't need GitHub Desktop. Cursor has source control built in. Open the Source Control panel in the sidebar (the branch icon, or Ctrl + Shift + G):

1. Initialize the repository

   Cursor will offer an Initialize Repository button if your folder isn't a git repo yet. Click it.

2. Stage and commit

   Click the + next to "Changes" to stage all files. Type a commit message like "first version" in the text box and press Cmd/Ctrl + Enter.

3. Publish to GitHub

   Click Publish Branch. Cursor will ask GitHub to create the repo for you and push your code in one step. Done.

The command-line way (optional)

For completeness, if you want to learn git commands, here's the same flow in a terminal:

cd ~/Desktop/my-site

git init                                      # turn folder into a repo
git add .                                     # stage every file
git commit -m "first version of my site"      # save a snapshot

# Then create an empty repo on github.com (no README, no .gitignore)
# and copy the URL it shows you. Replace below:
git branch -M main
git remote add origin https://github.com/you/my-site.git
git push -u origin main

For a deeper walkthrough of the commands, see our Git Commands Guide.

Deploy with Netlify (Recommended)

Netlify is the most beginner-friendly host on the planet for a static site. Once your code is on GitHub, going live takes about two minutes.

1. Log into Netlify

   Go to app.netlify.com and sign in. If you signed up with your GitHub account earlier, you're already linked.

2. Click Add new site → Import an existing project

   Pick Deploy with GitHub. Netlify will ask GitHub for permission to see your repos. Approve it. You can grant access to all repositories or just the one you want.

3. Pick your repository

   You'll see a list of your GitHub repos. Click my-site.

4. Configure the build (you don't need to)

   For a plain HTML site, leave everything blank:

   Branch to deploy:    main
   Base directory:      (leave empty)
   Build command:       (leave empty)
   Publish directory:   (leave empty, or "." )

   Click Deploy site.

5. Wait ~30 seconds

   Netlify pulls your code, packages it, and serves it. When the status flips to Published, you'll see a URL like https://soft-pebble-1234.netlify.app. Click it. That's your site, on the internet, on a real domain.

6. (Optional) Rename your URL

   The auto-generated subdomain is goofy. Go to Site configuration → Change site name and pick something memorable like sam-rivera. Your URL becomes sam-rivera.netlify.app.

Bonus: Drag-and-drop deploys (no GitHub needed)

If you want to skip GitHub for a moment and just see your site live, Netlify supports drag-and-drop. Go to app.netlify.com/drop, drag your my-site folder onto the page. Live URL in 5 seconds. Great for testing, but you lose auto-deploy and version history, so move to the GitHub flow once you're past the "wow" moment.

Deploy with DigitalOcean App Platform

DigitalOcean is a popular cloud provider, and their App Platform product hosts static sites with a similar GitHub-driven flow. The Starter plan is $0/month and covers 3 static sites with 1 GiB of data transfer per site (at the time of writing). Use this if you'd rather not depend on Netlify, or if you want everything (your domains, your servers, your database) in one DO account down the line.

1. Open the App Platform console

   From your DigitalOcean dashboard, click Apps in the left sidebar, then Create App.

2. Choose GitHub as the source

   Pick GitHub and click Manage Access. You'll be sent to GitHub to give DO permission to see your repositories. Grant access to your my-site repo (or all of them).

3. Pick your repo and branch

   Select your-name/my-site. Branch: main. Make sure Autodeploy is checked. That's what enables push-to-deploy.

4. Tell DO it's a static site

   On the resources screen, DO will try to detect your project type. For a plain HTML site, edit the resource and change the Resource Type to Static Site. Settings:

   Source directory:  /
   Build command:     (leave empty)
   Output directory:  /

   If your AI generated a build step (e.g. for a tool like Vite), put the build command here and set the output directory accordingly (often dist or build).

5. Pick the free Starter plan

   On the plan screen, choose Starter ($0/month) for static sites. Confirm region (pick one close to your users).

6. Create the resource

   Click Create Resources. DO clones your repo, builds it, and assigns you a URL like https://my-site-abc12.ondigitalocean.app. First deploy can take 1–3 minutes.

When to choose DO over Netlify

• You're already using DigitalOcean for other things (Droplets, databases) and want one bill
• You expect to outgrow a static site and want a smoother upgrade path to backend services
• You prefer DO's interface or pricing model

For a first project, especially the very first one, Netlify still wins on simplicity. Both produce identical end results: a public URL that auto-updates from GitHub.

The Auto-Deploy Loop

This is the magic. Once the GitHub → host connection is set up, your daily workflow is just five steps and they take seconds.

What this looks like in practice

Let's say you want to change your tagline. The full sequence:

1. Open Cursor (or Claude + your editor)
2. Ask AI: "Change the tagline to: 'Quiet illustration for loud brands.'"
3. Accept the change in the diff
4. In Cursor's source control panel:
   - Stage the change
   - Type commit message: "update tagline"
   - Click Commit
   - Click Sync / Push

5. Wait. Refresh your live URL ~20-60 seconds later.
   The new tagline is up. No FTP, no uploading, no caches to bust.

What if something breaks?

This is one of the killer features. If a deploy fails (or the live site looks wrong), every host gives you one-click rollback:

• Netlify: Site → Deploys → click any past deploy → Publish deploy. You're back online in seconds.
• DigitalOcean: App → Deployments → pick a previous deploy → Redeploy this version.
• GitHub: You can also revert the bad commit (git revert or via the GitHub UI) and let the next auto-deploy fix it.

Add a Custom Domain

The .netlify.app or .ondigitalocean.app URL is fine forever (really). But if you want your-name.com, here's the short version.

1. Buy a domain

   Use any registrar. Popular cheap ones: Porkbun, Namecheap, Cloudflare Registrar. Most .com domains are $10-15/year. Avoid the upsells (privacy is usually free now, you don't need their email or hosting).

2. Add the domain to your host

   Netlify: Site → Domain management → Add a domain. Enter your domain. Netlify will show you the DNS records to set.

   DigitalOcean: App → Settings → Domains → Add Domain. Same idea, DO shows you the DNS records.

3. Point your DNS at the host

   Log into your registrar and find the DNS settings. Either:

   • Easy mode: change the nameservers to the host's nameservers (Netlify gives you 4 nameservers; just paste them in). The host then manages everything for you.
   • DNS-records mode: add an A record (or ALIAS/ANAME) pointing your apex domain (your-name.com) at the host's IP, plus a CNAME for www. The host shows the exact values to copy.

4. Wait for DNS to propagate

   Anywhere from a minute to a few hours. Most of the time it's quick. The host will automatically issue a free HTTPS certificate (Let's Encrypt) as soon as DNS resolves. Your site will be live at https://your-name.com with the lock icon, no extra work.

Iterating With AI

The first version of any AI-generated site is a starting point, not a finish line. Here are the prompts that consistently produce good improvements.

Improvement prompts that work

"Audit this page for accessibility. Add semantic HTML, proper
 heading order, alt text on every image, skip-to-content link,
 and visible focus states. Don't change the visual design."

"Improve the typography. Set a modular type scale, increase
 line-height for body text, give headings more breathing room,
 and use clamp() so text scales between 360px and 1280px."

"Optimize for performance. Inline critical CSS, defer the rest,
 add width and height attributes to all images, use loading=lazy
 on below-the-fold images."

"Add subtle animations. Fade-in-on-scroll for sections, smooth
 hover transitions on links, and a gentle gradient shift on the
 hero. Respect prefers-reduced-motion."

"Add SEO basics: meta description, Open Graph image, favicon,
 a sensible title tag, and a sitemap.xml + robots.txt."

"Refactor this single index.html into separate index.html and
 styles.css files. No other behavior change."

Tightening the loop

Bigger sites benefit from smaller, faster prompts. Instead of asking for a full redesign in one shot:

• Pick one section and ask for changes scoped to it: "Just the hero. Make it taller, add a subtle scroll-down indicator."
• Show the AI what's wrong with a screenshot. In Claude or Cursor, drag a screenshot into the chat. AI is very good at fixing what it can see.
• Ask for two options: "Show me two alternative color palettes for the same site, side-by-side in a comparison HTML file."

Useful design.dev tools while you iterate

• Clamp Generator: fluid font sizes between two viewport widths
• Color Contrast Checker: make sure your palette is accessible
• Gradient Mixer: design hero gradients visually
• Box Shadow Generator: better-looking shadows without trial-and-error
• Free Icons: clean SVG icons you can paste straight in

Common Beginner Pitfalls

The mistakes that consume the most time on a first launch, and how to avoid them.

Editing in TextEdit / Notepad in rich-text mode

Symptom:
  Saved the file as index.html, but the browser shows raw HTML
  text instead of a rendered page. Or the file is named
  "index.html.txt" with the .txt hidden.

Fix:
  - On Mac: TextEdit → Format → "Make Plain Text" before saving.
    Then File → Save → uncheck "If no extension is provided,
    use .txt".
  - On Windows: Notepad → save as → File type "All Files",
    name exactly "index.html".
  - Better: install Cursor or VS Code. They handle this for you.

Putting AI's code in the wrong file

Symptom:
  AI returned three code blocks (HTML, CSS, JS) and you pasted
  all three into one .html file. The site shows literal CSS
  rules as text on the page.

Fix:
  Each code block goes in its own file with the matching name
  the AI suggested. If everything is meant to be one file, AI
  will put the CSS inside <style>...</style> tags and
  JS inside <script>...</script> tags within the HTML.

Forgetting that the deploy needs the LATEST commit

Symptom:
  You changed a file, saved it, refreshed the live URL,
  and nothing changed. You did not commit + push.

Fix:
  Saving on disk is not the same as pushing to GitHub.
  Three steps every time:
    1. Stage  (git add .   or click + in Cursor)
    2. Commit (git commit -m "..."   or commit in Cursor)
    3. Push   (git push   or click Sync / Push)
  Only step 3 triggers a deploy.

Hard-refreshing isn't always enough

Symptom:
  The deploy succeeded (Netlify says "Published") but the
  browser still shows the old version.

Fix:
  - Hard refresh: Cmd/Ctrl + Shift + R
  - If still stale, open the site in a private/incognito window.
  - Service workers can cache aggressively. If you used one,
    bump its cache version in code.

Committing secrets

Symptom:
  You added an API key (e.g. for an analytics or email service)
  directly in your HTML/JS. It's now public on GitHub forever.

Fix:
  - For a static site, treat anything in your code as public.
    Don't put real secrets in client-side files.
  - Use environment variables in your host (Netlify → Site
    settings → Environment variables) for build-time secrets.
  - For form handling and email, use the host's built-in form
    service (Netlify Forms is free for small volumes) or a
    third-party service like Formspree.

Asking AI for something it can't see

Symptom:
  In Claude (web), you say "make the button bigger", but
  Claude can't see your latest file because you didn't paste it.
  It guesses, and the guess doesn't match your code.

Fix:
  - In Claude: paste the relevant file in the chat before asking
    for a change, or attach the file directly.
  - In Cursor: use Agent mode and tag the file with @filename
    so the AI reads the actual current contents.

What to Build Next

You now have the full launch loop. Here are the next-most-useful upgrades, ordered by how common they are.

Add a contact form that actually works

Static sites can't process form submissions on their own, but Netlify and DigitalOcean both offer built-in solutions. On Netlify, just add data-netlify="true" to a <form> tag and submissions appear in your dashboard. Ask AI: "Add a Netlify-compatible contact form with name, email, and message fields."

Add a blog

For a small handful of posts, more HTML files are fine, one per post. For more than ~10 posts, consider a static site generator like Eleventy or Astro. Both deploy on the same Netlify or DigitalOcean pipeline you already set up; you just point the build command at them. Cursor can scaffold either with one prompt.

Add analytics

Privacy-friendly options: Plausible, Fathom, or just Netlify's built-in analytics. All of them are a one-line snippet you paste into your <head>. Ask AI to add it.

Add SEO essentials

Make sure your site has: a unique <title> per page, a meta description, an og:image for social previews, a sitemap.xml, and a robots.txt. Ask AI to "add full SEO meta tags and a sitemap". It knows the playbook.

Graduate from a single HTML file to a small framework

When you outgrow one or two pages, consider:

• Astro: feels like writing HTML, but lets you compose pages from components. Same Netlify or DO deploy flow.
• Eleventy: closer to "HTML with templates", great for blogs and docs sites.
• Next.js: when you need real backend features like logins or databases. Bigger jump in complexity.

Resources

Related guides on design.dev

• Context Engineering Guide: make AI follow your project conventions automatically
• Cursor Rules Guide: configure Cursor with .cursor/rules/ for consistent results
• Claude Skills Guide: write SKILL.md files Claude can reuse
• Cursor & VS Code Shortcuts: keyboard shortcuts that pay back fast
• Git Commands Guide: every git command you'll need (and a few you won't)
• Web Performance Guide: make your site load fast
• HTML Accessibility & ARIA Guide: make sure everyone can use your site
• Dark Mode in CSS: add a polished dark theme

Tools you'll use weekly

• Cursor Rules Generator: generate .mdc rule files for Cursor
• Claude Skills Generator: generate SKILL.md files
• All design.dev tools: clamp generator, color contrast, gradient mixer, and 30+ more

External documentation

• Cursor Docs: the source of truth for Cursor features
• Claude Code Docs: Anthropic's official docs
• GitHub Getting Started: official GitHub onboarding
• Netlify Docs: every feature, every option
• DigitalOcean App Platform Docs
• MDN Learn Web Development: the gold standard for HTML/CSS/JS reference