Building Static Sites with GatsbyJS

Paths

Building Static Sites with GatsbyJS

Authors: Marcelo Pastorino, Deeksha Sharma, Kamran Ayub

GatsbyJS is a React-based, GraphQL powered, static site generator. It lets you create fast, rich web experiences that integrate all your favorite services and content. You can... Read more

  • GatsbyJS fundamentals
  • Consuming data with GatsbyJS
  • Testing and deploy GatsbyJS sites
  • Creating plugins, themes and starters with GatsbyJS

Pre-requisites

  • HTML
  • CSS
  • JavaScript

Building Static Sites with GatsbyJS

GatsbyJS is a React-based, GraphQL powered, static site generator. It lets you create fast, rich web experiences that integrate all your favorite services and content. You can build e-commerce sites, landing pages, blogs and more in just minutes. In this path you will learn how to build, test and deploy your own Gatsby sites.

GatsbyJS: The Big Picture

by Marcelo Pastorino

Dec 22, 2020 / 51m

51m

Start Course
Description

There are many ways to build websites and web applications nowadays.

GatsbyJS is an opinionated open source framework based on React that offers performance, scalability, and security out of the box.

In this course, GatsbyJS: The Big Picture, you’ll learn everything there is to know to understand and evaluate this amazing technology.

First, you’ll explore the building blocks of the JAMStack architecture and GatsbyJS.

Next, you’ll discover how easy it is to start creating new projects with Gatsby and discover GatsbyJS code syntax and conventions.

Finally, you’ll learn about Gatsby’s tooling and fantastic ecosystem.

When you’re finished with this course, you’ll understand GatsbyJS building blocks and be able to determine whether this technology is the right fit for your next project.

Table of contents
  1. Course Overview
  2. Understanding the JAMStack Architecture
  3. Understanding GatsbyJS
  4. Understanding GatsbyJS Site Structure, Code, and Data Access Capabilities
  5. Understanding GatsbyJS Ecosystem

GatsbyJS: Getting Started

by Marcelo Pastorino

Feb 28, 2019 / 2h 11s

2h 11s

Start Course
Description

Creating modern static sites with GatsbyJS, React, and GraphQL can be easy and this course will show you how. In this course, GatsbyJS: Getting Started, you will gain the foundational knowledge needed to create modern static sites using GatsbyJS. First, you will learn what the JAMStack is, the basics of GatsbyJS, and how to start using this amazing technology. Next, you will discover how Gatsby makes use of React to create reusable components, the building block in a GatsbyJS site, and learn how to create React components of your own. Finally, you will explore GraphQL and its importance in the Gatsby ecosystem, as well as how to query for data using this versatile technology. When you finish this course, you will have created a modern and complete static blog site in Gatsby, as well as acquired the skills and knowledge needed to create other type of sites with GatsbyJS, using React and GraphQL.

Table of contents
  1. Course Overview
  2. Introducing GatsbyJS
  3. Creating Static Pages
  4. Styling in Gatsby
  5. Creating Components
  6. Querying Data with GraphQL
  7. Handling Data with Source and Transformer Plugins
  8. Creating Dynamic Pages Programmatically
  9. Deploying a Gatsby Site

Consuming Data with GatsbyJS

by Marcelo Pastorino

May 27, 2021 / 1h 27m

1h 27m

Start Course
Description

GatsbyJS is much more than a static site generator. In this course, Consuming Data with GatsbyJS, you'll learn how to acquire data from various data sources and consume it within a GatsbyJS site. First, you’ll see how to source data from WordPress back-ends and headless CMS systems. Next, you’ll discover how to acquire data from external GraphQL and REST APIs. Finally, you’ll learn how to consume data at run-time instead of build-time and displaying it in your page using hydration. When you’re finished with this course, you’ll have the skills and knowledge needed to source structured and unstructured data in GatsbyJS at build-time and run-time from various data sources.

Table of contents
  1. Course Overview
  2. Consuming Data from a WordPress Back-end
  3. Consuming Data from a Headless CMS
  4. Consuming Data from an External GraphQL Endpoint
  5. Consuming Display Data at Run-time

Testing and Deploying GatsbyJS Applications: Playbook

by Deeksha Sharma

Mar 16, 2021 / 1h 24m

1h 24m

Start Course
Description

Developing Gatsby applications using a modern stack, tools, and plugins is a powerful skill but not sufficient. It should be coupled with rigorous testing, continuous integration, deployment workflows, working knowledge of hosting platforms, and an ability to debug builds and optimize the overall performance. In this course, Testing and Deploying GatsbyJS Applications: Playbook, you’ll learn to deploy blazing fast, reliably tested, and a performant cafe website developed using Gatsby. First, you’ll explore how to add unit and end-to-end tests within the website codebase. Next, you’ll discover how to automate the build, test, and deployment of the site using GitHub actions. Then, you will see how to host the site on Gatsby Cloud, CloudFront, Netlify, and other platforms. Finally, you’ll learn how to debug the issues within your Gatsby build and fine-tune the site performance. When you’re finished with this course, you’ll have the skills and knowledge of efficient packaging, testing, and deployment skills needed to deliver fast, fully tested, and high-performance, seamless Gatsby applications.

Table of contents
  1. Course Overview
  2. Unit Testing of Gatsby Site
  3. Hosting Your Gatsby Site
  4. End-to-end Testing of Gatsby Site
  5. Continuous Deployment and Site Optimization

Creating Plugins, Themes and Starters with GatsbyJS: Playbook

by Kamran Ayub

Apr 22, 2021 / 1h 41m

1h 41m

Start Course
Description

Do you need to reuse styles and components across GatsbyJS sites? Or maybe you have a custom data source or need to change the way your pages render content?

In this course, Creating Plugins, Themes and Starters with GatsbyJS: Playbook, you’ll learn to customize GatsbyJS sites by understanding the different ways to extend functionality:

  1. explore forking and creating a custom starter to add custom styles and components
  2. discover how to build your own source and transformer plug-ins to add features and customize rendering of pages
  3. learn how to share parts of your starter with others using a theme
When you’re finished with this course, you’ll have the skills and knowledge of customizing and extending GatsbyJS needed to share with the community or within your own organization. Software required: NodeJS 14.

Table of contents
  1. Course Overview
  2. Creating and Publishing a Custom Starter
  3. Using GatsbyJS Node APIs with Local Plugins
  4. Integrating a Custom API with a Source Plugin
  5. Customizing Gatsby Nodes with a Transformer Plugin
  6. Making a Reusable Theme from a Starter