DEV Community

qing
qing

Posted on

How to Use Cloudflare Workers for Free Hosting

#javascript #cloudflare #hosting #free

How to Use Cloudflare Workers for Free Hosting

tags: javascript, cloudflare, hosting, free

tags: javascript, cloudflare, hosting, free

tags: javascript, cloudflare, hosting, free

How to Use Cloudflare Workers for Free Hosting

Imagine launching a global website with a custom domain, zero monthly hosting fees, and sub-50ms response times—all without managing a single server. That’s not a dream; it’s exactly what Cloudflare Workers (and the newer Pages feature) lets you do today. While many developers still pay $5–$10/month for basic static hosting, Cloudflare offers a generous free tier that includes 100,000 requests per day, automatic HTTPS, and a global edge network. Let’s dive into how you can deploy your site for free in under 15 minutes.

Why Cloudflare Workers (and Pages) Are the Smart Choice

Cloudflare Workers are serverless functions that run on Cloudflare’s edge network. But for static sites—HTML, CSS, JavaScript, images—you don’t actually need to write worker code. Instead, you’ll use Cloudflare Pages, the official free static hosting solution built on Workers. It’s faster, simpler, and fully integrated with the Workers platform.

Key benefits of the free tier:

  • 100,000 requests/day (enough for most small blogs or portfolios)
  • Automatic HTTPS with no certificate setup
  • Global CDN with 50+ edge locations
  • Custom domain support on the free plan
  • Zero cold starts and instant deployments

Step 1: Prepare Your Static Site

Before deploying, gather your files into a single folder. You’ll need at least:

  • index.html (your main page)
  • styles.css (optional styling)
  • script.js (optional JavaScript)
  • Any images or assets (e.g., images/logo.png)

Create a folder like this:

my-site/
├── index.html
├── styles.css
├── script.js
└── images/
    └── logo.png
Enter fullscreen mode Exit fullscreen mode

If you’re using WordPress, you can export your site as a static ZIP using the Simply Static plugin (as shown in [4][7]). This is perfect for non-developers who want to host an existing site for free.

Step 2: Deploy via Cloudflare Pages (Direct Upload)

Cloudflare Pages offers two deployment methods: Direct Upload (no CLI needed) and Git integration (for developers using GitHub/GitLab). For today’s tutorial, we’ll use Direct Upload—the fastest way to get online.

  1. Go to the Cloudflare Dashboard.
  2. Navigate to Workers & Pages → Create application → Pages.
  3. Select Use direct upload [2].
  4. Name your project (this becomes your staging URL: your-project.pages.dev).
  5. Drag your entire my-site/ folder (or a .zip) into the uploader.
  6. Click Deploy.

Within 60 seconds, your site is live at https://your-project.pages.dev with HTTPS enabled by default [2].

Step 3: Add a Custom Domain

Your .pages.dev URL is great for testing, but let’s make it professional.

Option A: You Already Use Cloudflare for DNS

If your domain is already added to Cloudflare:

  1. Go to your Pages project.
  2. Click Custom domains → Add custom domain.
  3. Enter your domain (e.g., example.com) [1].
  4. Wait 2–5 minutes for SSL certificate generation [1].
  5. Once active, click Show domain to verify it’s live [1].

Option B: You Need to Add Your Domain to Cloudflare

If you haven’t added your domain yet:

  1. In Cloudflare Dashboard, click Add site [1].
  2. Enter your domain and choose the Free plan [1].
  3. Cloudflare will provide two name server (NS) addresses (e.g., ns1.cloudflare.com, ns2.cloudflare.com) [1].
  4. Go to your domain registrar (e.g., Namecheap, GoDaddy) and replace your current NS records with Cloudflare’s [1][4].
  5. Return to Cloudflare, click Activate domain, and wait for DNS propagation [4].
  6. Now add the custom domain to your Pages project as in Option A [4].

💡 Tip: Always add both example.com and www.example.com as separate custom domains to avoid redirect issues [4].

Step 4: (Optional) Use Wrangler for Advanced Control

If you’re a developer who wants to write custom routing, add authentication, or serve dynamic content, you can use Wrangler, Cloudflare’s CLI tool. This is where you’d actually write Python or JavaScript code.

Install Wrangler 

npm install -g wrangler
Enter fullscreen mode Exit fullscreen mode

Initialize a Project 

npx wrangler init -y my-worker
Enter fullscreen mode Exit fullscreen mode

Add Static Asset Handler 

npm install --save-dev @cloudflare/kv-asset-handler
Enter fullscreen mode Exit fullscreen mode

Configure wrangler.toml

In your project folder, edit wrangler.toml:

[site]
bucket = "./public"
route = "https://your-domain.com/*"
Enter fullscreen mode Exit fullscreen mode

Place all static files in the public/ folder (including index.html) [3][6].

Deploy 

npx wrangler publish
Enter fullscreen mode Exit fullscreen mode

Your site is now deployed via Workers, not Pages, giving you full control over request handling [3][6].

Python Code Example: Dynamic Header with Worker

While static sites don’t need code, here’s a practical Python example if you want to add dynamic behavior (e.g., greeting users by time of day). Note: Cloudflare Workers primarily use JavaScript/TypeScript, but you can run Python via Workers Py (experimental) or use a Python backend with Workers as a proxy. For simplicity, here’s a JavaScript version that works natively:

// worker.js
export default {
  async fetch(request) {
    const now = new Date();
    const hour = now.getHours();
    let greeting = "Hello!";

    if (hour < 12) greeting = "Good morning!";
    else if (hour < 18) greeting = "Good afternoon!";
    else greeting = "Good evening!";

    return new Response(
      `<h1>${greeting}</h1><p>It's ${now.toLocaleTimeString()}.</p>`,
      { headers: { "content-type": "text/html" } }
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

Deploy this with Wrangler:

npx wrangler dev
npx wrangler deploy
Enter fullscreen mode Exit fullscreen mode

Now your site responds with a time-based greeting instead of static HTML [5].

Troubleshooting Common Issues

  • Domain not resolving? Ensure you updated NS records at your registrar and waited 15–30 minutes [1][4].
  • SSL certificate pending? Wait up to 5 minutes; Cloudflare auto-generates certs [1].
  • 404 error on deployment? Double-check that index.html is in the root of your upload folder or public/ directory [3][6].
  • Request limit exceeded? The free tier allows 100k requests/day. If you exceed it, consider caching more aggressively or upgrading to the Pro plan ($20/month) [2].

Take Action Today

You don’t need to wait for a “perfect” site to go live. Right now:

  1. Zip your static folder.
  2. Upload it to Cloudflare Pages.
  3. Add your custom domain.

In under 15 minutes, you’ll have a professional, fast, and free website hosted on one of the world’s most robust networks.

Ready to try it? Go to Cloudflare’s Dashboard, create your Pages app, and share your new URL with us in the Dev.to comments. If you hit a snag, drop your question below—let’s help each other build faster, cheaper, and better.

If you found this helpful, consider buying me a coffee ☕ — it keeps these articles coming!

Also check out my AI tools collection: AI 次元世界 — free AI tools for developers.

Top comments (0)