DEV Community

Cover image for Create Github Social Preview Images in a few clicks
Rahul Tarak
Rahul Tarak

Posted on

Create Github Social Preview Images in a few clicks

A problem I found when building public projects on github is creating social images to make it easier to share them on Twitter or reddit or even here.

Of course, there are solutions to this my favourite probably being canva, but it still can be a time sink to design these images to look good.

A few weeks ago Wei and I came up with a solution to fix this during MLH Fellowship

wei image

Presenting socialify

Socialify allows users to create beautiful preview images in three clicks.

  1. Add your GitHub repo url Alt Text
  2. Choose your options Alt Text
  3. Download Image or Copy Image url

Image as a service

Socialify use the same concept of image as a service from Vercel's og-image

This allows users to have SVG images that automatically update badges and description overtime.

Some Example Images

Alt Text
Alt Text
Alt Text

Find our project

Website - https://socialify.git.ci/
Product Hunt - https://www.producthunt.com/posts/socialify

GitHub logo wei / socialify

💞 Socialify your project. 🌐 Share with the world!

GitHub Socialify

Want your project to stand out? Socialify helps you showcase your project to the world by generating a beautiful project image like the one above!

It includes a ton of options including custom logo, description, badges, and many fonts and background patterns to choose from.

Usage

Project site: https://socialify.git.ci

Social Image as a Service

Click on the image to use the link anywhere, the image will be programmatically generated with live data. This means the badges will automatically update.

Recommended for README files or img tags.

Image Download

You can download the image as a .png, .jpeg or .webp and use it anywhere in the world!

Recommended for GitHub repository social preview image and other sites that require image upload.

CLI

You can use cli tool mheap/github-social-image to upload social images to all your repos at once.

Examples

Session Bot Example Class Photo Example Modfy Example Pull Example Traefik Example React Example

Development

  • Create a GitHub token from Settings > Developer settings >





Latest comments (0)