Introduction
When building this site, my biggest priority has been to find a solution that would leverage simplicity, but also let me embed completely custom content in each blog post, should I want or need it.
When using markdown or a rich-text editor in a CMS, it's not at all clear how to do this. You're generally limited to the handful of HTML elements that these tools can render to.
The stack
This blog is a Next.js application.
I chose Next.js as it provides a great developer experience with all the features i needed. Hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
I deploy and host this blog on Vercel.
Their hosting approach is hassle-less, and comes with a basic CI built-in.
MDX to the rescue!
MDX is great. It allows me to write in Markdown, and seamlessly integrate JSX components. It's an extension of Markdown that allows you to import and use custom React components.
Even if you've never written Markdown, you've probably seen it before. It's a widely-used format — all those README.md files that are shown on Github repositories are Markdown!
For Metadata, I use frontmatter. It's a simple way to add metadata to markdown files.
To orchestrate fetching and rendering of MDX files, I use ContentLayer. Shoutout for making file-based content generation so easy!
Database
For type-safe database interactions, I'm using Prisma. I'm setup via Supabase for now, via their Postgres database. I might switch to PlanetScale for hosting later on, as they provide a more scalable solution.