DOCSEARCHbyAlgolia
Submit Docs

Gatsby

repository·master·Indexed 13 days ago

https://github.com/gatsbyjs/gatsby

A React-based framework for building high-performance websites and apps by combining dynamic site control with static-site generation.

Tokens
558.7K
Snippets
1.8K
Records
2.6K
Agent score
99%

What's inside Gatsby

  1. Overview of media handling in Gatsby

    master

    Gatsby offers several distinct patterns for managing images, video, and files, depending on whether you need static assets, dynamic image processing, or GraphQL integration.

    Common approaches include:

    • Imports: Using standard JavaScript imports to bring assets into your files.
    • Static Folder: Placing assets in a dedicated static directory for direct access.
    • gatsby-plugin-image: Using dynamic GraphQL queries to optimize images, prevent bloat, and implement advanced loading patterns.

  2. Overview of the DatoCMS Benchmark

    master

    The DatoCMS Benchmark is a performance testing tool designed to simulate a real-world Gatsby site by sourcing data from a DatoCMS space.

    Key behaviors:

    • Data Sourcing: It queries title, body, and cover image fields from DatoCMS.
    • Page Generation: It creates individual article pages and a homepage.
    • Component Structure: It uses a common Layout component (located in src/components) shared between the homepage and article pages.
    • Simulating Code Changes: The benchmark allows for simulating site-wide code changes by swapping between different layout implementations (layout_1.js and layout_2.js).

  3. Overview of gatsby-plugin-manifest features

    master

    The gatsby-plugin-manifest implements the Web App Manifest specification, allowing users to add your site to their home screen as a Progressive Web App (PWA).

    Key features include:

    • Auto icon generation: Automatically creates multiple icon sizes from a single source image.
    • Favicon support: Handles standard favicon configuration.
    • Legacy icon support: Provides support for iOS-specific icon requirements.
    • Cache busting: Ensures users receive updated manifests and icons.
    • Localization: Supports unique manifests for path-based localization (e.g., for i18n sites).

  4. Overview of gatsby-source-wordpress

    master

    The gatsby-source-wordpress plugin allows you to source data from WordPress in a scalable and efficient manner using WPGraphQL.

    It works by merging the WPGraphQL schema and data with the Gatsby schema and Node model. This integration enables several key features:

    • Incremental builds: Only updated data is processed.
    • Fast builds: Efficient caching of WordPress data.
    • CMS Previews: Seamless integration for previewing content changes.

  5. Understand Gatsby's core terminology

    master

    This glossary provides a high-level overview of common terms used when working with Gatsby. Key concepts include:

    • Build: The process of packaging code and content into a website (often called build time).
    • Client-side: Operations performed by the user's browser. In Gatsby, this is critical when using packages that rely on browser-only objects like window or navigator.
    • Client-side rendering: Gatsby uses React and @reach/router to enhance HTML pages compiled at build time, allowing for page navigation without full reloads (enabling preloading and pre-fetching).
    • Component: Independent, reusable chunks of code powered by React. Pages and templates are examples of components.
    • Config: The gatsby-config.js or gatsby-config.ts file which contains website information, such as metadata for SEO.
    • Data Source: The origin of your content (e.g., Headless CMS, Markdown, JSON, or YAML files), typically integrated via source plugins.
    • Deferred Static Generation (DSG): A rendering option that allows you to defer non-critical page generation until a user requests the page, which helps speed up build times.
    • Development Environment: The environment used during coding, accessed via the CLI using gatsby develop. It provides enhanced error reporting and debugging tools.

  6. Choose a styling approach for your Gatsby site

    master

    Gatsby supports multiple styling methodologies without enforcing a specific preference. You can choose from three primary approaches depending on your project needs:

    1. Global CSS Files: The traditional method where CSS rules are declared globally. Styles are applied based on standard CSS specificity and inheritance rules.
    2. Modular Stylesheets (CSS Modules): CSS rules are written traditionally but imported into JavaScript files. This approach scopes styles locally to specific components, preventing unintended side effects. This is supported out-of-the-box in Gatsby.
    3. CSS-in-JS: Locally-scoped CSS written directly within JavaScript. This enables dynamic styling based on component state or props but requires third-party libraries (e.g., styled-components or Emotion).

  7. Understand the benefits of porting from Create React App to Gatsby

    master

    While both Create React App (CRA) and Gatsby use React to simplify application setup, Gatsby provides several architectural advantages for production-ready sites:

    Performance Optimizations

    Gatsby includes several built-in performance features that work out of the box:

    • Route-based code splitting: Automatically splits code by route.
    • Resource pre-loading: Pre-loads the next resources to speed up navigation.
    • gatsby-link: Uses an intersection observer to preload linked pages when they enter the viewport, making transitions feel instant.
    • gatsby-plugin-image: Automatically creates optimized image versions in multiple sizes, uses lazy loading via intersection observer, and performs smooth transitions from low-resolution to high-resolution images.

    Expansive Plugin Ecosystem

    Gatsby is compatible with all standard react packages used in CRA but allows you to extend functionality using hundreds of Gatsby plugins for features like SEO, RSS feeds, and responsive images.

    Unified GraphQL Data Layer

    Gatsby plugins can ingest data from various sources (APIs, CMSs, or the filesystem) and stitch them into a single, unified GraphQL data layer. This allows you to query data from disparate sources throughout your application using a consistent syntax.

    Note: GraphQL is not mandatory; you can manage data in Gatsby without it.

  9. Understand Gatsby project file structure

    master

    A standard Gatsby project contains several key configuration files and directories that control how the site is built and extended:

    • src/: The convention for source code. Contains front-end code like headers, footers, and page templates.
    • gatsby-config.js: The main configuration file. Use this to specify site metadata (title, description) and include Gatsby plugins.
    • gatsby-node.js: The entry point for Gatsby Node APIs. Use this to customize or extend the site build process.
    • gatsby-browser.js: The entry point for Gatsby browser APIs. Use this to customize settings that affect the browser.
    • gatsby-ssr.js: The entry point for Gatsby server-side rendering APIs. Use this to customize server-side rendering settings.
    • package.json: The Node.js manifest file containing project metadata and dependency information.
    • node_modules/: Directory containing installed npm packages.
    • .prettierrc: Configuration for Prettier code formatting.

  10. Explore gatsby-source-wordpress features

    master

    The gatsby-source-wordpress plugin provides several core capabilities for integrating WordPress content into Gatsby sites:

    • Build Caching: Optimizes build times by caching data between builds.
    • Preview Mode: Allows viewing of unpublished content.
    • GraphQL Schema Merging: Integrates WordPress data into the Gatsby GraphQL schema.
    • Media/File Processing: Handles images and files from WordPress.
    • Gatsby Links in HTML: Ensures WordPress-generated HTML uses Gatsby's optimized <Link> component.
    • Node Limiting: Allows limiting the number of nodes fetched during development to improve performance.
    • WP Compatibility: Ensures compatibility with various WordPress configurations.
    • Security: Provides secure data fetching and handling.

  11. Use gatsby-graphiql-explorer features

    master

    The gatsby-graphiql-explorer package extends the standard GraphiQL IDE with several developer-focused features:

    • GraphiQL Explorer: An interactive plugin that allows you to visually build and interact with your GraphQL schema.
    • GraphiQL Exporter: A tool to generate ready-to-run code snippets for your queries.
    • Content Refreshing: A dedicated button to trigger Refreshing Content within the IDE.
    • Implied Fragments Support: Provides autocompletion, validation, and operation execution for fragments, whether they are user-provided, part of the core, or provided by plugins.

  12. Understand the Gatsby Cloud platform components

    master

    Gatsby Cloud is a custom cloud infrastructure designed to build and host Gatsby sites using intelligent caching for incremental builds. The platform is organized into a hierarchy of Dashboard, Workspaces, Members, and Sites:

    • Dashboard: The central interface for managing account settings, switching Workspaces, managing members, searching sites, and triggering builds/previews.
    • Workspaces: A collection of sites grouped under a single name, associated with specific Members and a billing plan (free or paid).
    • Members: Individuals (including the owner) invited to collaborate within a Workspace. Members are assigned roles and can have access to all sites in a Workspace or a specific scope.
    • Sites: Individual Gatsby projects. Sites can be connected to a Content Management System (CMS) for sourcing content and to a hosting service for deployment.