Explore GatsbyJS to build dynamic static sites and apps. Gain insights into starters, themes, plugins, GraphQL data queries, styling, custom 404s, SEO, and cloud deployment.

tarball.tar.gz

gatsby_lark

gatsby_lark-with-draft-post

gatsby_lark-setting-up-lark

gatsby_lark-building-our-components-editor-1

gatsby_lark-copy-me

gatsby build

gatsby_build_with_draft

Gatsby is a React-based and GraphQL-powered static site generator. It delivers websites with excellent loading speed. It can be used to build diverse websites, including websites with static data—like portfolios and informative websites—and rich and dynamic web apps like blogs, e-commerce sites, and more. Gatsby fetches data at build-time from different sources and compiles it into static HTML, which can then be deployed to your favorite web server. 

In this course, you’ll learn about the basics of Gatsby, including the use of starters, themes, plugins, layouts, and pages. You’ll then learn how to query data with GraphQL and fetch data from various data sources. You’ll also see how to style Gatsby projects and add features such as custom 404 pages and SEOs. In the end, you’ll see how to deploy Gatsby websites on different cloud hosting platforms. 

This course enables new and existing frontend web developers to become masters in GatsbyJS and use this tool to create blazingly fast static web projects.

How to Gatsby: The Complete Course

Which command is used to build production-ready code?

Which command is used to build production-ready code?

A new Gatsby project named `my-blog` is created.

The new project is started with `gatsby-starter-blog`.

An interactive shell session is started, where Gatsby asks for the starter to be used.

The project is created into a directory named `my-blog`.

**(Select all that apply.)** What happens when we run the `gatsby new my-blog` command?

(Select all that apply.) What happens when we run the <code>gatsby new my-blog</code> command?

Assuming we have another project served locally at port `8000`, which of these commands runs a new Gatsby project on port `8080`?

Assuming we have another project served locally at port <code>8000</code>, which of these commands runs a new Gatsby project on port <code>8080</code>?

We wish to test our site in a production environment to make sure all works as should. What's the correct sequence of commands to run?

We wish to test our site in a production environment to make sure all works as should. What’s the correct sequence of commands to run?

**(Select all that apply.)** Which of these is/are not part of the API of the Gatsby CLI?

(Select all that apply.) Which of these is/are not part of the API of the Gatsby CLI?

Configurations and settings for our project are hosted in which file?

Configurations and settings for our project are hosted in which file?

When we need some code to run once during build time, where do we place this code?

When we need some code to run once during build time, where do we place this code?

`gatsby new test-blog educative/gatsby-starter-blog`

`gatsby new educative/gatsby-starter-blog`

`gatsby create test-blog educative/gatsby-starter-blog`

We need to create a new project using a starter called `educative/gatsby-starter-blog`. Which command is correct for this case?

We need to create a new project using a starter called <code>educative/gatsby-starter-blog</code>. Which command is correct for this case?

We can add starters to a project by installing them as node packages.

Once a theme is installed and used, it loses connection to the source and cannot be upgraded.

**(Select all that apply.)** Which of the following statement(s) is/are not correct about themes, plugins, and starters? 


(Select all that apply.) Which of the following statement(s) is/are not correct about themes, plugins, and starters?

This is an API provided to us by Gatsby to wrap component elements.

This is a function that takes in two destructured arguments called `element` and `props`.

The API should live in the `gatsby-node.js` file.

Which of these is correct about the `wrapPageElement` API?

Which of these is correct about the <code>wrapPageElement</code> API?

The `Link` component is used to navigate between internal pages.

We can style active `Link` components by using the `activeStyle` prop.

The `Link`'s `to` prop value should be an absolute path.

We can pass data down to linked components in the `Link` and `navigate` functions by using the `state` props and `options.state` argument, respectively.

**(Select all that apply.)** Which statement(s) is/are correct concerning navigation in Gatsby? 

(Select all that apply.) Which statement(s) is/are correct concerning navigation in Gatsby?

Ideally, for images that don’t change each time the component is used, we should use the `GatsbyImage` component.

`getImage` is a utility function that takes in an image file object and returns a Gatsby image data.

In `StaticImage`, the image options are passed to the component in the form of props while in `GatsbyImage`, they are passed as arguments to the `gatsbyImageData` GraphQL resolver

The `width` and `height` options work for constrained and fluid layouts.

The `FIXED` layout option always displays an image with fixed width regardless of the container size

**(Select all that apply.)** Which statement(s) is/are correct about the usage of images in Gatsby? 

(Select all that apply.) Which statement(s) is/are correct about the usage of images in Gatsby?

Put what you have learned about Gatsby basics to test.

Introduction to Course

Getting Started

Gatsby Basics

Data Sources

Fetching Data From Sources

Styling: Making Our Project Pretty

Features and Modifications

Deployment

Wrapping Up

Appendix

Quiz: Gatsby Basics