World 7: Robots: Actions & CI/CD

Deploy to Pages and Cloudflare

You will learn: how a workflow publishes your site to GitHub Pages or Cloudflare.

The problem

bash

npm run build

npx wrangler deploy

Every new diary entry, you type these on your laptop. Forget once, and readers see old pages. Time to hand the job to a robot.

Watch

Deploying is just more steps, after the tests. Put a deploy workflow in order.

First step at the top. Put these in order. Use the arrows, or drag.

Install and test
Check out the code
Upload it to the host
Build the site
A push lands on main

Try it

GitHub Pages hosts websites straight from your repo. Set its source to GitHub Actions. Then build this workflow: pack the site, then deploy it.

Tap blocks to add them. Put them in order.

Blocks

Your workflow

Tap a block above to start.

Workflow file .github/workflows/

name: Pages

What runs

Nothing to run yet.

Watch

Cloudflare hosts sites too. This course lives there! Its tool, Wrangler, uploads your site. In a workflow, it reads two secrets: CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID. Build the command.

Tap the pieces in the right order.

…

Watch

Cloudflare can also watch your repo by itself. It builds and deploys on every push, with no workflow file. That is called Workers Builds. Who does what? Sort them.

Drag a card into a box. Or tap the card, then tap the box.

Predict

Your deploy job has needs: test. The tests fail. What happens to deploy?

You did it!

You can now deploy a site from a workflow.

Go deeper (optional)

id-token: write lets Pages check the deploy really comes from your workflow. No stored key needed. Pages needs its source set to GitHub Actions in the repo settings. Cloudflare also has its own action, cloudflare/wrangler-action, that runs Wrangler for you.