Skip to main content
中文文档
中文教程
插件
特色
博客
实例展示
贡献
首页
Docs
Reference Guides
Porting to Gatsby
Reference Guides
Porting to Gatsby
In this section:
Porting from Create React App to Gatsby
Porting an HTML Site to Gatsby
Edit this page on GitHub
Previous
Creating Prefixed 404 Pages for Different Languages
Next
Porting from Create React App to Gatsby
Expand All
Documentation
Introduction
Quick Start
Plugin Library
Starter Library
Awesome Gatsby Resources
Recipes
Pages and Layouts
Styling with CSS
Working with Starters
Working with Themes
Sourcing Data
Querying Data
Working with Images
Transforming Data
Deploying Your Site
Reference Guides
Preparing Your Environment
Browser Support
Gatsby on Windows
Gatsby on Linux
Configuring CA Certificates
A/B Testing
A/B Testing with Google Analytics & Netlify
Deploying & Hosting
Preparing a Site for Deployment
Deploying to Netlify
Deploying to AWS Amplify
Deploying to S3 & CloudFront
Deploying to Aerobatic
Deploying to Heroku
Deploying to ZEIT Now
Deploying to GitLab Pages
Deploying to Render
Deploying to Surge
Deploying to IIS
Deploying to Firebase Hosting
Deploying to KintoHub
Adding a Path Prefix
How Gatsby Works with GitHub Pages
Multi-Core Builds
Asset Prefix
Custom Configuration
Customizing Babel.js Config
Using Babel Plugin Macros
Adding a Custom Webpack Config
Customizing html.js
Using Environment Variables
Using ESLint
Proxying API Requests
Images, Files & Video
Importing Assets Directly into Files
Using the Static Folder
Using gatsby-image
Working with Images in Gatsby
Preoptimizing Your Images
Working with Video
Importing Media Content
Working with GIFs
Working with Images in Markdown
Preprocessing External Images
Sourcing Content & Data
Using Gatsby Without GraphQL
Sourcing from the Filesystem
Sourcing from Databases
Sourcing from Hosted Services
Sourcing from Private APIs
Sourcing from (Headless) CMSs
Sourcing from Contentful
Sourcing from Netlify CMS
Sourcing from WordPress
Sourcing from Prismic
Sourcing from Drupal
Sourcing Content from JSON or YAML
Querying Your Data with GraphQL
Why Gatsby Uses GraphQL
GraphQL Query Options Reference
Running Queries with the GraphiQL UI
Creating & Modifying Pages
Querying Data in Pages with GraphQL
Querying Data in Components with StaticQuery
Querying Data in Components with the useStaticQuery Hook
Using GraphQL Fragments
Creating Slugs for Pages
Creating Pages from Data Programmatically
Using Third-Party GraphQL APIs
Adding Markdown Pages
Adding a List of Markdown Blog Posts
Using GraphQL Playground
Plugins
What is a Plugin?
Using a Plugin in Your Site
What You Don't Need Plugins For
Loading Plugins from Your Local Plugins Folder
Plugin Library
Creating Plugins
Naming a Plugin
Files Gatsby Looks for in a Plugin
Creating a Local Plugin
Creating a Source Plugin
Creating a Transformer Plugin
Submit to Plugin Library
Pixabay Image Source Plugin Tutorial
Remark Plugin Tutorial
Maintaining a Plugin
Themes
What are Gatsby Themes?
Getting Started
Using a Gatsby Theme
Using Multiple Gatsby Themes
Shadowing
Building Themes
Converting a Starter
Theme Composition
Conventions
Starters
Starter Library
Modifying a Starter
Creating a Starter
Styling Your Site
Using Layout Components
Standard, Global CSS Files
Component-Scoped CSS Modules
Enhancing with CSS-in-JS
Emotion
Styled-Components
CSS Libraries & Frameworks
Typography.js
Using Sass
Using PostCSS
Using TailwindCSS
Using Bulma
Using Theme UI
Adding Components to Markdown with MDX
Getting Started with MDX
Writing Pages
Importing and Using Components in MDX
Customizing Markdown Components
Programmatically Creating Pages
Using MDX Plugins
Markdown Syntax
Adding Testing
Unit Testing
Testing Components with GraphQL
End-to-end Testing
Testing CSS-in-JS
Testing React Components
Visual Testing with Storybook
Debugging Gatsby
Debugging HTML Builds
Debugging Replace Renderer API
Debugging the Build Process
Debugging Cache Issues
Tracing Gatsby Builds
Debugging Async Lifecycles
Troubleshooting Common Errors
Adding App and Website Functionality
Linking Between Pages
Adding Search
Adding Search with Algolia
Adding Search with elasticlunr
Adding Search with js-search
Adding Analytics
Adding Authentication
Adding Forms
Adding React Components
Building a Contact Form
Adding a 404 Page
Adding an SEO Component
Adding Tags & Categories to Blog Posts
Adding Pagination
Adding Comments
Creating a Sitemap
Adding an RSS Feed
Adding Page Transitions
Adding Page Transitions with gatsby-plugin-transition-link
Making Your Site Accessible
Routing
@reach/router and Gatsby
Location Data from Props
Creating Dynamic Navigation
Client-only Routes & User Authentication
Build Time and Client-side Data Fetching
Using Client-Side Only Packages
Building an E-commerce Site
Building an E-commerce Site with Shopify
Processing Payments with Stripe
Processing Payments with Square
Improving Performance
Supporting Progressive Web Apps (PWAs)
Caching
Using Local HTTPS
Auditing with Lighthouse
Adding a Manifest File
Adding Offline Support with a Service Worker
Adding Page Metadata
Search Engine Optimization (SEO)
Optimizing Site Performance with Guess.js
Scaling Issues
Localization & Internationalization with Gatsby
Creating Prefixed 404 Pages for Different Languages
Porting to Gatsby
Porting from Create React App to Gatsby
Porting an HTML Site to Gatsby
Gatsby API
Gatsby Themes
Gatsby Link
Gatsby Image
Gatsby Config
Gatsby Browser APIs
Gatsby SSR APIs
API Files
gatsby-config.js
gatsby-browser.js
gatsby-node.js
gatsby-ssr.js
Actions
GraphQL API
Gatsby Node APIs
Gatsby Node Helpers
Node Model
Node Interface
Customizing the GraphQL Schema
API Philosophy
Releases & Migration
v2 Release Notes
v1 Release Notes
Migrating from v1 to v2
Migrating from v0 to v1
Upgrade for Minor or Patch Releases
Conceptual Guide
The Gatsby Core Philosophy
Gatsby Project Structure
Plugins, Themes, & Starters
Overview of the Gatsby Build Process
Building with Components
Lifecycle APIs
Gatsby Magic
React Hydration
PRPL Pattern
GraphQL Concepts
Security in Gatsby
Theme Shadowing
Gatsby Internals
How APIs/Plugins Are Run
Node Creation
Schema Generation
Building the GqlType
Building the Input Filters
Querying with Sift
Connections
Page Creation
Page -> Node Dependencies
Node Tracking
Internal Data Bridge
Queries
Query Extraction
Query Execution
Normal vs StaticQueries
Write out Pages
Webpack & SSR
Building the JavaScript App
Page HTML Generation
Code Splitting and Prefetching
Resource Handling & Service Workers
Data Storage (Redux)
Build Caching
Terminology
Using Gatsby Professionally
Introduction - Convincing Others to Use Gatsby
Your First Professional Project
Winning Over Different Stakeholders
Developers
Engineering Leaders
Marketers
Executives
Clients
Content Creators
Spreading Gatsby In Different Types of Organizations
As a Freelancer
Inside an Agency
Lower Bids, More Profit
Faster Recruiting
Sanitize Your Stack
Why Agencies Go Gatsby-Only
Inside a Company
Inside an Enterprise (Large Company)
Answering IT/Security Questions
Setting Up Gatsby Without Gatsby New
Best Practices for Orgs
Sharing Components Across Websites
Component Libraries
Making Components Discoverable
How Gatsby Boosts Your Career
Contributing
Community
How to Contribute
Partnering With Gatsby
Integrating & Partnering For Vendors
Agency Partnership Program
Commands (Gatsby CLI)
Cheat Sheet
Glossary
Continuous Deployment
Decoupled Drupal
GraphQL
Headless CMS
Headless WordPress
JAMStack
Node.js
React
Static Site Generator
webpack
Gatsby Telemetry
Gatsby REPL
Docs
Tutorials
Plugins
Blog
Showcase
