DEV Community

Cover image for Create social cards from Github Action
Jasmin Virdi
Jasmin Virdi

Posted on • Updated on

Create social cards from Github Action

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.

Submission Category

DIY Deployments/ Maintainer Must-Haves / Wacky Wildcards

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.

Alt Text

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

Alt Text

Tadaa! 🎉 🎊

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

I have used the generated image as the cover image of this article.

Github Repository

GitHub logo Jasmin2895 / open-graph-image

Create the open graph image

open-graph-image

Create social cards using open graph image.

Inputs

bold-text

Required The text which will appear as bold text on image.

plain-text

Required The text which will appear as normal text on image.

theme

The theme layout for social image. There are two values possible which are light and dark.

Outputs

Image is stored in the root directory.

Example usage

- 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

Output Image

Output Image




Resources

Social Cards as a Service

Top comments (3)

Collapse
 
fennecdjay profile image
Jérémie Astor

It seems nice!
Maybe I missed something, but did you provide an example of the generated image?

Collapse
 
jasmin profile image
Jasmin Virdi

Hey,

I have used the generated image as the cover pic of the article.
I will add the same in the article 😊👍

Collapse
 
fennecdjay profile image
Jérémie Astor

My bad 😕