English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2h 45m | 485 MB
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.
Topics include:
- 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)
Table of Contents
Introduction
1 Modernize the web with Gatsby
2 What you should know
Setting Up Gatsby for the First Time
3 Gatsby A static site generator
4 Initial setup
5 Install a Gatsby starter
6 Start and stop your local Gatsby site
Breaking Down a Gatsby Site
7 Start from scratch
8 Explore the project
9 Core Gatsby principles
10 Challenge Change the site title and other content
11 Solution Change the site title and other content
Pages Components and Styles
12 Static pages
13 Static assets
14 Components and how to use them
15 The layout component
16 CSS in Gatsby Multiple approaches
17 Example CSS modules and modern CSS
18 Challenge Create a navigation component
19 Solution Create a navigation component
Plugins and Transformations
20 Extend Gatsby with plugins
21 Plugin options
22 Transformation plugins
23 Challenge Add two new images to a page
24 Solution Add two new images to a page
Data
25 Gatsby and GraphQL
26 Two types of GraphQL queries
27 Challenge Make a dynamic navigation menu
28 Solution Make a dynamic navigation menu
Create Pages Dynamically
29 Transform data into pages
30 Make data available through transformers
31 Process transformed data
32 Generate pages from markdown files
33 Create paginated index pages
34 Challenge Add paginated tag indexes
35 Solution Add paginated tag indexes
Going Live
36 Build the production site
37 Add PWA and offline functionality
Conclusion
38 Further information
Resolve the captcha to access the links!