How to Host a Full Website for Free on Cloudflare
Most small businesses pay $20-50/month for website hosting, a form handler, and email services. I recently put together a stack that delivers all of that for free. The only recurring cost is a domain name, which runs about $10-15/year.
This isn’t a compromise. The sites I build with this stack are fast, secure, and run on Cloudflare’s global network across 300+ cities. Here’s how it works.
The Stack
- Astro - A modern framework that generates static HTML at build time. No server to maintain, no database to manage.
- Cloudflare Pages - Free hosting with automatic deployments from GitHub, global CDN, and HTTPS out of the box.
- Cloudflare Pages Functions - Serverless functions for backend logic like contact forms. Runs on Cloudflare’s edge network.
- Cloudflare Email Routing + Email Workers - Free email forwarding and auto-responders for your custom domain.
- Resend - An email API with a generous free tier of 100 emails per day. Handles the actual email delivery from contact forms.
Every one of these services has a free tier that’s more than enough for a typical small business website.
What You Actually Get
A site built on this stack includes:
- A fully responsive, professionally designed website
- A working contact form that sends submissions directly to your inbox
- Custom email addresses on your domain (like [email protected]) that forward to your personal email
- Automated confirmation emails so customers know their message was received
- Anti-spam protection using Cloudflare Turnstile (no annoying CAPTCHAs for your visitors)
- Global CDN with automatic HTTPS, meaning your site loads fast from anywhere
For context, getting all of this through traditional hosting and third-party services would easily run $30-50/month.
How It Works
1. Build with Astro
Astro generates static HTML at build time. The output is a folder of plain HTML, CSS, and JavaScript files ready to deploy. No server runtime, no ongoing maintenance.
npm create astro@latest my-site
cd my-site
npm run build
2. Deploy on Cloudflare Pages
Connect your GitHub repository to Cloudflare Pages. Every push to your main branch triggers an automatic build and deploy.
- Go to the Cloudflare dashboard, then Pages, then Create a project
- Connect your GitHub repo
- Set the build command to
npm run buildand output directory todist - Deploy
Your site is live on a global CDN with HTTPS. No configuration needed.
3. Add a Contact Form with Resend
Resend is an email API that makes it simple to send transactional emails. Their free tier covers 100 emails per day, which is well beyond what most small business contact forms will ever need.
Create a serverless function at functions/api/contact.ts that receives form submissions and sends them to your inbox through Resend:
export const onRequestPost: PagesFunction<{
RESEND_API_KEY: string;
RESEND_FROM_EMAIL: string;
RESEND_TO_EMAIL: string;
}> = async (context) => {
const formData = await context.request.formData();
const name = formData.get('name');
const email = formData.get('email');
const message = formData.get('message');
const response = await fetch('https://api.resend.com/emails', {
method: 'POST',
headers: {
'Authorization': `Bearer ${context.env.RESEND_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
from: context.env.RESEND_FROM_EMAIL,
to: context.env.RESEND_TO_EMAIL,
subject: `New message from ${name}`,
html: `<p>From: ${name} (${email})</p><p>${message}</p>`,
}),
});
return new Response(JSON.stringify({ success: true }), {
headers: { 'Content-Type': 'application/json' },
});
};
This runs on Cloudflare’s edge network. No server to manage, no monthly bill.
4. Set Up Email Forwarding
Cloudflare Email Routing lets you create email addresses on your domain and forward them to your personal email at no cost. You can also set up an Email Worker to send automated confirmation replies to anyone who reaches out.
Why This Matters for Local Businesses
For a local business, a professional website shouldn’t require a monthly hosting bill. The tools available today make it possible to get enterprise-grade infrastructure for free.
I’ve been using this stack for real projects and the results have been excellent. If you’re a local business and this resonates, I’m open to helping a select number of businesses get set up with a site like this. Use the contact form below or reach out on LinkedIn and let’s talk.