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 (opens in a new tab) 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 (opens in a new tab). Since I was wanting to be able to write blog posts in Markdown this I discovered Nextra (opens in a new tab). 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 (opens in a new tab) 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 (opens in a new tab), Svelte (opens in a new tab) or something (opens in a new tab) different (opens in a new tab) 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 (opens in a new tab).
• React & Typescript ready: If I so choose, I can highlight and run Typescript code examples from this browser to include with code examples.