How to Build a Website With AI and Host It Free (Full Walkthrough)

Never built a website before? By the end of this you could have a fast, modern site that anyone in the world can visit, without writing a line of code and without paying for hosting.

Not a template. Not a page builder. A real, complete site, built by describing what you want.

The example is mabati.ke, a central place where any Kenyan can check today's mabati prices and compare iron sheet brands. It ended up as a 44 page site building cleanly at 55 routes: a homepage, 11 price pages, brand reviews, comparisons, guides, design galleries, blog posts, and a roof calculator.

The build errors are left in. Two deploys failed. That is the useful part.

The Stack, and What It Costs

The only things you actually pay for are the domain and your AI subscription. Hosting is genuinely free at this scale, which is worth pausing on: the site in this build costs nothing per month to serve.

Step 1: The Prompt Is the Work

See it at 0:54.

This is where most people go wrong. "Build me a website about iron sheets" gets you something generic, because you briefed it generically.

The prompt used here reads like a brief to an expert web developer. It asks for a modern responsive design, SEO done properly with meta tags and semantic HTML and alt text and structured data, Flexbox and Grid for layout, lazy loading on images, vanilla JavaScript rather than frameworks nobody needs, the standard page structure of navigation and hero and content sections and footer, and accessible code throughout.

A second prompt sets the technical direction (2:12): build with Astro, research the dependencies before installing them, and research the right brand colours for the mabati industry rather than guessing.

That last instruction matters more than it sounds. Asking AI to research a sector's visual conventions before it picks colours is the difference between a site that looks like it belongs in the trade and one that looks like a generic template. The result landed on charcoal and orange, which reads like building materials rather than a software company.

Step 2: Connect It to GitHub

See it at 2:37.

Create the repository first, then connect it: Settings, then Connectors, then Add GitHub.

Once connected, Claude can push code directly. That connection is what makes the whole loop work later, because pushing to GitHub is what triggers the deploy. If you would rather deploy to shared hosting than to Cloudflare, the same idea applies through a different route, which our guide to deploying from GitHub to your hosting covers.

Images and a logo come next (3:12). Two options: generate images from scratch, or pull royalty-free photography from Pexels with an API key. For a prices and comparison site, real photographs of the actual product do more work than illustration. A wordmark and roof-mark logo get generated in the same pass.

Step 3: Make It Write a CLAUDE.md

See it at 3:26.

This is the most important instruction in the whole build, and it is the easiest one to skip.

Once the research is done, have Claude write a CLAUDE.md file. That file becomes the guide and the memory for the project: what the site is, who it is for, the conventions, and the decisions already made.

Why it matters: without it, every new session starts from nothing and quietly re-decides things you already settled. You end up with three slightly different navigation styles and no idea which was intended. With it, the project stays coherent across days and sessions. A README.md with the deploy steps gets written alongside it.

Then, rather than letting it assume, tell it to read the plan and interview you in detail about the technical implementation, the interface and the experience (3:39). You end up answering a run of specific questions, which is far more useful than reviewing a finished thing you never shaped.

Step 4: Analytics Before the Build

See it at 4:56.

Google Tag Manager: create an account, set the country, the site, and Web as the platform.

Google Analytics: create the account and property, set the country and currency, fill in the business details and objectives, then create the web data stream. Copy the Measurement ID and paste it back to Claude.

Do this now rather than later. Retrofitting analytics onto a finished site is more annoying than including it in the build, and a site with no analytics for its first month has no baseline to compare anything to.

The Double-Counting Trap

See it at 8:15. This is the most useful catch in the build, and it applies to sites that have nothing to do with AI.

When the Tag Manager code went in, Claude flagged a problem: Google Analytics was being loaded directly in the site and fired through Tag Manager. Both would run, so every visit counts twice. Three real visitors show up as six.

The fix was to move Analytics inside Tag Manager and remove the direct load. In Tag Manager: create a new tag, name it GA4, choose Google Analytics, paste the Measurement ID, set the trigger to All Pages, and save.

Step 5: Build It, Then Run It Locally

See it at 7:03.

Claude names the final scope and starts building. Check in as it goes rather than waiting silently for a finished site. When the first homepage design appears, look at it properly, because this is the cheapest moment to change direction.

By the end of the design pass the scope covers the homepage, 11 price pages, brand reviews, comparisons, guides, design galleries, blog posts and the roof calculator.

Then run it on your own machine (10:25). Open the project folder in a terminal and run the two commands below.

npm install
npm run dev

A couple of small issues came up during install and got fixed on the spot. Then open the local address and click through the site the way a visitor would. Do this before deploying: it is much easier to fix something locally than to debug it on a live host.

