This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Table of Contents
Introduction
Introduction
Jason Lengstorf introduces the course and outlines the main project, which is to build a blog from scratch in Gatsby.
Gatsby Overview
Jason highlights the problems Gatsby solves by eliminating boilerplate to help get developers started on building a site.
The Content Mesh
Jason discusses what the content mesh is, and what it means to be a static site generator that can build static files from many data sources.
Fast Websites by Default
Jason argues that Gatsby is set up with a default state that is secure and performant, while also giving developers control over its customization.
Website Setup
Blog Setup
Jason instructs students to clone the course repo and then installs dependencies. A small addition is then made to the blog.
Creating a New Page
Jason demonstrates how to create a new page in Gatsby by creating an About page for the website and then navigating to it.
Gatsby Link
Jason links the Home page and the About page together using Gatsby Links, which uses Reach Router to reload only part of the page.
Code Repo Branches
Jason explains the logistics of using the course repo, which contains branches that can be checked out for each step of the course.
Adding CSS with Emotion
Jason discusses how styling works in Gatsby and sets up Emotion, which will allow for writing CSS styles with JavaScript.
Styling the Main Layout
Jason strategizes about how to style the main blog layout by discussing management of styles at scale, fields a question about CSS design choices, and adds the styles to both pages.
Creating & Styling the Header
Jason creates and styles the header component for the site along with navigation links that signal the current page.
Gatsby & GraphQL
Jason briefly touches on the GraphQL playground and gives an overview of how Gatsby handles data retrieval.
Rendering Site Metadata
Jason adds metadata to the head section of the page by querying the config file using GraphQL with React Helmet.
Blog Posts
Rendering Components in MDX
Jason walks through the process of rendering full React components inside Markdown with MDX.
Building a Blog with MDX
Jason sets up two initial posts in the blog, gives the posts frontmatter in MDX, and sets up the path to the posts within the site.
Rendering a Post Listing
Jason builds a GraphQL query and a React hook to display a listing of all blog posts onto the home page.
Modifying Post Listing Display
Jason adds two new components, one for the post preview and one for the link to read the post. Styling rules are also added to improve the appearance of the post listing.
Generating Post Pages
Jason demonstrates how to create pages for each post on the site using gatsby-node and programmatic page generation.
Getting Post Data by Slug
Jason walks through getting the data for post pages by using variables within GraphQL queries.
Getting Posts Q&A
Jason fields student questions about folder structure and how to create multiple post types.
Working with Images
Adding a Hero Image Box
Jason uses creates a hero image box for the home page using components and applies styling rules to control its appearance.
Optimizing Images with Sharp
Jason sets up the gatsby-sharp plugin which automatically resizes images, and then uses GraphQL to access the optimized versions.
Using Optimized Sharp Images
Jason adds the optimized images into the blog code, introduces aliasing and fragments in GraphQL, and gives a tip about how to fade in images.
Adding Images to MDX Posts
Jason uses the gatsby-sharp plugin to add preview images to the each post within the listing of MDX blog posts.
Styling Post Images
Jason finishes adding images to the blog post listing and then adds CSS and query filters to customize the appearance.
Adding Optimized Images to Posts
Jason installs the gatsby-remark-images plugin to handle image optimization in MDX posts.
3rd Party Data
Instagram Source Plugin Setup
Jason installs and begins to use a 3rd party source plugin gatsby-source-instagram and adds a section for its output to the homepage.
Getting the Image Data
Jason uses the GraphQL playground to build a query to retrieve a set of urls for images on Instagram, starts the React hook for getting Instagram data, and adds data from the query result to the home page.
Styling the Instagram Component
Jason finishes the React hook to load a group of Instagram images onto the home page and writes CSS to place the images into a grid structure.
Gatsby Plugins Q&A
Jason fields student questions about getting data from an API, MDX, posts with multiple images, duplicate GraphQL queries, video handling, data sources, and getting 3rd party data without the use of a plugin.
Analyze & Deploy
Analyzing Gatsby Bundle Sizes
Jason installs gatsby-webpack-bundle-analyzer and uses the plugin to view the bundle sizes being used on the site, along with discussing what to look for when running the analysis.
Building the Site
Jason explains how to build the site using npm, highlights the JavaScript files webpack creates, and analyzes the way the built site loads its resources through the developer console.
Plugins and Dynamic Data Q&A
Jason fields student questions about prefetching, source plugins, the GraphQL schema, and working with static and dynamic data.
Deploying Gatsby with Netlify
Jason creates a new repository for the Gatsby site through git remote, creates an account with Netlify, and deploys the site to Netlify.
Wrapping Up
Future of Gatsby Q&A
Jason encourages students to get involved with Gatsby by contributing to its development and discusses Gatsby themes, which will be a big part of Gatsby's future.
Wrapping Up
Jason concludes the course by summarizing skills learned, including page creation, linking between pages, blogging with MDX, image optimization, React hooks, GraphQL, use of 3rd party data, and bundle analysis.