Learning Gatsby

Description

In this course, you will learn :

• How Gatsby can help you build performance-focused websites. Morten walks you through the process of installing and deactivating Gatsby.
• demonstrates how to use static pages, static assets, components, and CSS in Gatsby before delving into plugin options and adding images to a page. Morten discusses data in Gatsby, including how to create a page query, build an advanced GraphQL query, and add dynamic images.
• He walks you through the process of dynamically creating pages before showing you how to build the production site and add PWA and offline functionality.
• This course gets you started on your way to mastering Gatsby by including practical challenges and solutions in each chapter.

Syllabus :

1. Setting Up Gatsby for the First Time

• Gatsby: A static site generator
• Initial setup
• Configure helper tools
• Install a Gatsby starter
• Start and stop your local Gatsby site

 

2. Breaking Down a Gatsby Site

• Starting from scratch with exercise files
• Explore the project

 

3. Pages, Components, and Styles

• Static pages
• Static assets
• Components and how to use them
• The layout component
• CSS in Gatsby: Multiple approaches

 

4. Plugins and Images

• Extend Gatsby with plugins
• Plugin options
• Custom image features

 

5. Data

• Gatsby and GraphQL
• Make a page query
• Building an advanced GraphQL query
• Adding dynamic images

 

6. Create Pages Dynamically

• Transform data into pages
• Make data available through transformers
• Extend transformed data with new data
• Process transformed data
• Import Markdown files with a transformer
• Generate pages from Markdown files
• Create paginated index pages

 

7. Going Live

• Build the production site
• Add PWA and offline functionality

Show more