Skip to content

Latest commit

 

History

History

examples

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
client-only-paths
client-only-paths
 
 
creating-source-plugins
creating-source-plugins
 
 
data-fetching
data-fetching
 
 
ecommerce-tutorial-with-stripe
ecommerce-tutorial-with-stripe
 
 
feed
feed
 
 
functions-airtable-form
functions-airtable-form
 
 
functions-auth0
functions-auth0
 
 
functions-basic-form
functions-basic-form
 
 
functions-google-gmail
functions-google-gmail
 
 
functions-google-oauth
functions-google-oauth
 
 
functions-google-sheets
functions-google-sheets
 
 
functions-hello-world
functions-hello-world
 
 
functions-sendgrid-email
functions-sendgrid-email
 
 
functions-twilio-text
functions-twilio-text
 
 
gatsbygram
gatsbygram
 
 
graphql-reference
graphql-reference
 
 
hn
hn
 
 
image-processing
image-processing
 
 
recipe-createPage
recipe-createPage
 
 
route-api
route-api
 
 
simple-auth
simple-auth
 
 
sitemap
sitemap
 
 
styleguide
styleguide
 
 
using-asciidoc
using-asciidoc
 
 
using-contentful
using-contentful
 
 
using-css-modules
using-css-modules
 
 
using-csv
using-csv
 
 
using-cypress
using-cypress
 
 
using-drupal
using-drupal
 
 
using-emotion-prismjs
using-emotion-prismjs
 
 
using-emotion
using-emotion
 
 
using-excel
using-excel
 
 
using-faker
using-faker
 
 
using-fragments
using-fragments
 
 
using-gatsby-head
using-gatsby-head
 
 
using-gatsby-image
using-gatsby-image
 
 
using-gatsby-script
using-gatsby-script
 
 
using-gatsby-source-graphql
using-gatsby-source-graphql
 
 
using-gatsby-with-json-yaml
using-gatsby-with-json-yaml
 
 
using-gatsby-without-graphql
using-gatsby-without-graphql
 
 
using-graphql-typegen
using-graphql-typegen
 
 
using-hjson
using-hjson
 
 
using-i18n
using-i18n
 
 
using-javascript-transforms
using-javascript-transforms
 
 
using-jest
using-jest
 
 
using-js-search
using-js-search
 
 
using-jss
using-jss
 
 
using-loadable-components
using-loadable-components
 
 
using-local-plugins
using-local-plugins
 
 
using-markdown-pages
using-markdown-pages
 
 
using-mdx
using-mdx
 
 
using-medium
using-medium
 
 
using-mobx
using-mobx
 
 
using-mongodb
using-mongodb
 
 
using-multiple-local-plugins
using-multiple-local-plugins
 
 
using-multiple-providers
using-multiple-providers
 
 
using-multiple-themes
using-multiple-themes
 
 
using-page-loading-indicator
using-page-loading-indicator
 
 
using-page-transitions
using-page-transitions
 
 
using-path-prefix
using-path-prefix
 
 
using-plugin-options
using-plugin-options
 
 
using-prefetching-preloading-modules
using-prefetching-preloading-modules
 
 
using-reach-skip-nav
using-reach-skip-nav
 
 
using-redirects
using-redirects
 
 
using-redux-w-interaction-code-splitting
using-redux-w-interaction-code-splitting
 
 
using-redux-w-page-code-splitting
using-redux-w-page-code-splitting
 
 
using-redux
using-redux
 
 
using-remark-copy-linked-files
using-remark-copy-linked-files
 
 
using-remark
using-remark
 
 
using-sass
using-sass
 
 
using-shopify
using-shopify
 
 
using-sqip
using-sqip
 
 
using-styled-components
using-styled-components
 
 
using-styled-jsx
using-styled-jsx
 
 
using-styletron
using-styletron
 
 
using-stylus
using-stylus
 
 
using-type-definitions
using-type-definitions
 
 
using-typescript
using-typescript
 
 
using-vanilla-extract
using-vanilla-extract
 
 
using-video
using-video
 
 
README.md
README.md
 
 
build-all-examples.sh
build-all-examples.sh
 
 

README.md

Gatsby example websites

Example websites sit on one or the other end of the spectrum from very basic to complex/complete.

A basic example website should demonstrate a specific technology/plugin/technique to help other developers understand how to accomplish a task. They should be named using-* (e.g. using-sass).

Complex/complete websites are for studying how to build more complex websites.

Running an example site

  1. Enter one of the sites (e.g. cd gatsbygram)
  2. Install the dependencies for the site npm install
  3. Run the Gatsby development server gatsby develop

Checklist for building an example website

  • Free of errors
  • Has Google Analytics setup
  • Notifications setup to ping PRs on success/failure of build
  • For using-x websites, link to the site from the plugin README and to the plugin(s) from the website.

Building all the example websites

There's also a bash script in this folder called build-all-examples.sh, which automates the process of changing into each example folder, running npm i, and running gatsby build.

To execute this script, run the following commands from the terminal:

cd examples
./build-all-examples.sh > build-results.txt

🚨 WARNING: This script takes a LONG time to run. (Hours.)