Why You Need MDX For Your Niche Sites

Written by Donovan Nagel

Last updated: Sep 25th, 2019

If you’re creating niche sites 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” on Netlify.

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

Several of those have been acquired on Flippa.

Some have already been sold for profit on 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 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.

By changing the .md files to .mdx, we can then insert React components (.jsx files) or Svelte components (.svelte 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. 💩

The first challenge was exporting to Markdown (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 another way.

MDX was the answer.

It’s very similar 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’s actually slower and more cumbersome to play around with these horrendous page builders.

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