Pushing to GitHub is a sentence (9:59). Tell Claude to push, and the commits land. Your code now lives somewhere other than your laptop, which is the entire point of this step.

Step 6: Deploy Free on Cloudflare

See it at 12:21.

In Cloudflare, go to Workers & Pages, then Create, then Pages, then Connect to Git, and connect your GitHub account. Pick the repository and deploy.

Worth knowing, because it looks like a mistake and is not: although this starts from the Pages flow, the working deploy in this build ends up running as a Worker serving static assets through a wrangler.jsonc config. If you follow along and end up with a Worker rather than a Pages project, that is expected.

Once it is connected, here is the loop you now have (13:22):

Step 7: Two Failed Deploys

See it at 14:11. The first build failed to deploy, and the method for fixing it is the most transferable thing here.

Screenshot the failure, copy the build log, and paste both back to Claude.

First round: it identified two issues, one with the deploy step and one with an auto-injected Cloudflare config. The build then succeeded but the deploy still failed. Second round: paste the new build log. Fixed, deployed.

The instinct most beginners have when a deploy fails is to assume they have hit a wall they lack the knowledge to climb. The log is the answer, and handing it over intact is the entire technique. You do not need to understand the error.

Step 8: Put It on a Real Domain

See it at 15:23.

Enable the free workers.dev address and the site is live and shareable worldwide immediately. That is enough to send to someone.

For anything professional, add the custom domain, and put it on the root domain rather than a subdomain, so the site lives at yourdomain.ke rather than www.yourdomain.ke or something worse.

If your domain is not on Cloudflare yet

See it at 16:12. Add the site in Cloudflare, choose the free plan, continue to activation, then change the nameservers at your current provider to the two Cloudflare gives you. Propagation takes a little while, then Cloudflare is in charge.

If you do not have a domain at all

See it at 17:13. Buy one, then point it at Cloudflare's free plan. Our comparison of where to buy a domain covers the registrars worth using for a .ke, and there is a fuller walkthrough of this hosting route in hosting a website on Cloudflare for free.

The Honest Caveats

Worth saying clearly, because the video makes it look frictionless and it is not quite.

• Things will break. Two deploys failed in this build. Expect that, and expect to paste logs back a few times.
• The prompt is the work. The quality of the site tracks the quality of the brief almost exactly. A lazy prompt gives you a lazy site.
• You still need judgement. Someone has to notice that the analytics were double counting, that the design is wrong for the sector, that the copy does not sell. AI will not tell you your site is boring.
• Free hosting has limits. Cloudflare's free tier is generous and fine for most sites, but read what you are getting before you build a business on it.
• Content is still content. The build is the easy half. Making the site worth visiting is the other half, and nobody prompts their way out of that.

Frequently Asked Questions

Can you really build a website with AI without coding?

Yes, and the site in this guide is a real one with 44 pages. You describe what you want, the AI writes the code, and you review what comes back. What you still need is judgement: someone has to notice that the design is wrong for the sector or that the analytics are counting twice. You are directing the work rather than typing it.

How much does it cost to build a website with AI?

Two costs. The AI subscription, and the domain, which is roughly the only unavoidable one. Hosting on Cloudflare is genuinely free at this scale, GitHub is free, Astro and Tailwind are free, and Google Tag Manager and Analytics are free. Nothing else in the stack is billed.

What is the best free hosting for a site built this way?

Cloudflare, because it connects straight to a GitHub repository and redeploys on every push, which is what turns the build into an ongoing workflow. Netlify and Vercel work the same way. The free tier is generous for a static site, but read the limits before you build a business on it.

Why should I make the AI write a CLAUDE.md file?

Because without it every new session starts from nothing and quietly re-decides things you already settled. The file records what the site is, who it is for, the conventions and the decisions already made, so the project stays coherent across days and sessions. It is the easiest step to skip and the most expensive one to skip.

What do I do when the deploy fails?

Screenshot the failure, copy the build log, and paste both back to the AI. That is the whole technique. Two deploys failed in this build and both were fixed that way, in two rounds. You do not need to understand the error, you need to hand it over intact.

How do I know if my Google Analytics is counting visits twice?

It happens when Analytics is loaded directly in the page and also fired through Google Tag Manager, so every visit registers twice and three visitors look like six. The fix is to run Analytics only inside Tag Manager and remove the direct load. Check this before you start believing any of your traffic numbers.

Is a website built with AI good for SEO?

It can be, but only because it was asked to be. The brief here specified meta tags, semantic HTML, alt text and structured data, and that is why the output has them. Ask for a website and you get one; ask for a website that search engines and AI answer engines can read, and you get that instead.