cloudflare pages

Table of Content

https://pages.cloudflare.com/

[[Cloudflare Pages]]

how to publish a site to cloudflare pages¶

Prepare [[wrangler]] cli and .env file with appropriate variables set.

As for the API token, navigate to API tokens page in one of your site from the dashboard, and create one using the template for cloudflare worker.

creating a new cloudflare pages project¶

First, create a cloudflare pages project.

https://developers.cloudflare.com/workers/wrangler/commands/#project-create

# list current available projects
npx wrangler pages project list 

# create a new one named "beryl"
npx wrangler pages project create beryl --production-branch main

Here is the example output.

❯ npx wrangler pages project list
┌──────────────┬─────────────────┬──────────────┬────────────────┐
│ Project Name │ Project Domains │ Git Provider │ Last Modified  │
├──────────────┼─────────────────┼──────────────┼────────────────┤
│ beryl        │ beryl.pages.dev │ No           │ 49 seconds ago │
└──────────────┴─────────────────┴──────────────┴────────────────┘

publishing¶

# assuming the site contents to upload are all created and ready in ./public 
# and if not, create one
# mkdocs build --site-dir public

# confirm deployment for the project "beryl"
npx wrangler pages deployment list --project-name beryl

# deploy
npx wrangler pages deploy public --project-name beryl --branch main

And here is the output of the deployment list.

❯ npx wrangler pages deployment list --project-name beryl
─────────────────────┬────────┬────────────────────────────────┬──────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
                               ─                                               ───────
 Environment  Branch │ Source │ Deployment                     │ Status       │ Build                                                                                                      │

─────────────────────┼────────┼────────────────────────────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
                               ─                                               ───────
 Production   main   │ f1f06ef│ https://420003ac.beryl.pages.de│ just now     │ https://dash.cloudflare.com/9dac8bc9f89e0d7ecff414410b42685c/pages/view/beryl/420003ac-34c5-47f5-a09e-a5808│
                                                                               e7a4b7

─────────────────────┼────────┼────────────────────────────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
                               ─                                               ───────
 Production   main   │ f1f06ef│ https://74bec35a.beryl.pages.de│ 3 minutes ago│ https://dash.cloudflare.com/9dac8bc9f89e0d7ecff414410b42685c/pages/view/beryl/74bec35a-ce4f-4d0b-b1bb-04581│
                                                                               0ae1cc

─────────────────────┴────────┴────────────────────────────────┴──────────────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
                               ─                                               ───────

setting custom domain name for the deployed site¶

https://developers.cloudflare.com/pages/how-to/custom-branch-aliases/

Navigate to the dashboard > workers & pages > {project_name} > custom domains, and setup a custom domain.