Hosting a static website for free in 15 minutes with Cloudflare Workers Sites

I’ve had an old school PHP hosting for ages, and I’m currently moving all the sites I’m hosting there to newer and more effective technologies.

I have a few static sites included in the mix: I’ve been writing pure HTML + CSS for so long that it’s still my favorite solution if I want to spin up a quick landing page for a project.

The best solution for me ended up being Cloudflare’s Worker Sites. The setup is simpler than using a static page generator, and once it’s done a new version can be deployed in an instant with a single command. The server is quick, and it’s free (up to a decent bit of traffic)!

Cloudflare also has a Pages product that takes the static result of a build from a git repository from a site built with tools such as React, but I have not tested it, and my use case is simple enough right now that it’s not worth setting up a git repo for each site.

Site to deploy

I decided to start the move with one of my newest project: http://manibas.com, a site to sell my hand cranked socks. For a quick rundown of the landing page :

• HTML/CSS all the way, except one little bit of JavaScript to display the site in English or French depending on the language of the browser, and for a button to switch manually.
• Pure CSS without a framework or library. I used https://coolors.co to help me pick colors and https://fontjoy.com/ to pick fonts.
• Payment is handled by a Stripe Payment button. I have a US/Canada and an International button since the shipping price is too different. I’ll handle the rest, such as sizing and color by email when I have orders.
• No contact form, people can reach out on Instagram if they have more questions or comments.

Prerequisites

You’ll need the LTS version of NodeJS to install the required tool, a free Cloudflare account and a domain name to point to the site that’s already going through Cloudflare.

You also need an index.html file ready to deploy (ideally with a few other assets like images).

Setting up the project

To deploy the site, you need to install Wrangler, the command line tool to work with Cloudflare Workers. In any folder, run npm install to install the tool globally:

npm install -g wrangler

After having installed Wrangler, initialize the project from the folder you want to use, which will create a package.json and the required boilerplate:

npx wrangler init -y

There is a small bit missing, since you’ll most likely have more than just a index.html file and will need to route to other static assets such as images, fonts or an external CSS file. Install the package that handles routing to static assets inside Cloudflare Workers:

npm install --save-dev @cloudflare/kv-asset-handler

Also, replace the content of the generated src/index.ts with the following code snippet from the Cloudflare documentation to handle the routing (https://developers.cloudflare.com/workers/platform/sites/start-from-existing):

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  try {
    // Add logic to decide whether to serve an asset or run your original Worker code
    return await getAssetFromKV(event);
  } catch (e) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" not found`, {
      status: 404,
      statusText: "not found",
    });
  }
}

Finally, specify the root URL to use and the folder containing the files that needs to be published in the wrangler.toml file that was created by Wrangler.

route = "https://manibas.com/*"[site]bucket = "./public"

Deploying the static page

To deploy, move all the content that needs to be published under the public folder that was specified in the wrangler.toml, including an index.html file as the root file.

Your site is now ready to deploy! Run that last command in the folder of the project, and Wrangler will upload your static files and push it live using domain name your specified.

npx wrangler publish

If it’s your first time running Wrangler to connect to Cloudflare, it will also ask you to authenticate to your account and to enable Workers if they are not active yet, but it will remember your identity for a while. You just need to run that command again if you want to deploy a new version of the site.