This repository contains a demo gatsby site built for the "The great drupal + gatsby workflow" workshop held at Mountain Drupalcamp 2019 in Davos Switzerland.
Please note : The master branch is the starting point and does not have anything apart from the standard Gatsby setup. Progress through the branches to see stuff happening:
step-1
Adds the drupal gatsby source plugin: you will start seeing the drupal data in your grapiql playground.step-2
Add aStaticQuery
component to display a list of the recipes from drupal on the index page.step-3
Adds a page for each recipe using gatsby's node api and links to the recipes from the index pagestep-4
Adds CSS and Gatsby images for each recipe.
Checkout the production
branch to see the "finished" product, or follow along by checking out the step-*
branches.
-
Check out the gatsby's official guide to set up your local environment (git and Node.js)
-
Clone this repository
git clone https://github.com/wunderio/gatsby-workshop.git
-
Start developing.
Navigate into your new site’s directory and start it up. please note: We are using
npm
notyarn
in this example.cd gatsby-workshop/ npm install npm run develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000
!Note: You'll also see a second link:
http://localhost:8000/___graphql
. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.Open the
gatsby-workshop
directory in your code editor of choice and editsrc/pages/index.js
. Save your changes and the browser will update in real time!