New to Gatsby? Check out the Getting Started guide for a quick overview.

Gatsby Theme Document

A Gatsby.js theme for creating documentation with MDX and Theme UI. Features multiple color modes and navigation that is created automatically. The first theme built by Code Bushi!

Gatsby Lander

An experimental Gatsby starter built using Tailwind CSS. This single page website template is perfect for getting an idea out the door. With Tailwind CSS, it's very easy to customize the colors and styles of this landing page.

Gatsby Dimension

A fully responsive, single page React.js website template. Built using Gatsby.js and designed by HTML5 UP. Great for a quick profile or portfolio site.

Gatsby Forty

A colorful website template featuring a landing page, two hero banner styles, and a generic page. Built using Gatsby.js and designed by HTML5 UP.

Gatsby Strata

This super simple site features a lightbox style photo gallery. Fully responsive and perfect for displaying your work. Designed by HTML5 UP.

Gatsby Stellar

A scroll friendly, responsive site. Supports single or multiple pages. Has smooth scrolling to the different sections of the page. Designed by HTML5 UP.

Gatsby Photon

Great single page site that can be a landing page or a portfolio website. Custom grid elements made with CSS Grid! Original design by HTML5 UP.

Gatsby Paradigm Shift

Single page responsive site that's perfect for a personal portfolio or small showcase. Original design by HTML5 UP.

Getting Started with Gatsby

To use Gatsby.js, make sure you have Node.js and npm installed on your machine. Gatsby starters can be installed via the Gatsby CLI tool or by cloning a GitHub repository. Let's explore the CLI tool by first installing it.

# Install the Gatsby CLI tool globally on your machine
npm install --global gatsby-cli

The convention for starting a new Gatsby site with the CLI is:


Let's try installing the Gatsby Dimension Starter:

gatsby new gatsby-starter-dimension

This will create a new directory called gatsby-starter-dimension and clone the repository into it. It will also automatically run npm install in the directory for you. Now we just need to go into the new directory and boot up Gatsby.

cd gatsby-starter-dimension

# Start the dev site, browse to http://localhost:8000/
gatsby develop

If you don't want to use the Gatsby CLI tool, you can just clone the repository and manually run npm install inside the folder, followed by gatsby develop. Check out the official Gatsby Tutorials for more information.

Support my work by buying me a coffee!

If you found these Gatsby Themes and Starters useful, I would really appreciate your support!

Learn JavaScript and React

Here are some of my favorite courses for learning JavaScript and React. I have personally purchased each of these and found them extremely helpful when I was learning JavaScript and React. Check out the resources page for more.