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

One of the best features of Gatsby is its “data-from-anywhere” capability. With Gatsby, we can have and fetch data hosted anywhere—CMS, private and public APIs, and even our local project files.

# Working with data

Let’s look at how we can store and fetch data in folders and files in our project using two examples: — Images and Markdown.

## Images

Already, we have images that are “hosted” in our project’s `src/images` folder. We have often built queries to fetch and display them in the application. We can choose to have other kinds of assets and contents in our project like this. This is made possible by one plugin: `gatsby-source-filesystem`. This plugin goes into the directories we specify as data sources and fetches the data for us. This plugin always goes with other plugins that help convert the sourced data to a format that Gatsby can process and our site can use.

Using the images example to explain the above statement, `gatsby-source-filesystem` sources images because of the block of code below in our `gatsby-config.js` file:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images`,
  },
},

The code above gives the plugin a data location named `images` and provides a path to it. Therefore, during the build, the plugin goes into this location and sources the data in it. For any sourced data to be usable, it has to be processed and transformed by transformer plugins. In the case of images, this plugin is called `gatsby-transformer-sharp`, and we can still see it declared in our `gatsby-config.js` file.

For JSON files sourced by the `gatsby-source-filesystem` plugin, we can process them using `gatsby-transformer-json`. We can browse the Gatsby plugin documentation to determine the right transformer plugin for our data type.

## Markdown files

Let’s go a step further in our project and add a new content type: Markdown. Since Lark is a portfolio-cum-blog site, we will be writing the blogs in Markdown. Each of our blog posts also has a featured image. We create a new directory at the same level as the `images/` directory and name it `posts`. We will create another folder for our first blog post, `My-First-Post`. Inside this folder, we create an `index.md` file that contains the blog post. We place our image file in the `My-First-Post` folder.

If we want to do it on a local server, we can download the image using the link below:

We'll look at how our project folder can serve as a data source for 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

The Filesystem

Working with data

Images