In this episode, you will learn how to create pages for your content lists in Gatsby. You will learn about the gatsby-awesome-pagination plugin and how it can be installed and configured on your Gatsby site to create pages of content. You will also learn how to break your pager off into a separate reusable component so it can be added in multiple places throughout your Gatsby site.
Introduction To Gatsby
In the last episode you learned how to your previously created Gatsby site with Drupal content and to Netlify. In this episode, you learn how to use the Drupal 8 Build Hooks module to trigger automatic rebuilds on your Netlify website. You will learn how to trigger a rebuild when content is saved, when Drupal cron runs, or upon manual request from within your Drupal website.
In this episode, you will learn how to take your previously created Gatsby site with Drupal content and deploy it to Netlify. Netlify is a great hosting service that allows you to get started hosting your Gatsby site for free. It also provides automated build tools that will build a production version of your Gatsby site from a Git repository.
In this episode, you will learn how to set up Gatsby Live Preview with Drupal on a local development environment. We will walk through how to install and configure the Gatsby Drupal module as well as how to get the module talking to your Gatsby development site. Using this combination, you will be able to immediately preview your content on your Gatsby site after editing the content on your Drupal site, all within your local development environment.
In this episode, you will learn how to set up Gatsby Live Preview with Drupal using Gatsby Cloud. We will walk through how to install and configure the Gatsby Drupal module as well as how to get your Gatsby site working in Gatsby cloud. Using this combination, you will be able to immediately preview your content on your Gatsby site after editing the content on your Drupal site.
In this episode, you will learn about the Gatsby Image component and how it can be used to better process and display images on your Gatsby site. Properly loading and displaying images can be a pain to make sure you get right on your website. Gatsby makes it easy by providing an image component and some additional plugins. After watching this video, you will have your images loading efficiently with a nice blur up effect.
In this episode, we pick up where we left off last time and cover how to create lists of content on your Gatsby site by pulling data from a Drupal 8 website. You will learn:
- How to filter and sort your GraphQL queries using GraphiQL explorer
- How to create a list of your content
- How to break up your list page into subcomponents
In this episode, we learn how to set up your Gatsby website to pull data from Drupal. We will cover:
- Setting up JSON:API on your Drupal site
- Installing the gatsby-source-drupal plugin
- Configuring the gatsby-source-drupal plugin
- Use GraphiQL to view your Drupal data
- Load Article nodes using gatsby-node.js
- Create Article Template to pull in Article data
In this episode, we dive into components a bit more and learn about Layout components as well as create our own Header component. We also look at how to link between pages on your GatsbyJS website. This episode covers:
- Components and subcomponents
- Props in React
- The Gatsby Link component
In this episode, we introduce the Daily Dose of Gatsby and walk through spinning up a new Gatsby site. We go over some important Gatsby concepts and files to provide an overview of how the Gatsby build process works. Some of the topics we cover in this episode include:
- Creating a new Gatsby Site
- Learning about JSX
- Overview of page components
Here is a link to the Gatsby Docs page on getting your development environment set up.