A GitHub Action that generates Open Graph images from your markdown files. It runs on PRs, reads frontmatter config, and creates images for your blog posts.
I built this because I was tired of either having no OG images or manually creating them for every post. This just automates it based on your existing markdown.
Add to your workflow:
name: "Generate OG Images"
on: pull_request
jobs:
generate_og_job:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: BoyWithSilverWings/[email protected]
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
GITHUB_CONTEXT: ${{ toJson(github) }}
with:
path: src/images/post-images/Then add to your markdown frontmatter:
---
ogImage:
title: "Things you don't know"
subtitle: "There must be something"
imageUrl: "https://example.com/image-url.jpg"
background: "yellow"
fontColor: "rgb(0, 0, 0)"
fontSize: "100%"
---| Props | Description | Required | Default |
|---|---|---|---|
| title | Title text | ||
| subtitle | Subtitle text | ||
| imageUrl | Image or emoji URL | ||
| background | Background color/gradient/image | ||
| fontColor | Text color | ||
| fontSize | Font size | 100% | |
| fileName | Output filename | kebab-cased title |
Works with PRs and .md/.mdx files.
Configure in your workflow file:
| Props | Description | Required |
|---|---|---|
| path | Where to save images | ✅ |
| commitMsg | Commit message | |
| background | Default background | |
| fontColor | Default text color | |
| fontSize | Default font size | |
| componentUrl | Custom web component | |
| botComments | Disable comments ("no") |
Frontmatter overrides repository settings.
Gradient background:
background: "linear-gradient(to right, #ec008c, #fc6767)"Image background:
background: "url(https://example.com/image.png)"Emoji instead of image:
imageUrl: "🚀"Disable bot comments:
botComments: "no"The default web component is here. Replace it with your own:
componentUrl: "https://your-custom-component.js"See docs