Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, Webpack, react-router, GraphQL, and other front-end tools to provide an excellent developer experience. 

This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system. After tackling the file system you'll optimize for SEO as well as additional styles through ThemeUI that will support features like syntax highlighting in code snippets. Finally, you'll learn how to performantly process and render images. 

By the end of the course, you'll have a fully functioning developer blog that will serve as a base for larger production-grade applications.


Use `npm init gatsby` with the `y` flag to create an initial Gatsby site. The site includes a `package.json` with Gatsby, React, and `react-dom` installed, an empty `gatsby-config.js` file, and two files in `src/pages` - `index.js` and `404.js`.

The repo also comes with a minimal gitignore file and README.

Use npm init gatsby to create an initial Gatsby site

Create a shared `Layout` component with semantic HTML to provide proper landmarks to the page. Additionally, use the `Link` component from the core Gatsby package to add a Homepage route to the header.

Add a Shared Layout Component to a Gatsby Site

Add metadata to your gatsby-config file and query it using the useStaticQuery hook and the GraphQL template function.

React Helmet is a component that lets you control your document head using their React component. Install gatsby-plugin-react-helmet and use the Helmet component from react-helmet to pass in necessary information such as title, description, language, and titleTemplate. 

Finally, use the meta keyword to add an array with targeted og and Twitter information.

Create an Accessible SEO Component using React Helmet

Create a posts directory at the root of your project with an MDX file. Inside the MDX file add Frontmatter and placeholder text. 

With the gatsby-source-filesystem plugin, you can query the files in the posts directory. Finally, install gatsby-plugin-mdx, @mdx-js/mdx and @mdx-js/react to process the MDX files so they can be queried in the project.

Use Gatsby Plugins to Source and Transform MDX Files

In the `pages` directory, create the `{Mdx.slug}.js` file. Using curly braces, you can denote a file system route API that operates on all "Mdx" nodes and creates a page with the path slug available on that node. 

The [File System Route API](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/) automatically passes the `id` of each MDX file node to the GraphQL query inside this file. Use the `id` to filter the query and get access to the processed MDX file. 

Finally, pull in `data`, the result of our query, and expose the `title` from the frontmatter.

Use Gatsby's File System Route API to Generate Pages for Each MDX File

In this lesson, you will update the `BlogPostPage` component to render the post's content using MDXRenderer. MDXRenderer is a React component that takes compiled MDX content and renders it. 

First, add the `body` to the GraphQL template function defined inside of `{Mdx.slug}.js`. Next, update the `BlogPostPage` component with a variable `post`, wrap the return object with the `Layout` component, expose the `title`, and use MDXRenderer. Inside MDXRenderer, pass `body` to render the entire post.

Use MDXRenderer to Render MDX Content in a Gatsby Site

Inside of `index.js`,  create a page query that grabs `allMDX` nodes, and in each node, grab the `slug` and `title`, that's available via the frontmatter. 

Additionally, create a filter to sort all results using the frontmatter `title` field. Map through each post using the result of the query in the `data` object.

Finally, use the `Link` component and the `slugs` provided by the query result to link to each post.

Add a List of Posts using a GraphQL Page Query

Theme UI is a library for building consistent, themeable React apps based on constraint-based design principles. It allows you to style any component in your application with typographic, color, and layout values defined in a shared theme object.

For this lesson, install the alpha versions of `gatsby-plugin-theme-ui` and `theme-ui.`: `theme-ui@0.40-alpha.3` and `gatsby-plugin-theme-ui@0.4.0-alpha.3`.  

Add styles to the layout component using the [sx prop](https://theme-ui.com/sx-prop). Then install the [@theme-ui/presets package](https://theme-ui.com/packages/presets) and pass a preset in your gatsby-config file.

Add Theme UI to a Gatsby Site using gatsby-plugin-theme-ui and theme-ui

`[@theme-ui/prism](https://theme-ui.com/packages/prism/#syntax-themes)` is a syntax highlighting component that works with Theme UI. In this lesson, use `@theme-ui/prism` to select a color scheme for rendering code snippets in MDX files. 

Make sure to install `@theme-ui/prism@0.4.0-alpha.3`.

Add Support for Syntax Highlighting in a Gatsby Site with @theme-ui/prism

`StaticImage` is a React component designed for one-off images that adheres to best practices for performant images in browsers.

For this lesson, install `gatsby-plugin-image`, `gatsby-plugin-sharp`, and `gatsby-transformer-sharp`. Now, use the `StaticImage` component to pass an image URL as the `src`, add an `alt` attribute with a description, choose a `layout`, and pass an `aspectRatio` to crop the image.

To learn more about the available props, see the [gatsby-plugin-image README](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image#api).

Render Performant Images with the Gatsby StaticImage Component 


`GatsbyImage` is a React component specially designed to give users a great image experience. It combines speed and best practices.

Install gatsby-transformer-sharp. Source image files from your post frontmatter, process them using [gatsby-plugin-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image#api-1) and query them using gatsby-transformer-sharp. Then proceed to use the `GatsbyImage` component exported from `gatsby-plugin-image` to render the processed images.

Note: `GatsbyImage` is designed to support three different layouts, fixed: the image is not responsive, fullWidth: the image is designed to display the full width of the screen and will stretch beyond the size of its source if necessary, and constrained: a responsive image that will get larger and smaller depending on the screen size but will not get larger than the size of the source image (or width/height if either is passed).

Process Images and Render them using GatsbyImage

Add a `siteUrl` field to your `gatsby-config` metadata. Together with an image `src`, generate the URL for an image. Inside your SEO component, add an additional array to your Helmet `meta` field that is only used when an image is available. Set the appropriate fields and the `summary_large_image` Twitter card type so that the images will show up when shared on social sites.

Build a Developer Blog with Gatsby

Laurie Barth

⚔️ Portfolio Project Challenge

What you'll learn:

Questions to Think About:

Credits

⚔️ Portfolio Project Challenge

Course Content