GitHub Actions — Auto-Generate OG Images on Deploy

Every time you publish a new post or update a page, your OG images should reflect the new content. Manual screenshots go stale. Missing social previews hurt click-through rates. This guide shows you how to wire RendShot into a GitHub Actions workflow so OG images are generated automatically on every push to main — no manual steps, no outdated previews.

Prerequisites

• A RendShot account and API key (rs_live_...). Get one at rendshot.ai/dashboard.
• A GitHub repository with the content you want to generate images for.
• Your API key stored as a GitHub Actions secret (see Step 1).

Step 1: Add Your API Key as a GitHub Secret

GitHub Actions secrets keep your API key out of workflow YAML and away from version control.

1. Go to your repository on GitHub.
2. Open Settings → Secrets and variables → Actions.
3. Click New repository secret.
4. Set:
   • Name: RENDSHOT_API_KEY
   • Value: your RendShot API key (e.g. rs_live_abc123...)
5. Click Add secret.

Your workflow will reference this secret as ${{ secrets.RENDSHOT_API_KEY }}.

Step 2: Create the Workflow File

Create .github/workflows/og-images.yml in your repository:

name: Generate OG Images

on:
  push:
    branches: [main]
    paths:
      - 'content/**'
      - 'src/pages/**'

jobs:
  generate:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Generate OG image
        env:
          RENDSHOT_API_KEY: ${{ secrets.RENDSHOT_API_KEY }}
        run: |
          curl -s -X POST https://api.rendshot.ai/v1/image \
            -H "Authorization: Bearer $RENDSHOT_API_KEY" \
            -H "Content-Type: application/json" \
            -d '{"template_id":"blog-og","variables":{"title":"My Post"},"width":1200,"height":630}' \
            -o response.json
          cat response.json

The paths filter ensures the workflow only runs when content files change — not on dependency updates or config tweaks.

The response JSON contains a url field pointing to the generated image on RendShot's CDN. You can then download the image, commit it to the repo, or upload it to your own storage.

Using the CLI

If you prefer a higher-level interface over raw curl, use the RendShot CLI via npx. No installation step needed — GitHub Actions runs it on demand:

- name: Generate with CLI
  env:
    RENDSHOT_API_KEY: ${{ secrets.RENDSHOT_API_KEY }}
  run: |
    npx rendshot generate \
      --template blog-og \
      --var "title=My Post" \
      --width 1200 --height 630 \
      --output public/og/post.png

The CLI reads RENDSHOT_API_KEY from the environment automatically. The --output flag saves the image directly to disk. You can then commit public/og/post.png as part of the same workflow run.

Batch Generation for Multiple Pages

For sites with many content files, loop through changed MDX files and generate one OG image per file. This script extracts the title from each file's frontmatter and passes it to RendShot:

- name: Generate OG images for changed posts
  env:
    RENDSHOT_API_KEY: ${{ secrets.RENDSHOT_API_KEY }}
  run: |
    mkdir -p public/og

    # Get list of changed MDX files (against the previous commit)
    CHANGED=$(git diff --name-only HEAD~1 HEAD -- 'content/**/*.mdx')

    for FILE in $CHANGED; do
      # Extract title from frontmatter (first "title:" line)
      TITLE=$(grep -m 1 '^title:' "$FILE" | sed 's/^title: *//' | tr -d '"')

      # Derive a slug from the file path for the output filename
      SLUG=$(basename "$FILE" .mdx)

      echo "Generating OG for: $TITLE ($SLUG)"

      npx rendshot generate \
        --template blog-og \
        --var "title=$TITLE" \
        --width 1200 --height 630 \
        --output "public/og/${SLUG}.png"
    done

- name: Commit generated images
  run: |
    git config user.name "github-actions[bot]"
    git config user.email "github-actions[bot]@users.noreply.github.com"
    git add public/og/
    git diff --staged --quiet || git commit -m "chore: regenerate OG images [skip ci]"
    git push

The [skip ci] tag in the commit message prevents an infinite workflow loop — pushing generated images back to main won't trigger another run.

Troubleshooting

Secret not found / authentication error

Check that the secret name in your workflow (RENDSHOT_API_KEY) matches exactly what you named it in GitHub Settings. Secret names are case-sensitive. If you renamed the secret, update both the Settings page and all workflow references.

Rate limit errors on free tier

The free plan allows 10 requests per minute. For batch generation of more than 10 files, add a short delay between requests:

for FILE in $CHANGED; do
  # ... generate image ...
  sleep 6  # stay under 10 req/min
done

For higher throughput, upgrade to the Pro plan (100 req/min) or Enterprise (1,000 req/min).

Only regenerate changed files

Running generation for every file on every push is wasteful. The batch script above uses git diff HEAD~1 HEAD to find only files changed in the last commit. For pull request workflows, use git diff origin/main...HEAD to find all changes in the branch.

Workflow takes too long

Cache the npx download between runs with actions/cache, or switch to curl for simpler one-off calls. For large content libraries, consider only running this workflow on tagged releases rather than every push.