Introduction
Modernize the web with Gatsby
()
What you should know
()
1. Setting Up Gatsby for the First Time
Gatsby: A static site generator
()
Initial setup
()
Install a Gatsby starter
()
Start and stop your local Gatsby site
()
2. Breaking Down a Gatsby Site
Start from scratch
()
Explore the project
()
Core Gatsby principles
()
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 Transformations
Extend Gatsby with plugins
()
Plugin options
()
Transformation plugins
()
Challenge: Add two new images to a page
()
Solution: Add two new images to a page
()
5. Data
Gatsby and GraphQL
()
Two types of GraphQL queries
()
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
()
Process transformed data
()
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
()
Ex_Files_Learning_Gatsby.zip
(30 KB)