Learning Gatsby

Learn how to use Gatsby, the modern JavaScript framework that builds on React and connects to WordPress and other GraphQL sources.

Introduction

• Modernize the web with Gatsby
• Prerequisites for this course

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
• Challenge: Change the site title and other content
• Solution: Change the site title and other content

3. Pages, Components, and Styles

• Static pages
• Static assets
• Components and how to use them
• The layout component
• CSS in Gatsby: Multiple approaches
• Example: CSS modules and modern CSS
• Challenge: Create a navigation component
• Solution: Create a navigation component

4. Plugins and Images

• Extend Gatsby with plugins
• Plugin options
• Example: Images in Gatsby
• Custom image features
• Challenge: Add two new images to a page
• Solution: Add two new images to a page

5. Data

• Gatsby and GraphQL
• Make a page query
• Building an advanced GraphQL query
• Adding dynamic images
• Challenge: Make a dynamic navigation menu
• Solution: Make a dynamic navigation menu

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
• Challenge: Add paginated tag indexes
• Solution: Add paginated tag indexes

7. Going Live

• Build the production site
• Add PWA and offline functionality

Conclusion

• Further information