How to Host Any Website for Free
Design a site with AI, push it to GitHub, and connect it to Cloudflare Pages — and it is live worldwide for ₹0, with free SSL and unlimited bandwidth. Here is the exact three-step workflow, plus the one big catch you need to know.
The Systems Summary
You can put a real website online for free in three steps: (1) design it with AI, (2) push the project to GitHub, and (3) connect that repo to Cloudflare Pages, which hosts it for ₹0 with free SSL, a custom domain, and unlimited bandwidth. The one catch to be crystal clear about: this works for static, frontend websites — AI-designed sites, portfolios, landing pages, and framework apps like React, Vue, or Astro. It does not host a dynamic WordPress (PHP + database) site as-is. Know that, and free hosting is genuinely this easy.
The Free-Hosting Workflow, Mapped Out
Three steps, one direction: AI builds the site, GitHub stores it, and Cloudflare serves it to the world. Click each step to see exactly what you do, the tools involved, and a concrete example:
Host a Website Free in 3 Steps
AI → Git → CloudflareDesign With AI
What You Do
Describe the site you want and let AI build it for you. Claude can generate a full HTML/CSS/JS site, and AI site builders like v0, Lovable, or Bolt produce ready-to-ship React or Astro projects. The one rule: the output must be a static, frontend site — pages made of HTML, CSS, and JavaScript.
Tools
Example
Ask Claude for a "one-page portfolio with a hero, about, and contact section", copy the generated files into a folder, and you already have a deployable website — no designer, no code from scratch.
Step 1: Get Your Website Designed Using AI
You no longer need to hire a designer or write code from scratch. Describe the website you want and let AI build it. Claude can generate a complete HTML, CSS, and JavaScript site from a prompt, and AI site builders like v0, Lovable, or Bolt spin up ready-to-ship React or Astro projects.
The only thing that matters for free hosting is the output: you want a static, frontend site — a set of files (HTML, CSS, JS) or a framework project that builds down to those files. That is exactly what AI tools produce by default, so you are already in the right place.
Pro-Tip
Ask the AI for a specific, single-purpose page ("a one-page portfolio with hero, about, services, and contact"). Tighter prompts give cleaner, lighter sites that deploy without fuss.
Step 2: Push the Project to Git
Next, put your website's files into a Git repository and push it to GitHub. If you are not a Git expert, this is another place Claude can walk you through the exact commands. At a high level: initialise a repo, commit your files, create a GitHub repository, and push.
Why bother with Git instead of just uploading files? Because your GitHub repo becomes the single source of truth that Cloudflare deploys from. Once it is connected, every change you push to GitHub automatically redeploys your live site — no re-uploading, ever.
Pro-Tip
Add a .gitignore before your first commit so build folders and dependencies (like node_modules) never get pushed. Claude will generate the right .gitignore for your framework if you ask.
Step 3: Link Git With Cloudflare and Host It Free
Finally, in Cloudflare Pages, connect your GitHub account, pick the repo, and configure the build: choose your framework preset (or "none" for plain HTML), set the build command and output directory, and click deploy. In about a minute your site is live on a free .pages.dev URL.
On the free plan you get unlimited sites, unlimited requests, unlimited bandwidth, and free SSL — plus you can point your own custom domain at it for free. From then on, every push to GitHub triggers an automatic redeploy. That is the whole system: write once, push, and Cloudflare keeps it live worldwide at no cost.
Pro-Tip
For a plain HTML site, leave the build command empty and set the output directory to the folder with your index.html (often the repo root or "/"). For a framework, it is usually "npm run build" with an output like "dist" or "build".
Important: What You Can (and Cannot) Host for Free
This is the part most "free hosting" guides skip. Cloudflare Pages hosts static, frontend websites — not dynamic server apps. A static site serves pre-built HTML, CSS, and JavaScript files that look the same for every visitor. A dynamic WordPress site, by contrast, needs PHP and a live database running on the server, which Cloudflare Pages does not provide. You can still host WordPress here, but only after converting it to a static export first — and if you truly need live PHP and a database, this is not the tool; a traditional web host is. Here is the honest breakdown:
| Hosts great on Cloudflare Pages (free) | Does NOT work as-is |
|---|---|
| AI-designed sites and plain HTML / CSS / JS sites | Dynamic WordPress (PHP + MySQL running live on the host) |
| Framework sites: React, Vue, Astro, Hugo, Gatsby, Next (static export) | Any app that needs server-side PHP or a database on the same host |
| Portfolios, landing pages, docs, and marketing sites | Huge media libraries pushed into the repo (25 MiB per-file and 20,000-file limits) |
Good Practices for Git and Cloudflare
A few habits keep your free site fast, within limits, and easy to maintain:
- Keep the repo clean: add a .gitignore so dependencies and build output (node_modules, dist) are never committed. Your repo should hold source files, not generated ones.
- Don't push heavy assets: Cloudflare caps individual files at 25 MiB and a site at 20,000 files. Compress and resize images before committing, and keep large files out of Git.
- Offload big media: host videos on YouTube or Cloudflare R2 and embed them, rather than committing large video files into the repo. Your pages stay light and load fast.
- Set the right build settings: match the build command and output directory to your framework, so Cloudflare produces the correct static files every deploy.
- Never commit secrets: keep API keys and tokens in Cloudflare environment variables, not in your code or Git history.
- Commit small and often: every push auto-deploys, so small changes are easy to preview and roll back if something looks off.
- Add your custom domain: point your own domain at the project and enable the free SSL certificate for a professional, secure URL.
Frequently Asked Questions
Official Documentation & Sources
