Introduction to Gatsby
This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Table of Contents
IntroductionJason Lengstorf introduces the course and outlines the main project, which is to build a blog from scratch in Gatsby.
Gatsby OverviewJason highlights the problems Gatsby solves by eliminating boilerplate to help get developers started on building a site.
The Content MeshJason 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 DefaultJason argues that Gatsby is set up with a default state that is secure and performant, while also giving developers control over its customization.
Blog SetupJason instructs students to clone the course repo and then installs dependencies. A small addition is then made to the blog.
Creating a New PageJason demonstrates how to create a new page in Gatsby by creating an About page for the website and then navigating to it.
Gatsby LinkJason 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 BranchesJason explains the logistics of using the course repo, which contains branches that can be checked out for each step of the course.
Styling the Main LayoutJason 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 HeaderJason creates and styles the header component for the site along with navigation links that signal the current page.
Gatsby & GraphQLJason briefly touches on the GraphQL playground and gives an overview of how Gatsby handles data retrieval.
Rendering Site MetadataJason adds metadata to the head section of the page by querying the config file using GraphQL with React Helmet.
Rendering Components in MDXJason walks through the process of rendering full React components inside Markdown with MDX.
Building a Blog with MDXJason 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 ListingJason builds a GraphQL query and a React hook to display a listing of all blog posts onto the home page.
Modifying Post Listing DisplayJason 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 PagesJason demonstrates how to create pages for each post on the site using gatsby-node and programmatic page generation.
Getting Post Data by SlugJason walks through getting the data for post pages by using variables within GraphQL queries.
Getting Posts Q&AJason fields student questions about folder structure and how to create multiple post types.
Working with Images
Adding a Hero Image BoxJason uses creates a hero image box for the home page using components and applies styling rules to control its appearance.
Optimizing Images with SharpJason sets up the gatsby-sharp plugin which automatically resizes images, and then uses GraphQL to access the optimized versions.
Using Optimized Sharp ImagesJason 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 PostsJason uses the gatsby-sharp plugin to add preview images to the each post within the listing of MDX blog posts.
Styling Post ImagesJason finishes adding images to the blog post listing and then adds CSS and query filters to customize the appearance.
Adding Optimized Images to PostsJason installs the gatsby-remark-images plugin to handle image optimization in MDX posts.
3rd Party Data
Instagram Source Plugin SetupJason 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 DataJason 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 ComponentJason 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&AJason 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 SizesJason 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.
Plugins and Dynamic Data Q&AJason fields student questions about prefetching, source plugins, the GraphQL schema, and working with static and dynamic data.
Deploying Gatsby with NetlifyJason creates a new repository for the Gatsby site through git remote, creates an account with Netlify, and deploys the site to Netlify.
Future of Gatsby Q&AJason 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 UpJason 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.