Tutorial Series

How To Create Static Web Sites with Gatsby.js

How To Create Static Web Sites with Gatsby.js

Introduction

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.

Summary View
detailed View

Series Tutorials

Tutorial

How To Set Up Your First Gatsby Website

Updated on October 25, 2021

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.

Tutorial

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.

Tutorial

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.

Tutorial

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.

Tutorial

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.

Tutorial

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.

Tutorial

How To Create a Custom Source Plugin in Gatsby

Published on September 24, 2021

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.

Tutorial

How To Use Themes in Gatsby

Published on October 1, 2021

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.

Tutorial

How To Use Static Files in Gatsby

Published on October 21, 2021

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.

Check out all our Tutorial Series

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more