Automation in Action: CI/CD for Creatives

What You’ll Learn

• The CI/CD mindset — ship in small, safe batches
• Tooling choices (GitHub Actions, GitLab CI, or CircleCI)
• Automated checks: lint, test, build, preview
• One-click deploys to Cloudflare, Netlify, or AWS
• How to integrate the pipeline with design/dev workflows (BIM renders, docs, static sites)

Why This Matters

As a creative professional, your time should go to design and strategy, not manual zipping, uploading, and waiting. CI/CD turns your process into a repeatable system—so every push can test, build, and deploy your work automatically.

The CI/CD Flow (at a glance)

1. Commit & Push
   • Use feature branches (feature/*) and pull requests.
2. Continuous Integration
   • Run lint/tests/builds on every push.
3. Preview
   • Auto-generate a preview URL for review.
4. Continuous Delivery
   • Merge to main triggers production deploy (with version tagging).
5. Observability
   • Logs and alerts so you catch issues fast.

Watch the Lesson

Starter Pipeline (GitHub Actions)

1. Create .github/workflows/deploy.yml:

name: Deploy
on:
  push:
    branches: [ main ]
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        if: github.ref != 'refs/heads/main'
        with:
          path: dist

  deploy:
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      # Example: Cloudflare Pages
      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          projectName: liwoxdotnet
          directory: dist