- 404 Pages
- Adding Images, Fonts, and Files
- Browser Support
- Creating and Modifying Pages
- Create a source plugin
- Custom webpack config
- Customizing html.js
- Debugging HTML Builds
- Environment Variables
- Gatsby on Windows
- Migrating from v0 to v1
- Path Prefix
- Proxying API Requests
- Adding Markdown Pages
- Adding a List of Markdown Blog Posts
- Adding Tags and Categories to Blog Posts
- Creating Dynamically-Rendered Navigation
- Dropping Images into Static Folders
- How Gatsby Works with GitHub Pages
- Part One
- Part Two
- Part Three
- Part Four
- Recap of first half of the tutorial
- Data in Gatsby
- How Gatsby’s data layer uses GraphQL to pull data into components
- Our first GraphQL query
- Introducing GraphiQL
- Source Plugins
- Build a page with a GraphQL query
- Transformer Plugins
- Create a list of our site’s markdown files in src/pages/index.js
- Programmatically creating pages from data
Hi! We’re so happy you decided to try using Gatsby. This tutorial has (or rather will have once all parts are written) five parts that'll walk you from getting started developing and building Gatsby sites to deploying a finished and polished high performance static PWA.
This tutorial is for everyone! You do not need to be a programmer or React.js expert. We'll walk you through things.
- Introduction to basics of Gatsby — Starting new projects, developing, and deploying sites.
- Introduction to using CSS in Gatsby. Explore libraries like Typography.js, CSS Modules, Glamor, and Styled Components.
- Explore building nested layouts in Gatsby. Layouts are sections of your site that are reused across multiple pages like headers and footers.
- Learn how to work with Gatsby's data layer. Explore source & transformer plugins. Get introduced to programmatic pages and how to write GraphQL queries. In this part of the tutorial we'll build a simple markdown blog.
- Finishing and deploying a website. React Helmet. We walk through how to put the finishing touches on a website project.