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.
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.
DIY Deployments/ Maintainer Must-Haves / Wacky Wildcards
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
The image will be uploaded as an artifact that can be downloaded from the actions section of the Github Repository 🥳
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
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.
Create social cards using open graph image.
Required The text which will appear as bold text on image.
Required The text which will appear as normal text on image.
The theme layout for social image. There are two values possible which are
Image is stored in the root directory.
- name: Open Graph social cards uses: Jasmin2895firstname.lastname@example.org 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