Skip to content
📷 The tool that generates your social image based on your markdown content.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
templates
.editorconfig
.eslintrc
.gitignore
.prettierrc
README.md
package.json
yarn.lock

README.md

social-image-gen

We got inspired by the social image from dev.to so we decided to create the own one for our blog 12bit.vn. However, you can use it to generate images for your site as well.

npm npm

Installation

npm i -g social-image-gen
# or
yarn global add social-image-gen

Usage

social-image-gen [args]

Available arguments

Argument Required Default Description
--path optional The path to the markdown file. Eg: --path=./posts/post-slug/index.md
--output optional The path that stores the generated image. Eg: --output=./public/post-slug
--width optional 800 The image width.
--height optional 400 The image height.
--name optional "thumbnail" The name of image.
--type optional png The type of image. It's must be 'png' or 'jpeg'
--title optional "untitled" The title in the image. Eg: --title="Hello World"
--date optional The date in the image. Eg: --date="20 Mar 2019"
--author optional "unauthored" The author in the image. Eg: --author="12bit.vn"
--template optional templates/default.html The mockup template is used to generate image. You can check ./templates/default.html to see how to create a template.

Examples

  1. Generate a 1200x630px social image from posts/hello-world/index.md

Suppose that index.md has the front matter looks like this:

---
title: Lấy dữ liệu web với Node.js và Puppeteer
author: Thien Nguyen
date: "2019-03-04T10:33:00+07:00"
---
social-image-gen --path=./posts/hello-world/index.md --output=./public/hello-world/ --width=1200 --height=630

thumbnail

  1. Generate a 800x400px social image without markdown file.
social-image-gen --output=./public/hello-world/ --title="Hello World" --date="20 Mar, 2019" --author="12bit.vn"

thumbnail-1

You can’t perform that action at this time.