Cover image for Gatsby: The Definitive Guide

Gatsby: The Definitive Guide

Release Date: 2021/09/01
ISBN: 9781492087502
Topic:
0%
30
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Get the definitive guide on Gatsby, the JavaScript framework for building blazing-fast websites and applications. Used by Nike, Costa Coffee, and other companies worldwide, Gatsby is emerging as one of the key technologies in the Jamstack (JavaScript, APIs, and markup) ecosystem. With this comprehensive guide, you'll learn how to architect, build, and deploy Gatsby sites independently or with CMSs, commerce systems, and other data sources.

Author Preston So begins by showing you how to set up a Gatsby site from scratch. From there, you'll learn ways to use Gatsby's declarative rendering and GraphQL API, build complex offline-enabled sites, and learn how to continuously deploy Gatsby sites on a variety of platforms, including Gatsby Cloud.

  • Discover how Gatsby integrates with many data sources and plug-ins
  • Set up, configure, and architect Gatsby sites using Gatsby's CLI, React, JSX, and GraphQL with high performance out of the box
  • Build an independent Gatsby site based on Markdown and data- and content-driven Gatsby sites that integrate with CMSs and commerce platforms
  • Deploy Gatsby sites on a variety of platforms with full CI/CD and test coverage, including Netlify, Vercel, and Gatsby Cloud

