Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Working with Gatsby

Course Summary

The Working with Gatsby training course is designed to demonstrate a new approach to the delivery of web-based solutions moving from a single monolithic CMS toward a content mesh with an infrastructure layer to decouple websites.

The course begins with an introduction to Gatsby including installation, creating a project with Gatsby CLI creating static pages, and layouts and styling. Next, it describes Gatsby architecture, querying data with GraphQL, and working with images and markdowns. The course concludes with examining how to move to production and how to improve Progressive Web App (PWA) support.

Prerequisites: Attendees must have JavaScript development experience. Experience using React is helpful but not required.

Purpose
 Learn to deliver web-based solutions using Gatsby.
Audience
 Developers and developer teams looking to incorporate Gatsby into their toolkit.
Role
Software Developer - Web Developer
Skill Level
Introduction
Style
Learning Spikes - Workshops
Duration
2 Days
Related Technologies
React

 

Productivity Objectives
  • Create a highly performant web app using Gatsby, React and GraphQL
  • Deliver web-based solutions using a "content mesh"
  • Source and render data from a variety of data sources
  • Install and configure plugins to utilize functionality required
  • Demonstrate Gatsby's Architecture and Boot Process

What You'll Learn:

In the Working with Gatsby training course, you'll learn:
  • Introducing Gatsby
    • What and Why
    • The JAM Stack
    • Headless CMSes
    • Gatsby's value proposition
    • The Gatsby Ecosystem
  • Getting Started
    • Install Gatsby
    • Create a project with Gatsby CLI
    • Utilize a starter
  • Creating Static Pages
    • Create a page
    • Use Static Assets
    • Create components using React
  • Layouts and Styling
    • Add Global CSS styles
    • Utilize CSS modules
    • Use a CSS-in-JS library
    • Link between pages using <Link>
    • Add a layout component
  • Gatsby Architecture
    • Data sources, nodes and GraphQL
    • Source plugins and transformer plugins
    • Understand Gatsby's build process
  • Querying Data with GraphQL
    • Understand GraphQL
    • Make GraphQL queries from pages
    • Render the data received
    • Deal with errors and delays
    • Static queries vs page queries
    • Issue queries from components using <StaticQuery>
    • Use the useStaticQuery ook
  • Querying Further Data Sources
    • Query data from the Filesystem
    • Understand the nodes Namespace and storage model
    • Query image data
    • Connect to a Headless CMS
  • Working with Images
    • Responsive design considerations for images
    • Bandwidth and load time considerations
    • Query for images using GraphQL
    • Perform image transformations
    • Image rendering
  • Working with Markdown
    • Build a blog
    • Transform markdown to HTML
    • Introduce MDX
    • Use MDX
  • Programmatically Creating Pages
    • Gatsby's bootstrap phase
    • Understand gatsby-node and Gatsby's APIs
    • Create "Slugs" for generated pages
    • Generate the pages
  • Paginating Through Lists
    • Pagination in GraphQL
    • Query a list
    • Render a paginated list
  • Moving to Production
    • Create a production build
    • Serve the production build
    • Host the site
    • Deploy to Netlify
  • Improving Progressive Web App (PWA) Support
    • Explain PWAs
    • Run a Lighthouse Audit
    • Add a Manifest
    • Add offline support with a service worker
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.