Learning Gatsby

This is the repository for the LinkedIn Learning course Learning Gatsby. The full course is available from LinkedIn Learning.

Gatsby is a modern take on the static site generator. Built on React, it uses GraphQL to extract information from data sources such as WordPress. Learn how to use this flexible JavaScript framework to build performance-focused websites in this course with Morten Rand-Hendriksen. Discover how to get Gatsby up and running and use the starter projects to quickly build out your sites. Find out how to work with Gatsby pages, assets, and components, and style your sites using multiple CSS approaches: standard static style sheets, inline styles, CSS modules, styled components, and more. Plus, learn how to extend Gatsby with plugins, connect to data sources with GraphQL queries, create pages dynamically using transformer plugins and Node.js scripts, and get your Gatsby site ready for production.

Learning objectives

• Setting up Gatsby
• Installing a Gatsby starter
• Exploring a Gatsby project
• Working with static pages and assets
• Using components
• Styling your Gatsby site with CSS
• Extending Gatsby with plugins
• Requesting data with GraphQL
• Creating pages dynamically
• Building a production-ready public site
• Creating a progressive web app (PWA)

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add /tree/BRANCH_NAME to the URL to go to the branch you want to access.

Branches

The branches are structured to correspond to the videos in the course. The naming convention is CHAPTER#_MOVIE#. As an example, the branch named 02_03 corresponds to the second chapter and the third video in that chapter. Some branches will have a beginning and an end state. These are marked with the letters b for "beginning" and e for "end". The b branch contains the code as it is at the beginning of the movie. The e branch contains the code as it is at the end of the movie. The master branch holds the final state of the code when in the course.

Installing

1. To use these exercise files, you must have the following installed:
   • Node.js
2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
3. In terminal, navigate to the project folder and run the command npm install.
4. To start developing, run the command gatsby develop.