Gatsby, TailwindCSS and MDX - How to blog in style.

After planning and thinking about writing a blog for quite a while, I procrastinated so much I didn't end up writing. So in the spirit of taking the first step and inspired by a great blog I'm going to pick a schedule and stick to it.

What should the first post be about? Well, how this blog is made is a good start!

This blog is hosted on ponelat.com, a domain I've owned for a while. and will get a new post every two weeks. It's not as ambitious as a weekly/daily post, yet not as tame as a monthly one. It suits me just fine -- the Goldilocks of schedules.

But I wanted it to be fun

Despite this goal of getting the blog "out the door", I still wanted to engage in some guilty pleasures. Particularly around flexibility and styling in my blog.

As a JavaScript developer, I reached for a blog platform that is JS heavy or at least has focused on it. There were plenty of options. The two I was looking at were...

GatsbyJS

...GatsbyJS and Next.js.

Both are awesome, and I picked Gatsby simply because I didn't want to waste time thinking about a backend (I mean, of course I want a backend but it would delay me further).

Next was to figure out how to host it. I have several little servers lying around in AWS and Digital Ocean -- but honestly didn't want to set something up. So I used GatsbyJS Cloud which has a free option that I can try out. It is obviously optimized for running a GatsbyJS blog so that meant I could spend more time on other things.

Having a platform and a way to host, I was eager to write something. So I wrote "Hello world", which was the previous iteration of the post you're reading now.

TailwindCSS

I recently fell in love with which is a CSS framework that uses small utility classes instead of writing CSS directly. Things like font-bold for { font-weight: bold } or relative for { display: relative }. This is such a relief, as you stop having to name classes (like info-title--subheading and other janky names). So this needed to be in my blog too! But before I could think about styling I needed to write my posts in some fashion.

MDX

I chose Markdown, which is more or less the defacto standard in writing blog posts these days. It keeps you focused. But I needed more! This being my blog, I need interactions. Fortunately for me folks out there have thought like I do, and have built all these things already. What I needed to complete my stack was MDX which is Markdown + JSX (ie: React). That's awesome, and it looks like this...

import { Foo } from './foo.jsx'
export const Bar = () => <div> Foo <Bar/> </div>

# Write some markdown

- Lists
- **Bold** and all that stuff

## Inject custom React components

<Bar />

## And, TailwindCSS!

<div className="px-4 text-red-600">
  Using TailwindCSS' Just-in-time complier
</div>

Putting it all together

The combination allows little things like, styling a piece of text.

Or inserting a color picker...

Fun times ahead!