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 CMS

A **content management system (CMS)** is software that allows content creators to create and manage content with minimal technical knowledge. Here, we look at how to integrate some of the most popular CMS solutions into our existing (and new) Gatsby sites.

# Types

There are two major kinds of CMSs: traditional and headless.

## Traditional CMS

Unlike modern types, **traditional CMSs** are tightly coupled. This means that they handle both the backend, where the content and data are managed and stored and the frontend part, where this content is displayed to visitors using the site. When the admin creates or adds content to the database of a CMS service or software using some form of an admin dashboard, this software also handles the rendering of content to visitors.

## Headless CMS

In **modern** or **headless CMSs**, the admin can add content to the database, and this content is made available through the use of structured data, fetched most likely with an API. The developer or owner can then decide which software to use to render the content to end-users. That is, headless CMSs serve the purpose of just the backend, while the frontend can be any software of choice that can fetch and display the content of the headless CMS.

# CMS in Gatsby

When using a CMS as a data source, the first thing to do is go through the Gatsby plugins documentation to look for an existing source plugin for the particular CMS. Then, we follow the instructions on how to set it up. The plugin often needs unique details like an `id` or `accessToken`, which we can get from the CMS.

There are many CMSs available right now. For this lesson, we look at some of the popular CMS software and see how to use them in Gatsby. For each of these CMSs, we assume some prior knowledge of them. For example, installing plugins and accessing and navigating through admin portals.

## WordPress

**WordPress** remains one of the most popular CMS solutions used by most content creators and developers for their content management.

Learn how to use Contentful, Drupal, Shopify, etc., as data sources 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

Using Headless CMSs

Introduction to CMS

Types

Traditional CMS

Headless CMS

CMS in Gatsby