Transforms articles, blog posts, and documentation into polished interactive single-page HTML experiences. Paste a URL or text — it normalises the content, classifies the structure, and builds a purpose-fit interactive page.
Build your site in one afternoon, using three AI tools
A proven 4-phase workflow — ChatGPT for requirements, Gemini for code generation, Claude Code for customization, GitHub Pages for deployment. Total cost: $12.
Time 4–5 hours
Cost $12 (domain only)
Stack Astro · Tailwind · GitHub Pages
By Alex Huang · March 2026
ChatGPT
Define your requirements
~30 min
Key principle
AI tools don't make decisions for you — they help you turn "vague" into "actionable." Leave this phase with a structured doc you can hand to the next tool.
1
Open a ChatGPT conversation and describe your rough idea — what the site is for, who it's for, what it needs to do.
2
Ask it to turn your idea into structured requirements covering four areas: tech stack, page structure, visual direction, and feature list.
3
Iterate until everything feels specific. Push back on vague outputs — ambiguity here causes rework in every subsequent phase.
4
Save the final doc. This becomes the exact input for Phase 2.
Output you should have
Chosen stack (Astro + Tailwind recommended), list of pages, visual direction notes, and a feature checklist. Specific enough that a code generator can act on it without asking clarifying questions.
Phase 1 of 4
Google Gemini
Generate the prototype
30–60 min
Why Gemini here
Gemini's strength is long-context code generation — it can output an entire Astro project in one pass. You want a running local codebase at the end of this phase, not a plan.
1
Paste your requirements doc into Gemini. Ask for a complete Astro + Tailwind CSS codebase with all pages included.
2
Ask for placeholder content in all pages and a working layout — you'll replace the content in Phase 3.
3
Copy the output into a local project folder. Run npm install && npm run dev — it should run immediately.
4
Browse the local preview. Note what needs changing. Don't fix anything yet — that's Phase 3.
Common pitfall
Preview shows the old version. If npm run preview isn't reflecting changes, you skipped a build step.
Always run npm run build before npm run preview. The dev server (npm run dev) auto-rebuilds; preview does not.
Phase 2 of 4
Claude Code
Customize and personalize
1–2 hours
Why Claude Code here
Claude Code has direct local filesystem access — it modifies multiple files simultaneously and handles coordinated changes that would break if done one-at-a-time in a chat interface.
1
Open your project folder in Claude Code.
2
Blog migration: if you have existing posts, ask Claude Code to import and convert them in bulk.
3
Animations: add scroll reveals, hover effects, and page transitions across the project.
4
Replace all placeholder content with your real information — bio, projects, resume data.
5
Verify with npm run dev before moving to deployment.
Common pitfall
Downloaded error XML instead of an SVG. If an externally-hosted icon or image renders broken, check its file size — CDN errors return XML, not binary data.
Externally-hosted assets with expiry timestamps will also break after time passes. Localize everything into your project's /public folder.
Phase 3 of 4
GitHub Pages
Deploy to production
~1 hour
Key principle
Budget more time than you expect. The steps are mechanical but the ordering matters — one missed setting breaks the whole pipeline.
1
Push your code to a GitHub repository.
2
Create .github/workflows/deploy.yml — the GitHub Actions workflow that builds and publishes your site on every push.
3
In repo Settings → Pages, set Source to "GitHub Actions". This must be done before the first workflow run.
4
For a custom domain: add a CNAME file to /public containing your domain name.
5
Configure DNS: add 4 A records pointing to GitHub's IP addresses, and a CNAME record for www.
Critical pitfall — most common failure
Pages Source not set before workflow runs. The configure-pages action fails if you haven't set Source to "GitHub Actions" first.
Settings → Pages → Build and deployment → Source → "GitHub Actions". Do this before triggering any deployment.
DNS propagation
DNS changes take up to 48 hours to propagate globally. HTTPS certificate provisioning adds another step. Your custom domain won't work immediately after configuration.
Phase 4 of 4
When this approach works
Works well for
Static sites, blogs, portfolios
No backend or database needed
Quick validation of ideas
Sites you'll maintain yourself
Not suited for
Dynamic features (user accounts, comments)
Completely code-free scenarios
Highly custom commercial designs
Sites requiring a backend API
Four things to remember
Clear requirements prevent rework — vagueness in Phase 1 costs double the time in Phase 3.
Different tools shine at different stages — don't force one tool to do everything.
Budget time for deployment — the mechanics are simple but ordering is unforgiving.
Ship incomplete work rather than perfecting unreleased versions — a live site at 80% beats a perfect site that never launches.