Glossary

When you’re new to Gatsby there can be a lot of words that seem alien. This glossary aims to give you a 10,000ft overview of common terms and what they mean to the layperson.

A

AST

Abstract Syntax Tree: A tree representation of the source code that is found during a compilation step between two languages. For example, gatsby-transformer-remark will create an AST from Markdown to describe a Markdown document in a tree structure using the Remark parser.

API

Application Programming Interface: A method for one application to communicate with another. For example, a source plugin will often use an API to get its data.

Accessibility

The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited for accessibility, generally all users have equal access to information and functionality. Read about Gatsby’s Commitment to Accessibility.

B

Babel

A tool that lets you write the most modern JavaScript, and on build it gets compiled to code that most web browsers can understand.

Back-End

The behind the scenes that the public do not see. This often refers to the control panel of your CMS. These are often powered by server-side programming languages such as PHP or ASP.net.

Build

The process of taking your code and content and packaging it into a website that can be hosted and accessed.

C

CLI

Command Line Interface: An application that runs on your computer through the command line and interacted with your keyboard.

Gatsby has two command line interfaces. One, gatsby, for day-to-day development with Gatsby and another, gatsby-dev, for those who contribute to the Gatsby project.

CMS

Content Management System: an application where you can manage your content and have it saved to a database or file for accessing later. Examples of Content Management Systems include Wordpress, Drupal, Contentful, and Netlify CMS.

Command Line

A text-based interface to run commands on your computer. The default Command Line applications for Mac and Windows are Terminal and Command Prompt respectively.

Compiler

A compiler is a program that translates code written in one language to another language. For example Gatsby can compile React applications into static HTML files.

Components

Components are independent and re-usable chunks of code powered by React that, when combined, make up your website or app.

A component can include components within it. In fact, pages and templates are examples of components.

Config

The configuration file, gatsby-config.js tells Gatsby information about your website. A common option set in config is your sites metadata that can power your SEO meta tags.

D

Data Source

Content and data’s origin point, typically integrated into Gatsby with source plugins. A data source is often a Headless CMS, but it could also include Markdown, JSON, or YAML files.

Database

A database is a structured collection of data or content. Often a CMS will save to a database using back-end technologies. They’re often accessed in Gatsby via a source plugin

Decoupled

Decoupling describes the separation of different concerns. With Gatsby this most commonly means decoupling the Front-End from the Back-End, like with Decoupled Drupal or Headless Wordpress.

Deploy

The process of building your website or app and uploading onto a hosting provider.

Development Environment

The environment when you’re developing your code. It’s accessed through the CLI using gatsby develop, and provides extra error reporting and things to help you debug before building for production.

E

ECMAScript

ECMAScript (often referred to as ES) is a specification for scripting languages. JavaScript is an implementation of ECMAScript. Often developers will use Babel to compile the latest ECMAScript code into more widely supported JavaScript.

Environment

The environment that Gatsby runs in. For example, when you are writing your code you probably want as much debugging as possible, but that’s undesirable on the live website or app. As such, Gatsby can change its behavior depending on the environment it’s in.

Gatsby supports two environments by default, the development environment and the production environment.

Environment Variables

Environment Variables allow you to customise the behavior of your app depending on its environment. For instance, you may wish to get content from a staging CMS during development and connect to your production CMS when you build your site. With environment variables you can set a different URL for each environment.

F

Filesystem

The way files are organized. With Gatsby, it means having files in the same place as your website’s or app’s code instead of pulling data from an external source. Common filesystem usage in Gatsby includes Markdown content, images, data files, and other assets.

Front-End

The public-facing interface for your website or app, delivered using web technologies: HTML, CSS, and JavaScript.

G

Gatsby

Gatsby is a modern website framework that builds performance into every website or app by leveraging the latest web technologies such as React, GraphQL, and modern Javascript. Gatsby makes it easy to create blazing fast, compelling web experiences without needing to become a performance expert.

GraphQL

A query language that allows you to pull data into your website or app. It’s the interface that Gatsby uses for managing site data.

H

HTML

