How I setup my developer blog

This post will walk through the how I am publishing blog posts on this website.

Some of my criteria for the tools I chose for this blog:

• Ability to author blog posts in Markdown
• Ability to run React & Typescript code samples directly from the browser
• Full control over authoring CSS
• Static generation in order have faster performance, more security, SEO and portability

I've enjoyed using Next.js for larger projects and was curious how it might fare for a simple blog. This is an incredibly easy framework to get started with their learning site. Since I was wanting to be able to write blog posts in Markdown this I discovered Nextra. Nextra allows for writing in Markdown or with react components using either .md, .mdx, .ts, or .tsx. This allow for a lot of flexibility when authoring blog posts.

I also wanted to try authoring in vanilla CSS yet still support legacy browsers through inserting vendor prefixes (where needed) at build time. Luckily Next.js makes this super easy as this feature is built into the framework.

While I've enjoyed working in Next.js, react (in typescript), vanilla CSS (utilizing postcss), I could see myself recreating my blog in the future with tools like 11ty, Svelte or something different just to experiment with different technology. If I do, I'll be sure to provide an update!

Summary

We've discussed how I setup my blog using Next.js and Nextra

• Static Generation: The HTML is generated at build time from my markdown files when a commit is deployed to production.
• Autoprefixer: The CSS is also generated at build time to include the appropriate vendor prefixes that match my browserlist.
• React & Typescript ready: If I so choose, I can highlight and run Typescript code examples from this browser to include with code examples.