This workshop covers the fundamentals of developing fast, accessible sites with Gatsby, a React framework, and dive deep into the building blocks you’ll need to build your own custom Gatsby sites.
After completing a mix of lectures and exercises you’ll be able to build a Gatsby site from the ground up and deploy it live. In particular, you’ll learn the ins and outs of creating Gatsby sites, from selecting a starter or theme, using GraphQL to generate the data layer, making Markdown content interactive with MDX, deploying your site, and more!
- This workshop is for JavaScript developers who haven't had extensive experience with Gatsby and want a deeper understanding of Gatsby.
All of these must be available in your PATH
. To verify things are set up
properly, you can run this:
git --version
node --version
npm --version
If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.
After you've made sure to have the correct things (and versions) installed, you should be able to just run a few commands to get set up:
git clone https://github.com/m0nica/gatsby-workshop.git
cd site
npm install
or
git clone https://github.com/m0nica/gatsby-workshop.git
cd site
yarn
To get the app up and running (and really see if it worked), run:
cd site
npm run start
or
cd site
yarn start
This should start up the site locally in your browser at http://localhost:8000/. For reference the production deployment of the inital site looks like: https://deploy-preview-4--gatsbyjsdemo.netlify.app/ and the production deploymeny of the final site looks like: https://deploy-preview-14--gatsbyjsdemo.netlify.app/ (subject to change).
The exercises each have a branch associated with them. You can find the exercises under site/INSTRUCTIONS/
in files labelled like 01_instructions.md
. To get the latest working code for an exercise check out the exercise solution branch.
- 00 • Running a Gatsby Application Locally
- 01 • Customize Gatsby Site Information
- 02 • Make Footer Data Dynamic
- 03 • Create a new page in Gatsby
- 04 • Create a new navigation link
- 05 • Add site-wide banner
- 06 • Adding Speaker/Talk Data Type
- 07 • Render Speaker/Talk Data Type
- 08 • Programmatically Generate Speaker Pages
- 09 • Link to Speaker Pages
- 10 • Add Talk Descriptions and Render on Speaker Pages
- 11 • Add Page Listing All Speakers
- Checkout the main branch
- Read through the instructions in
site/INSTRUCTIONS
and complete one set of instructions at a time - Start exercise
- Go through every mentioned file and follow the instructions
- We all come back together
- I go through the solution and answer questions
- Move on to the next exercise.
- Repeat.
- Go to www.monica.dev/gatsbyworkshop
- The slides can be run locally from this repo by doing the following:
cd slides
npm install
npm run dev
- View slides locally at: http://localhost:3000/