/gatsby-workshop

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.

Primary LanguageJavaScriptOtherNOASSERTION

deploy to netlify button

Gatsby Workshop

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!

Prerequisites

  • This workshop is for JavaScript developers who haven't had extensive experience with Gatsby and want a deeper understanding of Gatsby.

System Requirements

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.

Setup

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

Running the app

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).

Exercises

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.

Workflow

  • 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.

View Slides