Repository files navigation

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 onGatsby'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 athttps://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 isfreely 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) inthis collection on Using components in MDX.

The webinar was recorded and can be watchedon 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.gitcd webinar-using-mdxnpm installgatsby develop

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

• Gatsby default starter repo
• Gatsby plugin MDX
• Bar chart from react-charts

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

• For most developers, we recommend starting with ourin-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, headto our documentation. In particular, check out theMDX section of the sidebar.