How To Create Static Web Sites with Gatsby.js

27.1k views

Gatsby is a React framework that allows you to create static and serverless apps. Gatsby websites are different from traditional websites because they are usually deployed on a content delivery network (CDN) and are content agnostic. In this tutorial, you will learn the basics of creating a site with Gatsby, allowing you to create static sites that are optimized for your users.

  • Gatsby is a React framework that allows you to create static and serverless JavaScript apps. In this tutorial, you will install the Gatsby Starter default template, modify metadata in the Gatsby config file, run the development server and view the Gatsby site locally, and get a short introduction to JSX and Gatsby's image optimization capabilities.
  • By using GraphQL queries in Gatsby.js projects, you can use the Gatsby Image API to take care of image compression, make an image responsive, and even handle basic image styling. In this tutorial, you are going to compress, transform, and style images using the Gatsby Image API and GraphQL queries.
  • In this tutorial, you will deploy a Gatsby application to DigitalOcean's App Platform. App Platform is a Platform as a Service that builds, deploys, and manages apps automatically. When combined with the speed of a static site generator like Gatsby, this provides a scalable JAMStack solution that doesn't require server-side programming.
  • Search engine optimization (SEO) is the practice of making a website discoverable by this online audience. In this tutorial, you will configure Gatsby's SEO component that comes with SEO tooling right out of the box. You will add meta tags to your site using Gatsby React Helmet.