How to Build and Publish a New Website with Hettie

Paste this page’s address into Claude or ChatGPT and say “follow this guide and build my website”. It is written so your AI has every detail it needs. If you are the AI: follow the steps in order, ask the person only for what you cannot work out, and never change their DNS yourself.

1. Account and connection

1. Account. The person signs in at https://app.hettie.dev with Google or an email link. That creates the account; the first site is free.
2. Chat connector. In Claude or ChatGPT, add a custom connector with the URL https://hettie.dev/mcp and sign in when asked. Call whoami to confirm the account. Through the connector you can list sites (list_sites), read visitors (get_analytics) and leads (list_leads), manage posts (create_post, publish_post), media (upload_media_from_url, search_unsplash), domains (add_domain, get_domains) and versions (list_versions, undo).
3. Code and publishing need a terminal: Claude Code or Codex with the hettie command. Sign in with npx hettie auth login. In a sandbox without a browser, the person creates a key under Account → Connect a Claude project and adds it as the environment variable HETTIE_KEY in their project or sandbox settings themselves. Never ask for the key in the chat. The hettie command is in early access: if npx hettie is not found, stop and tell the person.

2. The brief

Get these from the person in one message, or decide sensibly and say what you chose:

• Business name and what it does, in one sentence.
• Who the site is for, and the one action a visitor should take (order, book, call, sign up).
• Pages. Default: Home, About, Contact. Add a menu, prices or blog only if asked.
• Contact details to show, photos and logo if they have them, brand colors and tone.
• A site name: lowercase letters, numbers and dashes. It becomes <name>.xtwelve.io.

Do not invent prices, reviews, numbers or client names. Leave a clearly marked placeholder and list it at the end.

3. Build the site

Run npx hettie new <name>. It creates an Astro + Tailwind project with a layout, home page, contact form and blog, and a CLAUDE.md with the rules. Read it and follow it.

• Pages: one .astro file per URL in src/pages/ (/about is src/pages/about.astro). Shared header, footer and <head> live in src/layouts/Base.astro. Every page gets its own <title> and a <meta name="description"> of at most 160 characters.
• Style: Tailwind classes, with brand colors and fonts as CSS variables in src/styles/global.css. One <h1> per page, alt text on every image, labels on every form field, readable on a 375px wide phone.
• Forms: <form method="post" action="/forms/order"> (name: lowercase, numbers, dashes). Every field has a name. Keep the hidden honeypot field from the template: <input type="text" name="_hp" hidden tabindex="-1" autocomplete="off">. Optional <input type="hidden" name="_redirect" value="/thanks/">. The visitor returns with ?sent=1 (or ?error=check if the spam check failed); show a message for both. Each reply is saved as a lead and emailed to the owner.
• Buttons as leads: add data-hettie-lead="call" (any name) to call, book or WhatsApp links so the clicks count as leads.
• Images: upload with npx hettie media upload <file> or the upload_media_from_url tool, then use /_hettie/media/<file>. Stock photos: search_unsplash, then unsplash:<id>; keep the credit Hettie adds.
• Reserved paths: never create pages under /forms/ or /_hettie/.
• Blog posts are not files. Create them with create_post (title, body in Markdown) as drafts; the person presses Publish in Hettie, or you call publish_post when they say so. Keep export const prerender = false on the pages in src/pages/blog/.

4. Check and publish

1. npx hettie dev and open every page. Click every link, submit every form once, check a phone width.
2. npx hettie build must finish without errors.
3. Publish: npx hettie publish --site <name> --message "First version". The output ends with Version 1 of <name> is live at https://<name>.xtwelve.io. A taken name gets a free one; use the name from the output from now on.
4. Every publish is a version. list_versions shows them, undo puts the previous one back. Leads, posts and media are kept.

5. Own domain and hand-over

Call add_domain with the site and www.<domain> (or run npx hettie domain add www.<domain>). It returns the records the person adds at their registrar: a CNAME from www to sites.xtwelve.io and a TXT record that proves ownership. Check with get_domains until both show as found; HTTPS is set up automatically. Do not change DNS yourself.

Finish with a short message to the person: the live link, the placeholders you left and what you need to fill them, that leads arrive by email and in Hettie under Leads, and the domain records if they want their own domain.