Prompt Creation
Use an AI chatbot to write your website prompt
Before writing a single line of code — or asking an AI to — you need a clear, detailed description of what you want. The best approach is to let a conversational AI help you articulate it. Use one of the tools below and describe your website idea in plain language. The AI will turn your rough idea into a structured, detailed prompt you can hand off to a code-generating AI in the next step.
Example prompt to the chatbot
"I want to build a single-page portfolio website for a freelance photographer. It should have a dark background, a hero section with my name and tagline, a gallery grid of 6 photos, an about section, and a contact form. Write me a detailed HTML generation prompt I can give to another AI."
The chatbot will return a well-structured prompt you can copy. Review it — add or remove anything that doesn't match your vision — then move on to the next step.
Code Generation
Feed the prompt to Gemini or Claude for HTML output
Now take the prompt you generated and paste it into Gemini or Claude. Both are capable of producing clean, complete single-file HTML output that includes embedded CSS and JavaScript — everything in one file, which makes the next steps much easier.
Tip — add this to the end of your prompt
Append this line to your prompt before submitting: "Output the complete website as a single self-contained HTML file with all CSS and JavaScript embedded inline. Do not use external files or CDN links." This makes it much easier to preview and iterate.
Once the AI responds, select all the HTML code in its reply and copy it to your clipboard. You'll paste it into a preview tool in the next step.
Preview & Iteration
Preview and refine your site using CodeBeautify
CodeBeautify's HTML Viewer lets you paste raw HTML code and see it rendered instantly in a browser — no setup required. Go to codebeautify.org/htmlviewer, paste your code into the left panel, and click Run. Your website will appear in the preview panel on the right.
- Paste your copied HTML into the left editor pane.
- Click Run (or the ▶ button) to render the preview.
- Note anything that looks off — layout issues, wrong colors, missing sections.
- Go back to Claude or Gemini and describe the problem: "The nav bar overlaps the hero image. Fix it and output the full updated HTML."
- Paste the new code back into CodeBeautify and preview again.
- Repeat until you're satisfied with the result.
Iterating effectively
Be specific when asking for changes. Instead of "fix the design," say "increase the font size of the hero headline to 60px and change the background color to #1a1a2e." The more specific your feedback, the faster you'll converge on a result you like.
When the site looks the way you want, copy the final HTML code. This is the file you'll commit to GitHub in the next step.
Version Control
Save your HTML to a GitHub repository
GitHub will act as the storage location (repository) for your HTML file. Cloudflare Pages will read from this repository to build and serve your site. You'll need a free GitHub account at github.com before starting.
- Log into GitHub and click the + icon → New repository.
- Name it something simple, e.g.
my-portfolio-site. Set it to Public. - Check Add a README file and click Create repository.
- Inside the repo, click Add file → Create new file.
- Name the file index.html — this is important. Cloudflare (and all web servers) look for this filename as the homepage.
- Paste your final HTML code into the file editor.
- Scroll down and click Commit changes.
Why GitHub?
GitHub gives you version history for free — every time you commit a change, the old version is preserved. If you update your site later and break something, you can roll back to a working version. It also integrates directly with Cloudflare Pages for automatic deployments.
Hosting
Connect GitHub to Cloudflare Pages and deploy
Cloudflare Pages is a free static site hosting service that deploys directly from a GitHub repository. Every time you push an update to GitHub, Cloudflare will automatically rebuild and republish your site — no manual uploads needed. You'll need a free Cloudflare account at cloudflare.com.
- Log into Cloudflare and navigate to Workers & Pages in the left sidebar.
- Click Create application → Pages → Connect to Git.
- Authorize Cloudflare to access your GitHub account when prompted.
- Select the repository you created (e.g.
my-portfolio-site). - On the build settings page, set Framework preset to None and leave Build command blank.
- In the Build output directory field, type / (a single forward slash). This tells Cloudflare to serve files directly from the root of your repository, where your
index.htmllives. - Click Save and Deploy.
- Cloudflare will provision your site in about 60 seconds. You'll receive a public URL ending in
.pages.dev, e.g.my-portfolio-site.pages.dev.
Updating your site later
To update: edit index.html in your GitHub repo (or create an updated version via AI and commit it). Cloudflare automatically detects the change and redeploys within a minute or two.
Your site is now live on the public internet. Share the .pages.dev URL with anyone. You can also add a custom domain (e.g. yourname.com) through Cloudflare's domain settings, though that requires purchasing a domain separately.
Important Caveats
Security issues to understand with free Cloudflare Pages hosting
Cloudflare Pages on a free developer account is a convenient tool for sharing work, but it comes with meaningful limitations and security trade-offs you should understand before using it for anything beyond prototyping.
Your site is fully public by default. Anyone with the URL can view it. There is no built-in password protection or user login on the free tier.
If your repo is public (required for the free flow), your source code is visible to everyone. Never embed API keys, passwords, or sensitive data in your HTML.
Any contact form or input field in your AI-generated HTML is decorative only — unless wired to a backend service, submitted data goes nowhere and is not encrypted.
If your site collects any user data — even via analytics scripts — you are responsible for compliance with privacy laws. Free static hosting provides no tooling for this.
Cloudflare does provision a TLS certificate automatically, so traffic between the visitor's browser and Cloudflare is encrypted — a basic minimum.
Cloudflare's network absorbs most volumetric attacks at the infrastructure level — a genuine advantage of using their platform even on the free tier.
Bottom line
For production websites that handle user accounts, payments, personal data, or business-critical information — use a managed hosting provider with proper backend infrastructure, environment variable management, and security auditing. Cloudflare Pages free tier is not designed for those use cases.
Knowing the Boundaries
Limitations of this entire process
This workflow is genuinely powerful for what it is — but it's important to be clear-eyed about where it breaks down. The following limitations apply to the end-to-end process described in this guide.
| Area | Limitation |
|---|---|
| AI accuracy | AI-generated HTML can contain layout bugs, outdated CSS practices, or non-semantic markup. It requires human review — especially for accessibility and cross-browser compatibility. |
| Static only | This workflow produces static HTML. There is no database, no server-side logic, no user accounts, and no dynamic content. Everything visible must be hardcoded at build time. |
| Scalability | Cloudflare Pages free tier limits bandwidth and build invocations. A site with significant traffic may hit rate limits and require a paid plan. |
| Maintainability | As the site grows, managing a single large index.html file becomes unwieldy. Real projects benefit from component-based frameworks (React, Vue) and proper build pipelines. |
| AI consistency | Each AI generation is independent. Asking for "small changes" often produces a substantially different file. Version control in GitHub mitigates this but doesn't eliminate it. |
| SEO | AI-generated pages may lack proper meta tags, structured data, and semantic HTML needed for good search engine indexing without manual additions. |
| Custom domain cost | The free .pages.dev subdomain looks unprofessional. A custom domain requires a separate annual purchase (~$10–15/year for a .com). |
| No backend services | Email, authentication, payments, and databases all require external services (SendGrid, Auth0, Stripe, Supabase, etc.) wired in separately — none of which this workflow covers. |
This workflow is a proof-of-concept tool — and that's a feature, not a bug.
The process described in this guide is best understood as a rapid prototyping pipeline. It lets designers, entrepreneurs, product managers, and non-developers move from an idea to a live, shareable URL in under an hour — without writing a line of code by hand. That is genuinely valuable for getting feedback, validating ideas, and communicating vision to developers or stakeholders.
It is not a substitute for professional web development. Production websites — especially those handling user data, transactions, or business-critical functions — require proper architecture, security review, accessibility audits, performance optimization, and ongoing maintenance. Those things require skilled developers and more robust infrastructure than this stack provides.
Use this process to prove something is worth building. Then, if it is — build it properly.