Developing with Gatsby
Gatsby is a highly flexible static site generator that uses ReactJS under the hood. Pages are implemented as React components and the whole site is bundled as a single page app (SPA), but also uses a static site build process to render a static HTML version of the site. The result is a static site that is SEO friendly, but whose UI is hydrated into a React SPA once a page is loaded.
Gatsby is a Departure From Convention-based SSGs
Unlike Hugo and Jekyll, which build a static HTML website based on a specific structure of markdown files, Gatsby can be configured to work any way you want.
Out of the box, a vanilla Gatsby install will generate an HTML page for each
.js file located in its
src/pages directory. These
.js files should export a React component containing the markup for the page. However, Gatsby allows a developer to customize the behavior of the SSG at the build stage, using its
createPage API to create pages from a variety of data sources, such as different types of files or even data from a remote API.
Gatsby is Focused on Performance
One of Gatsby’s primary goals is to make it easy to create a performant website via a pre-configured, highly optimized asset pipeline. In this way, Gatsby can be seen as a successor to create-react-app with some additional features to enable static site generation.
…But Not at the Build Stage
It should be noted that Gatsby users typically experience slower build times compared to a site built with Hugo or Jekyll. Due to Gatsby’s flexibility, build times will vary widely, depending on your setup.
Choose Gatsby if you:
- Plan to use an advanced asset pipeline
- Want to build your templates with React
- Want full control over what pages are built by your SSG, and where.
- Are building a Progressive Web App as opposed to a content-driven website
Don’t choose Gatsby if you:
- Have a site with a large number of pages and want fast build times
- Don’t want to work with React or GraphQL
Currently in Beta
Caught a mistake or want to contribute to the docs? Edit this page on Github!