Gatsby Intro with Decoupled (Drupal) Website

This is a repo for presentations about an introduction to GatsbyJS, and creating a decoupled website using Drupal.

You can find the repo for the code here.

The final website is published here.

NOTE: This hasn't been deployed to GitHub using the Gatsby-GitHub plugin, so the links in the menu do not work correctly, you will need to add the slug for each to the end of the GitHub pages link for this site. This is so that I can include all the code needed for this repo AND the /public directory all in the same place. Sorry for any inconvenience. I'll create a list of links at the end of this readme.

It is in 5 parts.

Part 0

This is just the default installation of Gatsby.

Part 1

Part 1 In this part we look at some of the features of Gatsby that come as default, such as:

• <Link> Component
• <Image> Component
• <Layout> Component
• <SEO> Component
• Creating new pages

Part 2

Part 2 In this part we look at creating custom components and reorganising the <Header>, <Footer>, and <Layout> components. We also add support for SASS for styling the website.

Part 3

Part 3 In this part, we add support for Typography.JS We also begin to investigate using Styled Components rather than SCSS for styling.

Part 4

Part 4 This part deals with getting dynamic data from a Drupal website. We:

• build a listing page for Articles
• create a template to display individual articles

Links to Individual Pages

Part 1

• Part 1
• Link Component
• Image Component
• Layout Component
• SEO Component
• Creating New Pages

Part 2

• Part 2
• Menu Component

Part 3

• Part 3
• Typography.JS
• Styled Components

Part 4

• Part 4
• Articles Listing Page