Serverless Pipeline: GitHub Actions

To automate your "No-Server" image pipeline, we will use a GitHub Action that monitors your /images/raw/ folder. As soon as your Google Apps Script pushes a new JPG there, this action will wake up, convert it to WebP and AVIF, and commit those optimized files back to your repository.

If your main branch is protected, means if you need to raise a PR for any code changes, you may get error: remote: error: GH006: Protected branch update failed for refs/heads/main. 

Since your main branch is protected, the default GITHUB_TOKEN isn't powerful enough to push changes directly.

Because your repository is a personal one (not in a GitHub Organization), the "Allow specified actors to bypass" setting isn't available to you. To fix this, we need to use your Personal Access Token (PAT) to give the workflow "Admin-level" push rights.

Step 1: Create a Fine-Grained PAT

1. Go to your GitHub Settings (top right profile icon) -> Developer settings -> Personal access tokens -> Fine-grained tokens.
2. Click Generate new token.
3. Name: GITHUB_ACTION_BYPASS_PROTECTION
4. Repository access: Select Only select repositories and pick your Repo.

5. Permissions:

• Contents: Set to Read and write.
• Metadata: Set to Read-only (usually automatic).
6. Click Generate token and COPY IT IMMEDIATELY.

Step 2: Add the Token to your Repository Secrets

1. Go to your repository on GitHub.
2. Click Settings (tab at the top) -> Secrets and variables -> Actions.
3. Click New repository secret.
4. Name: BYPASS_TOKEN
5. Value: Paste the token you copied in Step 1.

Step 3: YAML Workflow

The GitHub Action: optimize-images.yml

Create a new file in your repo at exactly this path: .github/workflows/optimize-images.yml

YAML

name: Optimize and Convert Images

on:
  push:
    paths:
      -  'images/raw/**' # Only runs when files are added to this folder
  workflow_dispatch: # Allows you to run it manually for testing

jobs:
  build:
    name: Convert and Move Images
    runs-on: ubuntu-latest
    permissions:
      contents: write # Required to push the optimized images back

    steps:
      - name: Checkout Repo
        uses: actions/checkout@v4
        with:
          # Use your BYPASS_TOKEN here to handle branch protection
          token: ${{ secrets.BYPASS_TOKEN }}
          fetch-depth: 0

      - name: Optimize & Convert Images
        uses: stellasoftio/image-optimizer-action@v1
        env:
          # This is the auth fix. Some versions of Octokit.
          # Inside actions need this env variable specifically.
          GITHUB_TOKEN: ${{ secrets.BYPASS_TOKEN }}
        with:
          # Also passing it here for the action's own logic
          github-token: ${{ secrets.BYPASS_TOKEN }}
          # Create WebP versions
          export-webp: true
          # Create AVIF versions
          export-avif: true
          # We'll handle moving files ourselves in the next step
          replace-original-after-export-webp: false

      - name: Move to Dist Folder & Remove Raw Images
        run: |
          mkdir -p images/dist
          # Move all webp and avif files generated by the action to dist
          # We escape the semicolon with \; so 'find' sees it
          find images/raw -name "*.webp" -exec cp {} images/dist/ \;
          find images/raw -name "*.avif" -exec cp {} images/dist/ \;
          find images/raw -name "*.jpg" -exec cp {} images/dist/ \;

          # Use 'git rm' to remove the raw files from the repo track
          # We keep the .gitkeep so the folder itself doesn't disappear
          git rm -r images/raw/* || true

          # Restore the folder structure
          mkdir -p images/raw
          touch images/raw/.gitkeep
          git add images/raw/.gitkeep

          echo "--- PERFORMANCE REPORT ---"
          du -sh images/raw/*
          du -sh images/dist/*
          echo "--------------------------"
          
          # Validation: List the files to prove they were moved
          # echo "Current files in images/dist:"
          # ls -R images/dist/
          
      - name: Verify Output
        run: |
          COUNT=$(ls images/dist | wc -l)
          if [ $COUNT -eq 0 ]; then
            echo "Error: No images were moved to DIST folder!"
            exit 1
          fi
          echo "Success: $COUNT files are ready in images/dist."

      # - name: Cleanup Raw Folder | Move and Remove Raw Images
      # Optional: Keeps your repo clean by removing the raw upload after processing
      #  run: |
      #    rm -rf images/raw/*
      #    touch images/raw/.gitkeep
          
      - name: Commit optimized images
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "Automated Image Optimization and move to DIST [Skip CI]"
          # This pattern now includes the deletions and the new dist files
          file_pattern: 'images/dist/* images/raw/*'
          push_options: '--force'
    

---

How and When to Test This

You can test this in 30 minutes by following these steps:

Step 1: The Folder Structure

Make sure your GitHub repository has these two folders created (even if they just have a dummy .gitkeep file for now):

• images/raw/
• images/dist/

Step 2: The Manual Test (Today)

Before you even touch AppSheet, you can verify the "Conversion" works:

1. Manually upload any .jpg image to your GitHub repo inside images/raw/.
2. Go to the Actions tab in your GitHub repository.
3. You should see a workflow named "Optimize and Convert Images" start running.
4. Once it finishes (usually 1-2 minutes), check your images/dist/ folder. You should see the .webp and .avif versions of your image there!

Step 3: The Full Integration Test

Once the manual test passes:

1. Trigger your AppSheet app to upload a new image.
2. Check your Apps Script logs to ensure it successfully pushed the file to GitHub.
3. The GitHub Action will trigger automatically from the Apps Script "Push."

---

Suggestions for Success

• Branch Protection: If you have "Branch Protection" on your main branch, the GitHub Action might fail when trying to commit back. Make sure to allow the "GitHub Actions" user to bypass these rules or push to a separate "hosting" branch.
• Image Naming: Ensure AppSheet doesn't use spaces in filenames (e.g., use IMG_123.jpg instead of IMG 123.jpg). Apps Script can handle spaces, but it makes URL pathing on the website much harder.

Since the pipeline is now set up (App Script → GitHub Raw → GitHub Action → GitHub Dist), try to actually use these new images in the website.