GatsbyJS Niche Sites: Why You Need MDX

Written by Donovan Nagel

Last updated: Sep 25th, 2019

I can’t believe I only just discovered MDX.

If you’re creating niche sites with Gatsby and aren’t using MDX, then you don’t know what you’re missing.

I’ll explain why in a moment.

In case you haven’t been following, I announced a while back that I’m doing an “epic, static niche experiment” primarily using GatsbyJS on Netlify.

At the time of this writing, I have a total of 11 active niche sites on various topics.

Several of those have been acquired via Flippa.

I’ve encountered numerous challenges so far and learned a lot which I’ll share in future updates.

Today I just want to share my recent discovery of MDX and how it’s really been a game-changer for me while building high quality niche sites.

ELI5: What is MDX and why do I need it?

Well… I’ll explain it in simple terms.

Pretty much all SSG’s use markdown (.md) files by default for writing content.

These consist of frontmatter (the bit at the top of the file with meta information about the post) followed by the post body written in markdown.

Easy stuff.

Unless you’re pulling posts from a headless CMS, then you’re probably using gatsby-transformer-remark to parse these files when you build your site. So in the case of one of my recent Flippa buys for example, I have a directory with 115 .md files - each representing a single post.

But what if I wanted to, let’s say, add an optin form in the middle of some of my posts?

Or a beautifully designed table of contents?

Or something more complex like a multi-step form?

Plain markdown isn’t going to help here.

This is where MDX makes life wonderful (it’s not Gatsby-specific).

By changing the .md files to .mdx and switching all the allMarkdownRemark queries over to allMdx, we can then insert React components (.jsx files) straight into our markdown posts wherever we need them.

It looks like this:

---
Frontmatter goes here as usual
---

import {CoolComponent} from "@mdx/coolcomponent"

# This is a heading in markdown

Post content.
* list item 1
* list item 2

<CoolComponent />

## More markdown content as usual

So as you can see, it’s a typical markdown blog post as you’d see in most SSG’s.

With the added benefit of importing React components and inserting them directly into content.

How to get the most out of MDX for niche sites?

I hit a snag with a recent niche site purchase on Flippa prior to experimenting with MDX.

It was a fairly large, established Wordpress site that had been built using the Elementor bloat (gasp!). :finnadie:

The first challenge was exporting to Gatsby (Jekyll exporter was useless because Elementor produces horrendous HTML output that was unusable). I copied it all over manually (copy and paste).

That took ages but I eventually got it done.

Then I realized something even worse (should have considered this before I started).

The previous owner of the site had dynamic content loading in his posts:

Amazon Product API
Table of contents
Feature lists
Recipes
Pros and Cons comparison tables

The Amazon Product API was being pulled from by a Wordpress plugin called Content Egg.

The others all seemed to be drawn up as templates by Elementor.

So my options were to either copy the content over (minus the dynamic aspect and design) or solve the problem using Gatsby.

MDX was the answer.

Think of it as GatsbyJS’ answer to Hugo shortcodes.

So, for example, whenever I want to include a Pros and Cons table in my niche site review posts:

// Import the component at the top of the post below the frontmatter
import {ProsCons} from "@mdx/proscons"

// Add the component like so anywhere in the post I need it
<ProsCons pros={[
"Product is made of top quality wood.",
"Asthetically pleasing."
]} cons={[
"Very expensive.",
"Limited availability."
]}
/>

That will render my pre-designed comparison table with the array populating the pros and cons.

I can render as many of these on one post as I want.

And the beautiful thing about these modularized components too is that I’m able to share them between my 11 niche sites and insert them anywhere I want.

But MDX looks more complicated than Wordpress plugins!

Not a chance.

I’ve already talked at length about why static beats Wordpress for niche site building.

So I’m already biased, admittedly.

But I actually took the time to play around with Elementor before I trashed it just out of curiosity.

I honestly found the plugin overwhelming and a bloated mess.

It made me more determined than ever about static site simplicity and coding lean, clean niche sites that outperform Wordpress.

In the time it would take a person to craft a beautiful niche blog post using something like Elementor with dynamic elements, I could have several complete Gatsby niche sites up and running, recycle my pre-made React components that are all designed for maximum conversions and be on my way.

Even just for a regular blog, having the option to include email optin forms throughout your posts is huge.