A markup language that every web browser is able to understand. It stands for HyperText Markup Language. HTML gives your web content a universal informational structure, defining things like headings, paragraphs, and more. It is also key to providing an accessible website.

Headless CMS

A CMS that only handles the back-end content management instead of handling both the back-end and front-end. This type of setup is also referred to as Decoupled.

Hosting

A hosting provider keeps a copy of your website or app and makes it accessible to the public. Common hosting providers for Gatsby projects include Netlify, AWS, S3, Surge, Heroku, and more.

Hydration

Once a page that has been generated by Gatsby is loaded in a web browser, it is re-hydrated into a full React application that can manipulate the DOM.

I

J

JAMStack

JAMStack refers to a modern web architecture using JavaScript, APIs, and (HTML) markup. From JAMStack.org: “It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.”

JavaScript

A programming language that helps us make the web dynamic and interactive. JavaScript is a widely deployed web technology in browsers. It is also used on the server-side with Node.js. It is an implementation of the ECMAScript specification.

K

L

M

MDX

Extends Markdown to support React components within your content.

Markdown

A way of writing HTML content with plain text, using special characters to denote content types such as hash symbols for headings, and underscores and asterisks for text emphasis.

N

NPM

Node Package Manager. Allows you to install and update other packages that your project depends on. Gatsby and React are examples of your project’s dependencies. See also: Yarn.

Node

Gatsby uses data nodes to represent a single piece of data. A data source will create multiple nodes.

Node.js

A program that lets you run JavaScript on your computer. Gatsby is powered by Node.

O

P

Package

A package usually describes a JavaScript program that has additional information about how it should be distributed and used, such as its version number. NPM and Yarn manages and installs the packages your project uses. Gatsby itself is a package.

Page

An HTML page.

This also often refers to components that live in /src/pages/ and are converted to pages by Gatsby, as well as pages created dynamically in your gatsby-node.js file.

Plugin

Additional code that adds functionality to Gatsby that wasn’t included out-of-the-box. Common Gatsby plugins include source and transformer plugins for pulling in and manipulating data, respectively.

Production Environment

The environment for the built website or app that users will experience when deployed. It can be accessed through the CLI using gatsby build or gatsby serve.

Programmatically

Something that automatically happens based on your code and configuration. For example, you might configure your project to create a page for every blog post written, or read and display the current year as part of a copyright in your site footer.

Public

This usually refers to either a member of the public (as opposed to your team) or the folder /public in which your built website or app is saved.

Q

Query

The process of requesting specific data from somewhere. With Gatsby you normally query with GraphQL.

R

React

A code library (written with JavaScript) for building user interfaces. It’s the framework that Gatsby uses to build pages and structure content.

Remark

A parser to translate Markdown to other formats like HTML or React code.

Routing

Routing is the mechanism for loading the correct content in a website or app based on a network request - usually a URL. For example, it allows for routing URLs like /about-us to the appropriate page, template, or component.

S

Source Code

Source code is your code that lives in /src/ folder and makes up the unique aspects of your website or app. It is made up of JavaScript and sometimes CSS and other files.

The source code gets built into the site the public will see.

Source Plugin

A plugin that adds additional data sources to Gatsby that can then be queried by your pages and components.

Starter

A pre-configured Gatsby project that can be used as a starting point for your project. They can be discovered using the Gatsby Starter Library and installed using the Gatsby CLI.

Static

Gatsby builds static versions of your page that can be easily hosted. This is in contrast to dynamic systems in which each page is generated on-the-fly. Being static affords major performance gains because the work only needs to be done once per content or code change.

It also refers to the /static folder which is automatically copied into /public on each build for files that don’t need to be processed by Gatsby but do need to exist in public.

T

Template

A component that is programmatically turned into a page by Gatsby.

Transformer

A plugin that transforms one type of data to another. For example you might transform a spreadsheet into a JavaScript array.

U

V

W

Webpack

A JavaScript application that Gatsby uses to bundle your website’s code up. This happens automatically on build.

X

Y

Yarn

A package manager that some prefer to NPM. It is also required for developing Gatsby.

Z