Original post is here: eklausmeier.goip.de
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:
1$ wrangler
2
3Commands:
4 wrangler docs [command..] 📚 Open wrangler's docs in your browser
5 wrangler init [name] 📥 Initialize a basic Worker project, including a wrangler.toml file
6 wrangler generate [name] [template] ✨ Generate a new Worker project from an existing Worker template. See https://github.com/cloudflare/templates
7 wrangler dev [script] 👂 Start a local server for developing your worker
8 wrangler deploy [script] 🆙 Deploy your Worker to Cloudflare. [aliases: publish]
9 wrangler delete [script] 🗑 Delete your Worker from Cloudflare.
10 wrangler tail [worker] 🦚 Starts a log tailing session for a published Worker.
11 wrangler secret 🤫 Generate a secret that can be referenced in a Worker
12 wrangler secret:bulk [json] 🗄 Bulk upload secrets for a Worker
13 wrangler kv:namespace 🗂 Interact with your Workers KV Namespaces
14 wrangler kv:key 🔑 Individually manage Workers KV key-value pairs
15 wrangler kv:bulk 💪 Interact with multiple Workers KV key-value pairs at once
16 wrangler pages ⚡ Configure Cloudflare Pages
17 wrangler queues 🇶 Configure Workers Queues
18 wrangler r2 📦 Interact with an R2 store
19 wrangler dispatch-namespace 📦 Interact with a dispatch namespace
20 wrangler d1 🗄 Interact with a D1 database
21 wrangler constellation 🤖 Interact with Constellation models
22 wrangler pubsub 📮 Interact and manage Pub/Sub Brokers
23 wrangler mtls-certificate 🪪 Manage certificates used for mTLS connections
24 wrangler login 🔓 Login to Cloudflare
25 wrangler logout 🚪 Logout from Cloudflare
26 wrangler whoami 🕵 Retrieve your user info and test your auth config
27 wrangler types 📝 Generate types from bindings & module rules in config
28 wrangler deployments 🚢 List and view details for deployments
29 wrangler rollback [deployment-id] 🔙 Rollback a deployment
30
31Flags:
32 -j, --experimental-json-config Experimental: Support wrangler.json [boolean]
33 -c, --config Path to .toml configuration file [string]
34 -e, --env Environment to use for operations and .env files [string]
35 -h, --help Show help [boolean]
36 -v, --version Show version number [boolean]
And specifically for the pages subcommand:
1$ wrangler pages
2
3⚡ Configure Cloudflare Pages
4
5Commands:
6 wrangler pages dev [directory] [-- command..] 🧑💻 Develop your full-stack Pages application locally
7 wrangler pages project ⚡ Interact with your Pages projects
8 wrangler pages deployment 🚀 Interact with the deployments of a project
9 wrangler pages deploy [directory] 🆙 Deploy a directory of static assets as a Pages deployment [aliases: publish]
10
11Flags:
12 -j, --experimental-json-config Experimental: Support wrangler.json [boolean]
13 -c, --config Path to .toml configuration file [string]
14 -e, --env Environment to use for operations and .env files [string]
15 -h, --help Show help [boolean]
16 -v, --version Show version number [boolean]
To deploy your current directory to Cloudflare, see Use Direct Upload with continuous integration:
1CLOUDFLARE_ACCOUNT_ID=<ACCOUNT_ID> npx wrangler pages publish <DIRECTORY> --project-name=<PROJECT_NAME>
Your account id is this 32 byte long hash, not your e-mail address.
The so called "project name" is your previously specified name for your pages. In my case it is klm. Therefore I run:
1$ time CLOUDFLARE_ACCOUNT_ID='d4ba2e3c15c942c374380afd7fb7f441' wrangler pages deploy --project-name=klm .
2Attempting to login via OAuth...
3Opening a link in your default browser: https://dash.cloudflare.com/oauth2/(...)
4Successfully logged in.
5🌍 Uploading... (1014/1014)
6
7✨ Success! Uploaded 1014 files (88.23 sec)
8
9✨ Deployment complete! Take a peek over at https://3493e64d.klm.pages.dev
10 real 118.45s
11 user 4.63s
12 sys 0
13 swapped 0
14 total space 0
Deploying more than 1,000 files takes around two minutes. Some time has to be 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.
1$ time CLOUDFLARE_ACCOUNT_ID='2a73fd651205801dfe83244b968920bb' wrangler pages deploy . --project-name=klm
2🌎 Uploading... (1023/1023)
3
4✨ Success! Uploaded 9 files (1014 already uploaded) (2.92 sec)
5
6✨ Deployment complete! Take a peek over at https://e885abe0.klm.pages.dev
7 real 11.29s
8 user 1.80s
9 sys 0
10 swapped 0
11 total space 0
My static site on Cloudflare is here: klm.pages.dev.
Added 23-May-2023: Instead of setting CLOUDFLARE_ACCOUNT environment variable in front of wrangler, you have to first login via
1wrangler login
Then
1npx wrangler pages deploy <DIRECTORY> --project-name=<PROJECT_NAME>
In my case this is
1$ time wrangler pages deploy . --project-name=klm
Added 29-Aug-2023: wrangler script seems to be broken. It emits below error message:
1✘ [ERROR] A request to the Cloudflare API (/accounts/Elmar.Klausmeier@gmail.com/pages/projects/klm) failed.
2
3 Could not route to /client/v4/accounts/Elmar.Klausmeier@gmail.com/pages/projects/klm, perhaps your
4 object identifier is invalid? [code: 7003]
5
6 If you think this is a bug, please open an issue at:
7 https://github.com/cloudflare/workers-sdk/issues/new/choose
Remedy: Go to your dashboard in Cloudflare, remove the "project", then upload zip-file with all your files.
Added 24-Sep-2023: Previously you had to use your e-mail address, i.e., your accound id. Now you have to use your Account ID, which is this 32 byte long hash. If you still use your e-mail address, you will get below error:
1✘ [ERROR] A request to the Cloudflare API (/accounts/Elmar.Klausmeier@gmail.com/pages/projects) failed.
See BUG: #3862.
Added 02-Jul-2024: Latest twist:
time wrangler pages deploy --project-name klm .