Build a Free Website With Astro and Cloudflare Pages (Using Any AI Agent)

Until last year, getting a real website online meant WordPress on shared hosting, a stack of plugins that broke every other update, a page builder that fought you on every layout, and a monthly bill that quietly climbed past $30 before you noticed.

Today you can talk to an AI agent for ten minutes, push a folder to Cloudflare, and have a faster website than 90% of the internet. Total cost: $0. Total stack: two tools.

This guide gives you the exact prompt to paste into ChatGPT, Claude, or Gemini, walks you through the deploy in plain English, and explains why Astro plus Cloudflare Pages is the only stack worth starting on in 2026.

You (the human)
     │
     │  paste 1 prompt
     ▼
[ChatGPT / Claude / Gemini]
     │
     │  scaffolds a project
     ▼
[Astro Project Folder on Your Computer]
     │   ├── /src/pages/      ← your pages, plain Markdown or .astro
     │   ├── /src/layouts/    ← shared header, footer, nav
     │   ├── /src/styles/     ← your CSS
     │   └── /public/          ← images, logos, favicons
     │
     │  npm run dev
     ▼
[Local Preview at http://localhost:4321]
     │
     │  git push to GitHub
     ▼
[Cloudflare Pages picks it up automatically]
     │
     │  builds + deploys in ~30 seconds
     ▼
[Live Website on a Global CDN]
     │
     │  optional: point your domain
     ▼
yourdomain.com  ✓  (free forever)

---

TL;DR

• Astro is a static site framework built for content, blogs, portfolios, and business sites that load instantly
• Cloudflare Pages hosts Astro sites free, on the same network that serves 20% of the internet
• One prompt to any AI agent (ChatGPT, Claude, Gemini, Cursor) and you have a working project in minutes
• Push to GitHub, connect once to Cloudflare, every future change deploys automatically
• Custom domain costs $10 a year at the registrar and connects to Cloudflare in two clicks, no hosting fee ever

Resources

• Astro docs
• Cloudflare Pages
• GitHub (free account)
• Node.js download (only needed once)
• VS Code (free editor)

---

Why Astro and Not WordPress, Webflow, or Framer

Most website tools were built for a different era of the internet. Astro was built for the way content actually moves online today.

Astro ships zero JavaScript by default. Every other framework starts heavy and asks you to optimize it down. Astro starts at zero and only loads code if a page genuinely needs it. That is why Astro sites consistently score 100 on Google Lighthouse without any tuning. Faster pages rank higher, convert more, and cost less to serve.

Astro is built for content sites. Blogs, marketing pages, landing pages, documentation, portfolios. The exact things most people actually need a website for. Markdown files become pages automatically. Layouts are reusable. Components are simple. You don’t need to learn React or Vue to ship a clean site.

Astro plays well with any AI agent. The folder structure is predictable. The syntax is close to HTML. Every AI model has read the Astro docs hundreds of times. That means ChatGPT, Claude, and Gemini all build clean Astro projects without weird hallucinated dependencies. Other frameworks fight the AI. Astro cooperates.

Astro deploys static files. No server to maintain. No database to back up. No PHP version to upgrade at 2 a.m. The output is plain HTML, CSS, and a tiny bit of JavaScript. Any hosting on earth can serve it, but Cloudflare serves it best.

---

Why Cloudflare Pages and Not Vercel, Netlify, or Bluehost

Cloudflare runs the largest CDN on the planet. Roughly 20% of the entire web sits behind it. When you deploy to Cloudflare Pages, your site is copied to 300+ data centers in 100+ countries within seconds.

Here is what that means for you in plain numbers:

• Free tier covers 99% of small business sites. 500 builds a month, unlimited bandwidth, unlimited requests. No surprise overage bills.
• Sub-50ms load times worldwide. A visitor in Tokyo gets the same speed as a visitor in New York. WordPress on shared hosting can’t touch this.
• Free SSL on day one. No setup, no certificates to renew. Your site is HTTPS from the first deploy.
• Free custom domain. Point any domain you own at Cloudflare in two clicks. No “premium plan required” upsell.
• Automatic Git deploys. Push to GitHub, your site rebuilds in 30 seconds. No FTP, no plugin uploads, no broken updates.

Vercel and Netlify are good products built on the same idea, but their free tiers cap bandwidth and their paid tiers get expensive fast. Cloudflare’s free tier is genuinely free and genuinely unlimited for static sites.

---

What You’ll Need

• A computer (Mac, Windows, or Linux)
• A free GitHub account
• A free Cloudflare account
• Any AI chat tool you already use (ChatGPT, Claude, Gemini, Cursor, Perplexity)
• 30 minutes from start to live website
• $0 in hosting costs
• No coding background

---

The One Prompt (Paste Into Any AI Agent)

This is the entire kickoff. Copy the block below, paste it into ChatGPT, Claude, Gemini, or any AI chat tool, and follow what it gives you back. The prompt includes the full tech architecture so the agent has everything it needs to build cleanly the first time.

I want to build my first website using Astro and deploy it free
on Cloudflare Pages. I have never coded before. Walk me through
the entire process in plain English, one step at a time, waiting
for me to confirm before moving to the next step.

Here is the tech architecture I want you to use:

- Framework: Astro (latest version, static output)
- Styling: plain CSS in a styles folder (no Tailwind, no UI libraries)
- Content: Markdown files in src/pages for blog posts
- Layouts: shared BaseLayout.astro for header, footer, nav
- Hosting: Cloudflare Pages, deployed via GitHub push
- Source control: GitHub (public or private repo, free tier)
- Local preview: npm run dev on http://localhost:4321
- Custom domain: optional, connected in Cloudflare dashboard

Pages I want on the first version:
1. Home page (hero, what I do, three sections, contact CTA)
2. About page (short bio, photo placeholder, what I'm working on)
3. Contact page (email link, social links)
4. Blog index + one sample blog post in Markdown

Style direction: clean, modern, fast-loading, mobile-first,
no animations, system fonts only.

Please do the following in order:
1. Check that Node.js is installed on my machine. If not, tell me
   exactly where to download it and how to install it on my OS.
2. Run the Astro create command and walk me through every prompt
   it asks (template, TypeScript, install dependencies, git init).
3. Show me the folder structure once it's created and explain what
   each folder is for in one sentence each.
4. Build the home, about, contact, and blog pages with placeholder
   content I can replace. Use the BaseLayout for shared navigation.
5. Run the local preview and tell me what URL to open in my browser.
6. Create a GitHub repo for the project and walk me through pushing
   the code to it.
7. Walk me through connecting the repo to Cloudflare Pages, including
   exactly where to click and what build settings to enter.
8. Confirm the site is live, give me the Cloudflare URL, and explain
   how to point a custom domain at it later.

Rules:
- Explain every command before I run it. I want to understand what
  is happening, not just copy-paste blindly.
- If something is going to take longer than 30 seconds (install,
  build, deploy), warn me first.
- If I get an error, ask me to paste the exact error message back
  to you so you can debug it with me.
- Do not assume I know any developer slang. Define it the first
  time you use it.

Start with step 1.

That is the whole prompt. The agent on the other end now has the architecture, the page list, the rules of engagement, and the order of operations. It will guide you through the rest.

---

Before You Read the Next Section: You Don’t Actually Do Any of This

Read this part carefully. It’s the thing that flips the switch in most beginners’ heads.

The steps below look like a checklist of developer work. Installing Node, running commands, pushing to GitHub, clicking through Cloudflare settings. If you’re picturing yourself typing all that, stop.

You don’t type any of it. The agent does.

If you’re using Claude Code, Cursor, or any AI agent with terminal access, the workflow is literally this:

1. You read the step
2. You say “you do it for me, ping me when you want me to review”
3. The agent runs the command, installs the thing, edits the file, pushes the code
4. You glance at the result, say “looks good, next” or “change X”
5. Repeat

That’s the whole job. The “step” is the agent’s job. Your job is to know what you want and to approve the result.

The gotcha to remember: never run a command yourself unless the agent literally cannot. When it says “now run npm install” you reply “no, you run it.” When it says “go to this page and click this button” you reply “is there a CLI way you can do it without me?” Nine times out of ten there is. The agent will use the GitHub CLI, the Cloudflare API, npm, git, and a dozen other tools you’ve never heard of, and just hand you the result.

The only steps you actually have to do with your own hands are the ones inside someone else’s browser tab. Creating a Cloudflare account. Pointing a domain. Approving an OAuth login. Everything else is the agent’s job.

Even on plain ChatGPT or Gemini without terminal access, the agent gives you the exact one-line command to paste. You copy it, paste it into your terminal, hit enter, and tell the agent what came back. You’re not coding. You’re describing what you want and pasting one line at a time.

Personally, I never run a single command myself. I open Claude Code, give it the prompt above, and every time it says “I need to install Node” or “I need to push to GitHub,” I reply “you do it, ping me when you’re ready for me to look.” It runs the command, handles the install, deals with the error if there is one, and pings me when the next thing needs my eyes.

The steps below describe what happens. Not what you do. Read them so you know what’s going on under the hood, then go back to your agent and tell it to handle the next step.

---

What Actually Happens After You Paste That Prompt

Here’s the flow. Every step starts with “the agent will say X” and ends with “you say: you do it for me, ping me when you want me to review.” That’s the entire pattern. Memorize it once, repeat it eight times, you’re live.

Step 1: Node.js check. Agent says: “Open a terminal and run node --version to check if Node is installed.” You say: “You do it. If it’s not installed, install it yourself and tell me when it’s done.” The agent runs the check, downloads the installer if needed, walks the install through, pings you when Node is ready.

Step 2: Create the Astro project. Agent says: “I need to run npm create astro@latest and answer a few setup prompts.” You say: “Go ahead. Pick the minimal template, yes to TypeScript, yes to install dependencies, yes to git. Tell me when it’s done.” The agent scaffolds the whole project, installs every package, initializes git, and pings you when the folder is ready.

Step 3: Folder tour. Agent says: “Your project has these folders: src/pages, src/layouts, src/components, public, and astro.config.mjs.” You glance, you say “okay, next.” You don’t need to memorize anything. The agent knows where everything goes.

Step 4: Pages built. Agent says: “I’ll build the home, about, contact, and blog pages with placeholder content.” You say: “Yes. Show me when they’re done.” Agent writes every file. You open the preview, scan it, tell it what to change. Repeat until you like it.

Step 5: Local preview. Agent says: “I’ll run npm run dev to start the local server.” You say: “Run it and give me the URL.” You get back http://localhost:4321. You click it. Your site opens in your browser. Nothing is live online yet, this is only on your computer.

Step 6: Push to GitHub. Agent says: “Create a GitHub account if you don’t have one, then I’ll create a repo and push your code.” You say: “I have an account. You create the repo and push it. Use the GitHub CLI if you don’t have my credentials already.” Agent runs gh repo create, runs git add, git commit, git push. Done in 20 seconds.

Step 7: Connect to Cloudflare Pages. Agent says: “Sign in at pages.cloudflare.com, click Connect to Git, pick your new repo. Cloudflare will auto-detect the Astro build settings.” You say: “Walk me through it. Tell me exactly what to click.” The agent gives you the click-by-click. You do the four clicks. Cloudflare builds for 30 seconds.

Step 8: Live website. Agent says: “Your site is live at your-project.pages.dev.” You say: “Done. Now let’s change the homepage hero.” And the loop restarts. Every future change is one prompt, the agent edits, the agent pushes, Cloudflare redeploys in 30 seconds.

---

Side Note for Claude Code Users: Install Your Brand Skills First

This part is for anyone using Claude Code specifically. Read this before you run the kickoff prompt.

Claude Code has a system called Skills. A Skill is a small file that teaches Claude how to think like a specific expert: a brand designer, a UI auditor, a frontend developer, a copywriter. You install them once into your workspace and Claude uses them automatically every time it builds.

If you install three or four good design skills before you kick off the website build, the output is on a different planet. The difference between a default Astro site and a site built with the brand + frontend design skills loaded is the difference between a free template and something a designer charged $5,000 for.

The minimum stack to load before building anything visual:

1. A brand guideline skill that captures your colors, fonts, voice, logo rules
2. A frontend design skill that knows real spacing, hierarchy, and component patterns
3. A UI/UX audit skill that critiques the build before you ship it

In Claude Code, you install a skill by pasting a one-line prompt that points to a Markdown file on GitHub. The agent fetches the file, saves it as a skill, and now every future build uses it. We walk through the exact skill set and how to install them in the Your 1st Claude Code Project guide.

If you’re on ChatGPT or Gemini, this doesn’t apply directly, but the principle does: give the agent your brand rules and design references up front, in the kickoff prompt, not after it’s already built something ugly.

---

How to Update Your Site After It’s Live

This is the part nobody explains and it’s the part that hooks people.

Once your site is wired up, every change goes live by saving a file and pushing it. That’s it.

1. Open the project folder in VS Code (or any text editor)
2. Edit a Markdown file or an .astro page
3. Save the file
4. In the terminal: git add . && git commit -m "update homepage" && git push
5. Cloudflare rebuilds in 30 seconds. Your change is live worldwide.

Or open your AI agent again and say “update the home page hero to say X.” The agent edits the file, you push, you’re live. No CMS, no plugin updates, no caching plugin to flush.

---

Connecting a Custom Domain (Optional, $10/Year)

If you want your site at yourdomain.com instead of your-project.pages.dev:

1. Buy a domain at any registrar (Namecheap, Porkbun, Cloudflare Registrar)
2. In the Cloudflare Pages dashboard, click your project, then “Custom domains”
3. Click “Set up a custom domain,” type your domain, click continue
4. Cloudflare adds the DNS records automatically if you bought from them, or gives you records to paste at your registrar
5. SSL is provisioned automatically within a few minutes

Total cost: about $10 a year for the domain. No hosting fee. Ever.

---

What’s Possible Once You’re Set Up

You now have the foundation that most internet businesses are built on. A static site, automatic deploys, global CDN, and an AI agent in the loop for every change.

This is what makes the difference for small operators:

• Add a new blog post in 3 minutes from your phone using GitHub mobile
• Spin up a landing page for a new offer in an afternoon
• A/B test pages by pushing branches and previewing them on Cloudflare
• Build niche micro-sites in a weekend that would have taken a freelancer a month
• Run a full content business on $10 a year in domain costs

The old model was: hire a developer, pay for hosting, fight a CMS, pay a maintenance retainer. The new model is: write a prompt, push to Git, ship.

The whole point is to stop paying for, and stop maintaining, the layers between you and the work.

---

What to Do Next

You’ve got the architecture, the prompt, and the deploy flow. Here’s how to take it further depending on where you’re at:

If you want to see this built live and ask questions in real time: Join the free webinar where we build projects like this from scratch and answer questions on the spot. Reserve your seat here

If you want to go deeper and build something specific for your business: The hands-on workshop covers multi-page sites, content workflows, AI-driven editing pipelines, and custom domains end-to-end. Join the next workshop here

If you want me to architect or build it directly with you: Send me a message and we’ll figure out the right way to work together. Get in touch here