How I Built This Blog

In this episode of "matteing's wild adventures", I'll be sharing some insights into how I built this blog.

The process was quite an adventure. There were twists and turns, but ultimately my goal was achieved: I learned more about the web platform and further expanded my experience.

And... the result turned out quite nice! It's got excellent performance scores, the codebase is clean and maintainable and there's even a headless Ghost instance I can use to add WYSIWYG content into the site.

Now, are you ready? To find out... What happens when front-end engineers go wild?

The hunt for a stack

Right off the bat, I knew immediately what stack I wanted to use for the project. Okay, that's a bit much. At a minimum, I knew I wanted to use TypeScript and NextJS.

These are two technologies that I love and, in the case of NextJS, have used successfully for years.

As for the language, I'm a recent TypeScript convert. You see, for a number of years I preached the song of it being overhead rather than a productivity aid.

I knew I needed to have a personal TypeScript project for fun. Other choices made immediately include TailwindCSS for the general look and feel of the blog.

The Backend?

The backend was the harder choice of the bunch. Where would I host the content?

The reason I wanted to start a new blog from scratch was because my old Ghost blog was inadequate. I didn't know how to theme it well, and didn't want to rebuild it in Handlebars. I liked using React and TypeScript.

Therefore, I immediately ruled out Ghost in the beginning. I've tried the Content API in the past: it didn't surprise me. It wasn't flexible enough for my needs – I wanted control over my blog's markup and the API only returned HTML.

I tried other headless CMS solutions and hated them all. They were too much complexity to handle – even for an intentionally overengineered project.

So, I decided to go with the MDX extension for NextJS. MDX allows you to write Markdown with JSX embedded in, so it seemed like a natural fit.

The Initial Version – next-remote-mdx

• The hunt
• What I wanted.
• The initial version – next-remote-mdx
• Webhooks script
• Revalidation
• Image Optimization
• Imagedoc + props to Miguel
• Post previews
• Asset paths fixed
• Flexing the web.dev score
• Links