Table of Contents

  1. Preface
    1. Who Should Read This Book
    2. Why I Wrote This Book
    3. Navigating This Book
    4. Conventions Used in This Book
    5. Using Code Examples
    6. O’Reilly Online Learning
    7. How to Contact Us
    8. Acknowledgments
  2. I. Elementary Gatsby
  3. 1. Gatsby Fundamentals
    1. What Is Gatsby?
    2. Gatsby Pages and Components
    3. Gatsby’s Data Layer: GraphQL and Source Plugins
    4. The Gatsby Ecosystem
    5. Why Gatsby?
    6. Performance
    7. Accessibility
    8. Developer Experience
    9. Security
    10. Gatsby and the Jamstack
    11. Static Site Generators
    12. Distributed Content and Commerce
    13. The Jamstack
    14. JavaScript in Gatsby
    15. Command-Line Interfaces
    16. Modular JavaScript
    17. React in Gatsby
    18. Declarative Rendering with JSX
    19. React Components
    20. React Props
    21. Getting Going with Gatsby
    22. The Command Line
    23. Installing the Gatsby CLI
    24. Creating Your First Gatsby Site
    25. Starting a Development Server
    26. Creating a Production Build
    27. Serving the Production Build Locally
    28. Conclusion
  4. 2. Core Elements of Gatsby
    1. The Gatsby CLI
    2. Installing and Configuring the Gatsby CLI
    3. gatsby new
    4. gatsby develop
    5. gatsby build
    6. gatsby serve
    7. Other Useful Gatsby CLI Commands
    8. Starters
    9. Official and Community Starters
    10. Modifying Starters
    11. Creating a New Project from a Starter
    12. The gatsby-config.js File
    13. Gatsby Pages and Components
    14. Pages
    15. Components
    16. Linking Between Pages
    17. The Layout Component
    18. Using CSS in Gatsby
    19. Global Styling
    20. Modular Styling with CSS Modules
    21. CSS-in-JavaScript
    22. Extending Gatsby with Plugins
    23. Installing Gatsby Plugins
    24. Loading Local Plugins
    25. Conclusion
  5. 3. Adding Features to Gatsby Sites
    1. Pages and Routing in Gatsby
    2. Rehydration
    3. Static Pages
    4. Hybrid Application Pages
    5. Client-Only Routes
    6. Differences Between Gatsby Sites and React Applications
    7. Adding Forms
    8. Basic Forms
    9. Handling Form Submissions
    10. Adding Localization and Internationalization
    11. gatsby-plugin-i18n
    12. react-intl
    13. react-i18next
    14. Adding an XML Sitemap
    15. Adding a 404 Page
    16. Adding Analytics
    17. Conclusion
  6. II. Data in Gatsby
  7. 4. GraphQL and the Gatsby Data Layer
    1. GraphQL Fundamentals
    2. GraphQL Queries
    3. GraphQL Fields
    4. GraphQL Arguments
    5. GraphQL Query Variables
    6. GraphQL Directives
    7. GraphQL Fragments
    8. GraphQL Schemas and Types
    9. The Gatsby Data Layer
    10. GraphiQL
    11. GraphiQL Explorer
    12. GraphQL Playground
    13. Page and Component Queries
    14. Page Queries
    15. Component Queries with StaticQuery
    16. Component Queries with the useStaticQuery Hook
    17. Conclusion
  8. 5. Source Plugins and Sourcing Data
    1. Using Source Plugins
    2. Installing Source Plugins
    3. Setting Up Source Plugins
    4. Using Environment Variables with Source Plugins
    5. Sourcing Data from the Filesystem
    6. Setting Up gatsby-source-filesystem
    7. Working with Files from the Filesystem
    8. Working with Multiple Directories in the Filesystem
    9. Sourcing Data from Database Systems
    10. MongoDB
    11. MySQL
    12. PostgreSQL
    13. Amazon Redshift, SQLite3, Oracle, and MSSQL
    14. Sourcing Data from Third-Party SaaS Services
    15. Airtable
    16. AWS DynamoDB
    17. Google Docs
    18. Sourcing Data from CMSs and Commerce Systems
    19. Contentful
    20. Drupal
    21. Netlify CMS
    22. Prismic
    23. Sanity
    24. Shopify
    25. WordPress
    26. Sourcing Data from Other Sources
    27. Sourcing Data from GraphQL APIs
    28. Sourcing Data from JSON and YAML
    29. Conclusion
  9. 6. Programmatic Page Creation
    1. Traversing GraphQL Data in Pages
    2. Working with Transformer Plugins
    3. Adding Transformer Plugins
    4. Transforming Markdown into Data and HTML
    5. Adding a List of Markdown Pages
    6. Working with gatsby-node.js
    7. Creating Slugs for Markdown Pages
    8. Adding a Template
    9. Adding Markdown Pages with createPages
    10. Conclusion
  10. 7. Assets in Gatsby
    1. Working with Assets
    2. Types of Assets in Gatsby
    3. Importing Assets Directly with Webpack
    4. Querying for Assets with gatsby-source-filesystem
    5. Importing Assets with the static Folder
    6. Working with Images
    7. The gatsby-plugin-image Plugin (Gatsby 3.0)
    8. The gatsby-image Component (Gatsby 2.0)
    9. Working with Videos
    10. Creating Custom Components for Hosted Videos
    11. Querying Videos from Markdown Using GraphQL
    12. Self-Hosting Your Own Videos
    13. Working with Fonts
    14. Adding Local Fonts
    15. Adding Web Fonts
    16. Conclusion
  11. 8. Adding Data-Driven Features to Gatsby Sites
    1. Adding Site Search
    2. Implementing Site Search with Algolia
    3. Configuring gatsby-plugin-algolia
    4. Querying Pages with GraphQL for Indexing
    5. Adding a Commenting System
    6. Adding Taxonomy to Blog Posts
    7. Adding Tags and Querying for All Tags
    8. Adding a Tag Page Template
    9. Programmatic Tag Page Creation with gatsby-node.js
    10. Adding a Tag Index Page
    11. Adding Pagination
    12. Preparing for Pagination in Page Templates
    13. Generating Paginated Pages with gatsby-node.js
    14. Adding an RSS Feed
    15. Adding an RSS Feed to a Markdown Blog
    16. Adding an RSS Feed for Non-Markdown Content
    17. Adding Authentication
    18. Preparing for Authentication
    19. Creating Client-Only Routes
    20. Managing Private Routes
    21. Providing Privileged Data to Routes
    22. Conclusion
  12. III. Extending Gatsby
  13. 9. Gatsby Plugins and Starters
    1. Creating Gatsby Starters
    2. Gatsby Starter Requirements
    3. Enabling Starter Configuration
    4. Starter Performance and Accessibility
    5. Licensing, Testing, and Releasing Starters
    6. Creating Gatsby Plugins
    7. Plugin Nomenclature
    8. Initializing a New Plugin Project
    9. Plugin Configuration with Options
    10. Interacting with Gatsby Lifecycle APIs
    11. Creating Source Plugins
    12. Initializing Projects for Source Plugin Development
    13. Installing the Source Plugin
    14. Creating GraphQL Nodes
    15. Querying and Sourcing Remote Data
    16. Establishing Foreign Key Relationships
    17. Using Plugin Options to Allow Customization
    18. Creating Transformer Plugins
    19. Reviewing an Example: gatsby-transformer-yaml
    20. Ensuring Needed Data Is Sourced
    21. Transforming Nodes
    22. Establishing the Transformer Relationship
    23. Creating New Nodes from Derived Data and Querying
    24. Publishing and Maintaining Plugins
    25. Submitting Plugins to the Gatsby Plugin Library
    26. Maintaining Plugins
    27. Conclusion
  14. 10. Gatsby Themes
    1. Gatsby Themes in Context
    2. Differences from Plugins and Starters
    3. Deciding Between Using and Creating a Theme
    4. Using Gatsby Themes
    5. Starting a New Site from a Theme
    6. Using a Theme in an Existing Site
    7. Using Multiple Gatsby Themes
    8. Creating Gatsby Themes
    9. Creating New Themes
    10. Gatsby Theme Conventions
    11. Converting Starters into Themes
    12. Theme Shadowing
    13. Theme Shadowing in gatsby-theme-blog
    14. Shadowing Other Files
    15. Extending Shadowed Files
    16. Conclusion
  15. IV. Production Gatsby
  16. 11. Debugging and Testing Gatsby
    1. Testing Gatsby
    2. Unit Testing with Jest
    3. Testing React Components
    4. Visual Testing with Storybook
    5. End-to-End Testing with Cypress
    6. Debugging Gatsby
    7. Debugging Static Builds
    8. Debugging the Build Process
    9. Debugging Server-Side Rendering Issues
    10. Debugging Cache Issues
    11. Debugging Asynchronous Lifecycle Methods
    12. Conclusion
  17. 12. Deploying Gatsby
    1. Environment Variables
    2. Defining Environment Variables
    3. Using Environment Variables
    4. Using Path and Asset Prefixes
    5. Path Prefixes
    6. Asset Prefixes
    7. Deploying to Hosting Services
    8. Netlify
    9. Vercel
    10. Gatsby Cloud
    11. AWS Amplify
    12. Azure
    13. Amazon S3
    14. Heroku
    15. Firebase
    16. GitHub Pages
    17. Conclusion
  18. V. Advanced Gatsby
  19. 13. Advanced Topics in Gatsby
    1. Creating Recipes
    2. Infrastructure as Code
    3. Automating Site Operations with Recipes
    4. Adding Components to Markdown with MDX
    5. Getting Started with MDX
    6. Creating MDX Pages
    7. Importing Components into MDX Files
    8. Customizing Markdown Components
    9. Schema Customization
    10. Explicitly Defining Data Types
    11. Implementing the createResolvers API
    12. Creating Custom Interfaces and Unions
    13. Custom Gatsby Configuration
    14. Babel
    15. Babel Plugin Macros
    16. Webpack
    17. Customizing html.js
    18. ESLint
    19. Proxying API Requests
    20. Performance Optimization
    21. Caching Gatsby Sites
    22. Adding a Progressive Web App Manifest File
    23. Adding Offline Support with Service Workers
    24. Profiling with React Profiler
    25. Performance Tracing for Gatsby Builds
    26. Conditional Page Builds
    27. Conclusion
  20. 14. Gatsby Internals
    1. APIs and Plugins in Gatsby
    2. Loading Configured Plugins
    3. The apiRunInstance Object
    4. Executing Plugins and Injecting Arguments
    5. The Gatsby Build Lifecycle
    6. Node Creation
    7. Schema Generation
    8. Schema Inference
    9. Schema Root Fields and Utility Types
    10. Page Creation
    11. Query Extraction and Execution
    12. Writing Out Pages
    13. Bundling Gatsby
    14. Generating the JavaScript Bundle
    15. The production-app.js file
    16. Enabling Code Splitting and Prefetching
    17. Conclusion
  21. A. The Gatsby CLI
    1. Gatsby Cheat Sheet
    2. Common CLI Commands
    3. Quick Start Commands
    4. Helpful File Definitions
    5. Top Documentation Pages
    6. Gatsby CLI Commands
    7. new
    8. develop
    9. build
    10. serve
    11. info
    12. clean
    13. plugin
    14. repl
  22. B. Gatsby Component APIs
    1. <Link />
    2. <Link /> Usage
    3. Active Styles for <Link />
    4. Working with Props in <Link />
    5. navigate
    6. gatsby-plugin-image
    7. StaticImage
    8. GatsbyImage
    9. Image Options
    10. Helper Functions
  23. C. Gatsby Configuration APIs
    1. Config APIs
    2. siteMetadata
    3. plugins
    4. flags
    5. pathPrefix
    6. polyfill
    7. mapping
    8. proxy
    9. developMiddleware
    10. Node APIs
    11. createPages
    12. createPagesStatefully
    13. createResolvers
    14. createSchemaCustomization
    15. onCreateBabelConfig
    16. onCreateDevServer
    17. onCreateNode
    18. onCreatePage
    19. onCreateWebpackConfig
    20. onPostBootstrap
    21. onPostBuild
    22. onPreBootstrap
    23. onPreBuild
    24. onPreExtractQueries
    25. onPreInit
    26. pluginOptionsSchema
    27. preprocessSource
    28. resolvableExtensions
    29. setFieldsOnGraphQLNodeType
    30. sourceNodes
    31. unstable_onPluginInit
    32. unstable_shouldOnCreateNode
  24. Index
3.134.85.87