A futuristic digital workspace showing interconnected nodes and flowing data streams in blues and purples, with abstract representations of automation, AI, and cloud infrastructure merging together in a harmonious tech ecosystem, modern and sleek aesthetic with glowing elements and dynamic motion.

The very first post to test how well does this blog behave!

test 1 / 1
Daniel Vahla 2 min read

The story behind

Well, what else would it be if not a typical story of:

  1. This is easy, lets just deploy a ready Markdown renderer with a blog plugin
  2. That did not work, lets build our own frontend with NextJS like all the cool kids do
  3. Lets think carefully this time. There are actual blog starter projects made by professionals, and there is no reason not to use them, so long as they are fitting our use case.

And here we are! A blog made with Astro based starter made by a talented frontend dev, but powered by my ingenious backend skills! So it includes a dedicated CMS, a dedicated What you see is what you get editor, and a multi cloud hosting and deployment solution that reads the content from CMS, adds summary by an LLM, then prepares a image generation prompt based on that summary, and finally creates a headline image! The content of the post is fully human, with my own choice of images and content 😃


Source code

To see how this blog was built, you need to visit 3 repos:

Personal blog frontend repo, built with Astro.
00NOASSERTIONTypeScript

This is where the code for the website itself lives. It’s based on a starter project, you can find a link to it in the footer.

This is where the Webiny CMS, the “backend” of this blog lives. It has been extended to support markdown generation with re-mark support, and a kinda WYSIWYG editor.

Deployment and AI enhancement pipeline for my personal blog
00TypeScript

And finally, this is where the deployment magic with AI sprinkle happens. The CMS has a “on post publish” hook that calls the pipeline orchestrator (AWS Step Function) which fetches the content, does a summary, generates an image prompt, generates image for the header of the post, and generates another image for the hero card that is based on the header image. Then its all uploaded to the CMS and finally github action is called to build and deploy the website to Cloudflare Pages.

Snapshot from the Webiny CMS WYSIWYG editor
Snapshot from the Webiny CMS WYSIWYG editor

Daniel Vahla

Thanks for reading! Feel free to explore my other posts or reach out via the social links in the footer. I’d love to hear your thoughts.


Comments