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.
Once your workflow is complete you will see an artifact downloaded with the name open-graph-image.
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
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
Top comments (3)
It seems nice!
Maybe I missed something, but did you provide an example of the generated image?
Hey,
I have used the generated image as the cover pic of the article.
I will add the same in the article 😊👍
My bad 😕