From idea to deployment in 4 hours

TL;DR

I created og-img.com, a free opengraph image generator which is showing preview images for social media posts.

The whole process took 4 hours on a friday evening.

It costs me 13$ for the domain name for a year and 8$ for the Hetzner VM which will be billed monthly.

The whole stack is running inside a docker compose stack and runs smoothly ever since.

What is an opengraph image?

You can lookup the opengraph specification here its a standard to show preview images when you share your site on social media posts.

For this blog i also wanted to have this cool preview images but i am bad as hell with photoshop to generate those images for every post i write.

Thats why i thought for myself: "Hey you can look into generate this images in an automatic way."

So i created a simple HTML template with some basic css styling and a canvas element.

If you look into the html code of this site you will see something like this:

<meta property="og:image" content="https://og-img.com/From%20idea%20to%20deployment%20in%204%20hours/og.png">

The "From%20idea%20to%20deployment%20in%204%20hours" part of the url is the dynamic part and is the text written in the image of the preview. It is configured to allow up to 100 characters.

You can insert literally any text here, but best would be to use your site or blog title.

How to use it

Literally go to the page. Insert your page title. Click "Copy URL". Insert the URL into the meta property content.

Profit?

The tech stack

The whole setup is running on docker compose. One container works as a Caddy reverse proxy to secure the backend and to issue Lets Encrypt Certs. The other container runs the backend code which is node.js

The server is running pretty smoothly and handles the traffic perfectly.