I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post.

I set up Hugo so it uses an image named banner.png or banner.jpg stored in the post folder to be used as the Open Graph image, like this:

<meta property="og:image" content="https://flaviocopes.com/axios/banner.png" />

If a post has no image, I show my avatar instead:

<meta property="og:image" content="https://flaviocopes.com/img/avatar.png" />

There’s a problem: I stopped making those custom banner images a long time ago, and most of my posts don’t have a banner.

They all look the same on Twitter:

There’s no way I can make like 500 banner images at hand. I’ve had this thought of programmatically generating them since I saw Indie Hackers generating those images for forum blog posts (a great idea):

So after stumbling upon a nice inspiration for a banner image, I decided to make a custom banner for each of my blog posts.

The banner is a PNG image, and to keep the post focused on the subject (“how to create and save an image with Node.js and Canvas”) I’ll skip some parts.

Also, there are many different ways of doing what I did, here’s just one way.

First of all, what npm packages do we need?

Just one! canvas:

npm install canvas

#node.js #node #canvas #programming