How To Create Static Web Sites with Gatsby.js

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.

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.

A new paradigm in WordPress is using it only for the content part of your site and using Gatsby.js to statically generate the frontend. By decoupling content from the user interface (UI), you can keep the content editor and collaborative features of WordPress, but also enjoy the faster load times and React-based UI ecosystem of Gatsby. In this tutorial, you will provision WordPress to talk to Gatsby and set up a new Gatsby project based on a starter template.

A Progressive Web App, or PWA, is a type of website that goes beyond the usual limits of web capabilities, using newer technology to bridge the gap between your browser and your operating system. Gatsby developers can deliver users an improved overall browsing experience by converting their apps to PWAs. This tutorial will walk you through using plugins to turn a sample Gatsby site into a PWA by providing a secure context, making a manifest file, and adding a service worker.

One of the key features of the popular static site generator Gatsby is its flexibility in consuming content sources. Markdown files are a popular file-based source to use with Gatsby. In this tutorial, you will create a Gatsby-powered static site that builds itself from local Markdown source files, using the gatsby-source-filesystem plugin to collect the files and the gatsby-transformer-remark plugin to convert them into HTML.

A source plugin is a bundle of code that handles bringing data into the Gatsby ecosystem from a given source. Sources can be from the local filesystem as with Markdown files, databases, published data feeds, or even completely dynamic remote data sources such as APIs. In this tutorial, you will build your own custom source plugin to bring new data into Gatsby from a real-world API. You will also format the data so that it can be accessed throughout Gatsby.

Themes in Gatsby refer to plugins that act as a collection of configuration options, functionality, and/or user interface (UI) elements. Separating out shared features into maintained themes makes keeping your site up-to-date easier, and also lets you spend less time configuring your site and more time developing your content. In this tutorial, you will install, configure, and use a Gatsby theme for publishing blog posts: gatsby-theme-blog.

Like many popular Static Site Generators, Gatsby embraces the use of dynamic web frameworks, using React on the frontend and Node.js on the backend. But Gatsby can also pull in static files and assets, like images, CSS files, and JavaScript files. This tutorial will show you how to best go about adding images, stylesheets globally and as modules, JavaScript files, and arbitrary files like PDFs for your users to download.