31st July 2022

Hosting Static Content with Cloudflare

I wrote about hosting static sites on various platforms:

  1. Hosting Static Content with surge.sh
  2. Hosting Static Content with now.sh, now.sh renamed themself to vercel.app
  3. Hosting Static Content with netlify.app

Since end of 2021 Cloudflare greatly enhanced their static site offering: Cloudflare Pages Goes Full Stack.

Start with npm install wrangler. This will install the JavaScript command to control your "Cloudflare Pages" account. The wrangler command has the following options:

$ wrangler help
wrangler

Commands:
  wrangler init [name]       📥 Create a wrangler.toml configuration file
  wrangler dev [script]      👂 Start a local server for developing your worker
  wrangler publish [script]  🆙 Publish your Worker to Cloudflare.
  wrangler tail [name]       🦚 Starts a log tailing session for a published Worker.
  wrangler secret            🤫 Generate a secret that can be referenced in a Worker
  wrangler kv:namespace      🗂  Interact with your Workers KV Namespaces
  wrangler kv:key            🔑 Individually manage Workers KV key-value pairs
  wrangler kv:bulk           💪 Interact with multiple Workers KV key-value pairs at once
  wrangler pages             ⚡ Configure Cloudflare Pages
  wrangler r2                📦 Interact with an R2 store
  wrangler worker-namespace  📦 Interact with a worker namespace
  wrangler pubsub            📮 Interact and manage Pub/Sub Brokers
  wrangler login             🔓 Login to Cloudflare
  wrangler logout            🚪 Logout from Cloudflare
  wrangler whoami            🕵  Retrieve your user info and test your auth config

Flags:
  -c, --config   Path to .toml configuration file  [string]
  -h, --help     Show help  [boolean]
  -v, --version  Show version number  [boolean]

To deploy your current directory to Cloudflare, see Use Direct Upload with continuous integration:

CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages publish <DIRECTORY> --project-name=<PROJECT_NAME>

The so called "project name" is your previously specified name for your pages. In my case it is klm. Therefore I run:

$ time CLOUDFARE_ACCOUNT_ID='Elmar.Klausmeier@gmail.com' wrangler pages publish . --project-name=klm
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/(...)
Successfully logged in.
🌍  Uploading... (1014/1014)

✨ Success! Uploaded 1014 files (88.23 sec)

✨ Deployment complete! Take a peek over at https://3493e64d.klm.pages.dev
        real 118.45s
        user 4.63s
        sys 0
        swapped 0
        total space 0

Deploying more than 1,000 files takes around two minutes. Some time has to substracted from this as I had to log in manually via browser.

If you have already uploaded and just want to change some files, then deployment is much faster.

$ time CLOUDFARE_ACCOUNT_ID='Elmar.Klausmeier@gmail.com' wrangler pages publish . --project-name=klm
🌎  Uploading... (1023/1023)

✨ Success! Uploaded 9 files (1014 already uploaded) (2.92 sec)

✨ Deployment complete! Take a peek over at https://e885abe0.klm.pages.dev
        real 11.29s
        user 1.80s
        sys 0
        swapped 0
        total space 0

My static site on Cloudflare is here: klm.pages.dev.