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
This example site can be seen live at https://determined-poitras-cc2fcb.netlify.com/.
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.
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.
The webinar was recorded and can be watched on YouTube.
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 developThe site is now running at http://localhost:8000, you can see the MDX example page at http://localhost:8000/my-first-post
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.