Open Source Ecosystems

This repository demonstrates how to add MDX pages to a new Gatsby site. It was made for a webinar from the Gatsby Learning team and streamed on Gatsby's Twitch account.

Included in this repository is a branch per feature added. The following branches are available and build on each other, they're in numeric ordered based on the number the branch name starts with.

01-gatsby-default-starter
02-install-and-configure-mdx
03-add-3rd-chart
04-add-custom-form
05-export-page-data

Live Example Site

This example site can be seen live at https://determined-poitras-cc2fcb.netlify.com/.

Webinar Slide Deck

A short slide deck explaining the value of MDX used in conjunction with the webinar was prepared on Google Slides, it is freely available and encouraged to be used and extended for your own presentations.

Egghead Screencasts

A few short Egghead screencasts were recorded to cover similar content in a shorter, more quickly digestable format. You can watch them (and other videos covering MDX concepts) in this collection on Using components in MDX.

Recording on YouTube

The webinar was recorded and can be watched on YouTube.

Running locally

The site can be run locally on your own computer as well.

Clone the site, navigate into it, and start it up.

git clone https://github.com/gatsbyjs/webinar-using-mdx.git

cd webinar-using-mdx

npm install

gatsby develop

The site is now running at http://localhost:8000, you can see the MDX example page at http://localhost:8000/my-first-post

Resources used to create this project

More Guides for Learning Gatsby and MDX

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the MDX section of the sidebar.