World map

 

BM

World C1: Pipeline Thinking

Stations on the belt

You will learn: the six stations of a pipeline, and why their order matters.

Checked with GitHub Actions 2026-10 on 31 Oct 2026

The problem

Pick an event. Press Run and watch the line.

What happened on GitHub

Workflow file .github/workflows/oops.yml

name: Oops
on:
push:
branches: [main]
permissions:
contents: read
jobs:
line:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- run: npm ci
- run: npm run build
- run: npm run deploy
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
- run: npm test

The line

Push to main · main

This line ships first and tastes last. Press Run. The test fails, but the bug is already live. Ouch!

Watch

Tap each point on the timeline.

Tap each station. Each one is a stage: One station on the belt, like lint, test, build, scan, publish or deploy.. Cheap checks come first. The van leaves last.

Try it

Put the stations in order. The first station goes at the top.

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

  • Build
  • Lint
  • Scan
  • Test
  • Deploy
  • Publish

Watch

Pick an event. Press Run and watch the line.

What happened on GitHub

Workflow file .github/workflows/shop.yml

name: Shop line
on:
push:
branches: [main]
permissions:
contents: read
packages: write
jobs:
line:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- run: npm ci
- run: npm run lint
- run: npm test
- run: docker build -t shop:${{ github.sha }} .
- name: Scan the image
uses: aquasecurity/trivy-action@v0.36.0
with:
image-ref: shop:${{ github.sha }}
severity: CRITICAL
exit-code: '1'
- name: Publish to GHCR
run: |
echo "$TOKEN" | docker login ghcr.io -u "$GITHUB_ACTOR" --password-stdin
docker tag shop:${{ github.sha }} ghcr.io/kancil/shop:${{ github.sha }}
docker push ghcr.io/kancil/shop:${{ github.sha }}
env:
TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: npm run deploy
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

The line

Push to main · main

Here is the whole line in one job. Press Run and watch every station turn green. Tap any station to read its log.

Try it

Your turn. Build a line that stops after build.

Tap blocks to add them. Put them in order.

Blocks

Your workflow

Tap a block above to start.

Workflow file .github/workflows/

name: CI

What runs

Nothing to run yet.

Predict

This time, the image has a bad ingredient.

Which station will stop the line? Tap it, then press Run.

What happened on GitHub

Workflow file .github/workflows/shop.yml

name: Shop line
on:
push:
branches: [main]
permissions:
contents: read
packages: write
jobs:
line:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- run: npm ci
- run: npm run lint
- run: npm test
- run: docker build -t shop:${{ github.sha }} .
- name: Scan the image
uses: aquasecurity/trivy-action@v0.36.0
with:
image-ref: shop:${{ github.sha }}
severity: CRITICAL
exit-code: '1'
- name: Publish to GHCR
run: |
echo "$TOKEN" | docker login ghcr.io -u "$GITHUB_ACTOR" --password-stdin
docker tag shop:${{ github.sha }} ghcr.io/kancil/shop:${{ github.sha }}
docker push ghcr.io/kancil/shop:${{ github.sha }}
env:
TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: npm run deploy
env:
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

The line

Push to main · main

Check

Good line, or needs work? Swipe each one.

Swipe right for good, left for needs work. Or use the buttons.

1 / 4

Lint before the tests

You did it!

You can now name the six stations and put them in order.

Go deeper (optional)

Not every project needs every station. A small static site has no image to scan or publish. Stations can also run side by side. Jobs without needs: start at the same time. Jobs with needs: wait for the jobs they name.

Real rep (optional): open your own workflow file. Write the station name next to each step as a comment.