Github has introduced Github Actions about a year ago which has made the life of developers a lot easy. It helps to create workflows that can automate a lot of processes like running a build of the project or creating a pull request etc.

I wanted to try Github Actions for a long time and finally came up with an idea of building something which will help me in sharing my stories and projects via blog posts.

Idea

Images with some text in it are the best way to grab people's attention towards your blog post. Every time when I write a blog I feel it bit painful to find a proper cover image for my blog post that I can share on social media.

I came up with an idea of creating a GitHub Action which will do the job for me by executing a workflow to generate an OG Image for my blogpost.

How does it work?

It takes three inputs from the user which are the following:

• bold-text: This represents the text which will be displayed in bold style.
• plain-text: This represents the text which will be displayed in the` normal style.
• theme: This defines the theme of the image. It can be either light or dark.

The image will be uploaded as an artifact that can be downloaded from the actions section of the Github Repository 🥳

How to use the Github Action

In order to use the Github Action, you can the following steps in your main.yml file.

- name: Open Graph social cards
  uses: Jasmin2895/open-graph-image@v1.1
  with:
    bold-text: "Open graph image"
    plain-text: "for social media platform"
    theme: "dark"

- name: Archive open graph image
  uses: actions/upload-artifact@v2
  with:
    name: open-graph-image
    path: og-image.now.sh.png

- name: Download all workflow run artifacts
  uses: actions/download-artifact@v2

Once your workflow is complete you will see an artifact downloaded with the name open-graph-image zip file.

Tadaa! 🎉 🎊

You have the image with you now you can use it your blogpost or other social media platform.

Github Repository