How to Create an Astro Website and Host It on Cloudflare for Free
Step-by-step tutorial to build an Astro site and deploy it to Cloudflare Pages for free. Get Lighthouse 100, free SSL, and a global CDN in 20 minutes.
Todd Hebebrand
Author
You can have a professional website that loads in under a second, scores 100 on Lighthouse, and costs you exactly nothing to host. No catch, no trial that expires, no hidden bandwidth fees.
This tutorial walks you through the entire process: creating an Astro website from scratch and deploying it to Cloudflare Pages. You’ll be done in about 20 minutes. Everything you need is free.
Why Astro + Cloudflare Pages?
Most website frameworks ship a mountain of JavaScript to every visitor’s browser. That JavaScript has to download, parse, and execute before anyone sees your content. It’s why so many sites feel sluggish even on fast connections.
Astro takes a fundamentally different approach. It ships zero JavaScript by default. Your pages are pre-built as plain HTML during the build step, so browsers render them instantly. No waiting for frameworks to boot up, no spinners, no layout shifts. For a deeper look at why this matters, read Why Astro is the best framework for small business websites in 2026.
Then there’s Cloudflare Pages. Its free tier is the most generous in the industry: 100,000 requests per day, unlimited bandwidth, free SSL, a global CDN spanning 300+ cities, and zero cold starts. No credit card required.
Together, Astro and Cloudflare give you performance that used to cost $50-100/month in hosting fees. You get it for free.
What You’ll Need
Before you start, make sure you have these five things. All of them are free:
- Node.js 18 or later — download it from nodejs.org. Pick the LTS version.
- A GitHub account — sign up at github.com if you don’t have one.
- A Cloudflare account — sign up at cloudflare.com. The free plan is all you need.
- A terminal app — Terminal on Mac, Command Prompt or PowerShell on Windows, or any terminal you prefer.
- About 20 minutes — that’s genuinely all it takes.
Total cost: $0.
Step 1: Create Your Astro Project
Open your terminal and run this command:
npm create astro@latest my-business-siteThe Astro CLI will walk you through a few prompts. Here’s what to pick:
- How would you like to start your new project? Choose the blog starter template. It gives you a solid foundation with pages already set up.
- Do you plan to write TypeScript? Either option works. If you’re not sure, pick “No” to keep things simple.
- Install dependencies? Yes.
- Initialize a new git repository? Yes.
Once it finishes, move into your new project folder and start the development server:
cd my-business-site
npm run devOpen your browser and go to http://localhost:4321. You should see a starter website with a homepage and some example content. This is your site. Everything you see can be customized, and it’s already structured for good performance and SEO.
Leave this terminal window running while you work. The dev server watches for changes and refreshes your browser automatically whenever you edit a file.
Step 2: Build Your Pages
Your project has a clean folder structure. The important part is the src/pages/ directory. Every file in there becomes a page on your website:
src/pages/index.astrois your homepagesrc/pages/about.astrowould becomeyoursite.com/aboutsrc/pages/contact.astrowould becomeyoursite.com/contact
Open src/pages/index.astro in any text editor. Here’s what a minimal Astro page looks like:
---
// This is the frontmatter — it runs at build time, not in the browser
const businessName = "Your Business Name";
---
<html>
<head><title>{businessName}</title></head>
<body>
<h1>Welcome to {businessName}</h1>
<p>We're a local business serving our community.</p>
</body>
</html>The key thing to understand: the code between the --- fences runs once when your site is built. It doesn’t run in the browser. That’s the whole reason Astro sites are so fast — visitors get pure HTML with no framework overhead. This is the same principle behind why static sites outperform dynamic ones by such a wide margin.
Replace the placeholder content with your actual business information. Create a few pages for your site: a homepage, an about page, and a contact page. You can copy the structure above and adjust the HTML for each one. Add your real business name, a description of what you do, your location, and your contact details.
When you save changes, the dev server updates your browser automatically. What you see at localhost:4321 is exactly what your visitors will see once you deploy.
Step 3: Push to GitHub
Your project already has Git initialized (the Astro CLI did that for you). Now you need to save your work and push it to GitHub so Cloudflare can access it.
First, commit your changes in the terminal:
git add .
git commit -m "my business website"Next, create a new repository on GitHub:
- Go to github.com and sign in
- Click the green New button (or the + icon in the top right, then New repository)
- Name it
my-business-site - Leave it set to Public (Cloudflare needs to read it)
- Do not check “Add a README” — your project already has files
- Click Create repository
GitHub will show you a page with setup instructions. Run these commands in your terminal:
git remote add origin https://github.com/YOUR-USERNAME/my-business-site.git
git branch -M main
git push -u origin mainReplace YOUR-USERNAME with your actual GitHub username. Refresh the GitHub page and you should see all your project files.
If this feels like a lot of steps just to store your files, you’re not wrong. Pressless handles all of this automatically — same Astro stack, same Cloudflare hosting, no terminal needed.
Step 4: Connect Cloudflare Pages
Now for the good part. You’re going to connect your GitHub repository to Cloudflare Pages so it builds and deploys your site automatically.
1. Log into Cloudflare. Go to dash.cloudflare.com and sign in to your account.
2. Navigate to Pages. In the left sidebar, click Workers & Pages.
3. Create a new project. Click the Create button, then select Pages, then click Connect to Git.
4. Authorize GitHub. If this is your first time, Cloudflare will ask you to connect your GitHub account. Click through the authorization prompts and give it access to the repository you just created.
5. Select your repository. Find my-business-site in the list and click it.
6. Configure the build settings. This is where you tell Cloudflare how to build your Astro site:
- Framework preset: Select Astro from the dropdown
- Build command:
npm run build - Build output directory:
dist
These should auto-fill when you select the Astro preset, but double-check them.
7. Click Save and Deploy.
Cloudflare will pull your code from GitHub, install dependencies, run the build, and deploy the result to its global CDN. The first deploy takes about 1-2 minutes.
When it finishes, you’ll see a URL like my-business-site.pages.dev. Click it. Your site is live, served from 300+ locations worldwide, with SSL already active. That’s it.
From now on, every time you push changes to GitHub, Cloudflare automatically rebuilds and redeploys your site. No manual steps required.
Step 5: Add a Custom Domain (Optional)
The .pages.dev URL works fine, but you probably want your own domain name. Here’s how to connect it.
If your domain is already on Cloudflare (which is the easiest path — transferring your domain to Cloudflare is free):
- In the Cloudflare dashboard, go to your Pages project
- Click the Custom domains tab
- Click Set up a custom domain
- Type in your domain (e.g.,
yourbusiness.com) - Cloudflare configures DNS records automatically
- SSL is provisioned within minutes
If your domain is registered elsewhere, you have two options. You can transfer it to Cloudflare (recommended — no transfer fee), or you can add a CNAME record at your current registrar pointing to my-business-site.pages.dev. The CNAME approach works but means you’re managing DNS in two places.
Once the domain is connected, your site is accessible at your custom URL with full SSL encryption. No certificate management, no renewals, no configuration. Visitors will never see a security warning, and Google gives a small ranking boost to HTTPS sites.
What You Get for $0
Let’s take stock of what you just built — and what it costs:
- Lighthouse performance score: 95-100 out of 100 (a typical WordPress site scores 40-70)
- Global load time: Under 1 second from virtually anywhere in the world
- SSL certificate: Free, automatic, always on, auto-renewing
- CDN: Your site is cached across 300+ cities on every continent
- Bandwidth: Unlimited. No overage charges, no throttling
- Daily requests: 100,000 included on the free plan (more than enough for any small business)
- Automatic deployments: Push to GitHub and your site updates within minutes
- Monthly cost: $0
For comparison, shared hosting typically runs $10-30/month and delivers worse performance on every metric above. Managed WordPress hosting costs $30-50/month. You’re getting better results for free.
For a full breakdown of free hosting options and how they compare, check out How to host a website for free in 2026.
Want This Done in 2 Minutes Instead of 20?
Let’s be honest about what you just did. You installed Node.js, ran terminal commands, learned the basics of Git, navigated two different dashboards, and configured build settings. It took about 20 minutes if everything went smoothly, probably longer if you hit a snag.
And you still need to write all your content and design your pages. The starter template gives you a structure, but your homepage still says placeholder text. Your about page doesn’t exist yet. You have no contact form, no SEO metadata, no business-specific design. That’s hours more work before you have something you’d actually show to a customer. Browse our starter templates to see how far a pre-built design can take you, or check our pricing plans to see if the automated route fits your budget.
Pressless does the exact same thing under the hood — it builds an Astro site and deploys it to Cloudflare Pages — but instead of writing code, you describe your business in a few sentences. The AI writes your content, designs a layout that fits your industry, sets up your SEO metadata, and deploys the finished site. Same stack, same performance, same $0 hosting. Just faster.
The manual approach you learned today gives you maximum control. Pressless gives you maximum speed. Both produce the same end result: a high-performance Astro site on Cloudflare’s global network.
For a side-by-side comparison of building manually, using a page builder, and using AI, read The Fastest Way to Build and Publish a Website in 2026. It covers the tradeoffs honestly so you can pick the approach that fits your situation.
Ready to skip the terminal? Describe your business and get a live website in minutes — free to start, no credit card required.
Keep Reading
