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

Page queries are used in only page components.

Static queries are only used in non-page components.

Page queries are identified as being the only exported query in the page component.

We can have up to two page queries per page.

**(Select all that apply.)** Which statements are true about page and static queries? 

(Select all that apply.) Which statements are true about page and static queries?

```
import React, { useStaticQuery} from "react"

const HomePage = () => {
const data = useStaticQuery(pageQuery)

  return (
    // Component jsx structure
  )
}

export default pageQuery = `
  ...pageQueryGoesHere
`
```

```
import React from "react"

const HomePage = ({ data }) => {
  
  return (
    // Component jsx structure
  )

}

export default pageQuery = `
  ...pageQueryGoesHere
`
```

```
import React from "react"

const HomePage = () => {
  const data = pageQuery()
  return (
    // Component jsx structure
  )

}

export default pageQuery = `
  ...pageQueryGoesHere
`
```

```
import React, { useStaticQuery} from "react"

const HomePage = ({ pageQuery }) => {
  
  return (
    // Component jsx structure
  )

}

export default pageQuery = `
  ...pageQueryGoesHere
`
```

What is the correct way to accept the data passed from page queries?

What is the correct way to accept the data passed from page queries?

```graphql
query BlogPosts {
  allMarkdownRemark(sort: {fields: frontmatter___date, order: ASC}) {
    edges {
      node {
        id
        frontmatter {
          description
          altText
          title
        }
      }
    }
  }
}
```

```graphql
query BlogPosts {
  allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
    edges {
      node {
        id
        frontmatter {
          description
          title
          featuredImage {
            childImageSharp {
              fluid {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
}
```

```graphql
query BlogPosts {
  allMarkdownRemark(sort: {fields: frontmatter___date, order: ASC}) {
    edges {
      node {
        id
        frontmatter {
          description
          title
        }
      }
    }
  }
}
```

```graphql
query BlogPosts {
  allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
    edges {
      node {
        id
        frontmatter {
          description
          title
        }
      }
    }
  }
}
```

We need to fetch all blog posts sorted in ascending order of date published. The fields we need are `title` and `description` in the `frontmatter`, and `id`. Which of these is the best form of a query to use?

We need to fetch all blog posts sorted in ascending order of date published. The fields we need are <code>title</code> and <code>description</code> in the <code>frontmatter</code>, and <code>id</code>. Which of these is the best form of a query to use?

The `path` value in the `createPage` function argument object should be an absolute path.

Data passed through the `context` option in the `createPage` function argument object is also used as the value for any variables defined in the page query. 

**(Select all that apply.)** Which statements are correct about the `createPages` node API? 

(Select all that apply.) Which statements are correct about the <code>createPages</code> node API?

Take a quiz on how to fetch data from data sources in Gatsby.

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: Fetching Data From Sources