Hosting Static Content with Cloudflare
I wrote about hosting static sites on various platforms:
- Hosting Static Content with surge.sh
- Hosting Static Content with now.sh, now.sh renamed themself to vercel.app
- 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.