https://github.com/gatsbyjs/webinar-using-mdx
Sample repository implementing MDX pages in a new Gatsby site
https://github.com/gatsbyjs/webinar-using-mdx
examples gatsby mdx
Last synced: 4 months ago
JSON representation
Sample repository implementing MDX pages in a new Gatsby site
- Host: GitHub
- URL: https://github.com/gatsbyjs/webinar-using-mdx
- Owner: gatsbyjs
- License: mit
- Archived: true
- Created: 2020-02-12T22:31:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-20T16:43:51.000Z (5 months ago)
- Last Synced: 2025-01-29T11:01:43.064Z (4 months ago)
- Topics: examples, gatsby, mdx
- Language: CSS
- Homepage: https://determined-poitras-cc2fcb.netlify.com/
- Size: 1.8 MB
- Stars: 4
- Watchers: 14
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Using MDX Example from Gatsby Webinar
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](https://www.twitch.tv/gatsbyjs).
---
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/](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](https://docs.google.com/presentation/d/1uOD90C5b8JXxTh1U9wGBQRI5GVBqmLB2o0F2uJ0kAPQ/edit?usp=sharing) 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](https://egghead.io/playlists/using-components-in-markdown-with-mdx-5de0?af=2p1zw).
## 💾 Recording on YouTube
The webinar was recorded and can be watched [on YouTube](https://www.youtube.com/watch?v=XyJgp3G8HyY).
## 🔧 Running locally
The site can be run locally on your own computer as well.
Clone the site, navigate into it, and start it up.
```shell
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
- [Gatsby default starter repo](https://github.com/gatsbyjs/gatsby-starter-default)
- [Gatsby plugin MDX](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/)
- [Bar chart from react-charts](https://react-charts.js.org/examples/bar)
## 🎓 More Guides for Learning Gatsby and MDX
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** 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](https://www.gatsbyjs.org/docs/).** In particular, check out the [MDX section of the sidebar](https://www.gatsbyjs.org/docs/mdx/).