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

April 27, 20217 minute read

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!

Mood board
My mood board in Figma

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...

And making it do things, like changing this text.

Fun times ahead!


Written by Josh Ponelat who lives and works in Plettenberg Bay building silly things. You should follow him on Twitter or Instagram