Skip to content

Automatically generate open graph image based on the content you have

License

Notifications You must be signed in to change notification settings

ambersun1234/autogen-og-image

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Repository files navigation

autogen-og-image

autogen-og-image is a highly customizable Open Graph image generator for your blog, specifically for mmistakes/minimal-mistakes

Description

This tool will generate the Open Graph image based on the frontmatter section in your markdown article

What is a frontmatter?

---
title: Random Article Title
description: Random article description
---

For this tool, the frontmatter will take the following attributes

Required title description date
Optional author avatar

GitHub Action

Create an action file .github/workflows/ci.yaml and fill in following content

name: Build and Deploy to Github Pages

on:
  push:
    branches:
      - master # Here source code branch is `master`, it could be other branch

jobs:
  autogen_og_image:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: mujo-code/[email protected]
      # Install the corresponding font on system if needed
      - name: Install Chinese Font
        run: |
          sudo apt update
          sudo apt install -y fonts-noto
      - uses: ambersun1234/[email protected]
        # Change author and avatar to your own(optionally)
        with:
          input_dir: ${{ github.workspace }}/_posts
          output_dir: ${{ github.workspace }}/assets/img/og
          author: "Shawn Hsu"
          avatar: "https://avatars.githubusercontent.com/u/13270428?v=4"
      - name: Commit og image and Push
        # Change the user.name and user.email to your own
        run: |
          git config --local user.name 'Shawn Hsu'
          git config --local user.email '[email protected]'
          if [ -z "$(git status --porcelain)" ]; then
            echo "Working directory clean. Nothing to commit."
            exit 0
          fi
          git add .
          git commit -m "Update og image"
          git push

For more customizable options(e.g. font size, font color), please refer to action.yml

Environment Variable

This tool also support environment variable as input
You can find various config in .env.example

Just copy to a new file .env and make some changes, you're good to go

$ cp .env.example .env

Run

$ npm run build
$ node ./dist/main.js

References

License

This project is licensed under GNU General Public License v3.0 License - see the LICENSE file for detail