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

## Introduction to pages

Pages in Gatsby This is similar to that of the NextJS framework.

In this lesson, we build two new pages: `Me` and `Works`. Currently, we have links for these pages in our header, but clicking on them leads to 404 pages as we don’t have the pages yet. Let’s change that.

## Creating a page

To create a new page in Gatsby, we create a new component file under `src/pages`. That’s it.

For any new component created under the `pages` folder, Gatsby treats it as a new page and assigns it a route based on the component file name. Therefore, in our case, if we need pages for `/me` and `/works`, we have to create component files called `me.js` and `works.js`.

One important thing to note, however, is that we must make the component the default export. Otherwise, it won’t work.

For example:

# Introduction to pages

Pages in Gatsby This is similar to that of the NextJS framework.

In this lesson, we build two new pages: `Me` and `Works`. Currently, we have links for these pages in our header, but clicking on them leads to 404 pages as we don’t have the pages yet. Let’s change that.

# Creating a page

To create a new page in Gatsby, we create a new component file under `src/pages`. That’s it.

For any new component created under the `pages` folder, Gatsby treats it as a new page and assigns it a route based on the component file name. Therefore, in our case, if we need pages for `/me` and `/works`, we have to create component files called `me.js` and `works.js`.

One important thing to note, however, is that we must make the component the default export. Otherwise, it won’t work.

For example:

Learn about the concept of pages in Gatsby, and how to create one.

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

Pages in Gatsby

Introduction to pages