Gatsby Starter Forty

gatsby-starter-forty is a Gatsby.js V2 starter template that ports HTML5 UP's Forty site design into a Gatsby project, giving developers a ready-to-run base for building portfolio-style websites.

What is gatsby-starter-forty?

gatsby-starter-forty is a Gatsby.js V2 starter based on the Forty site template designed by HTML5 UP. It takes the Forty design and provides it as a Gatsby project structure, so developers can quickly scaffold a new site by running a single command. The starter is maintained by CodeBushi, which also hosts other Gatsby starters and themes on its website. The older V1 version is preserved on the v1 branch of the repository, which currently has 198 stars on GitHub.

Key Features

• Gatsby.js V2 — Built on Gatsby version 2, using React and GraphQL under the hood to generate static sites.
• Forty design by HTML5 UP — The visual layout and styling come from the Forty template, a popular one-page portfolio design.
• Custom CSS Grid — Replaces the original grid with a simple 12-column grid system using the grid-wrapper class and col- classes that must add up to 12; the grid is disabled on mobile.
• Live preview — A hosted demo is available at https://gatsby-forty.surge.sh.
• Easy initialization — Create a new project with gatsby new pointing at the GitHub repository.
• Versioned branches — The v1 branch keeps the older Gatsby V1 version for legacy use.

Who is it for?

• Gatsby developers who want to start a portfolio or personal site without building the layout from scratch.
• Designers who like the Forty aesthetic and need a React/Gatsby implementation.
• Developers evaluating starter templates who want a clean, minimal grid system they can extend.

What can you do with it?

• For a personal portfolio: Quickly scaffold a one-page portfolio using the Forty sections and customize content in React components.
• For a photography site: Use the image-heavy layout to showcase work, leveraging Gatsby's image optimization.
• For a landing page: Adapt the intro and grid sections to create a simple marketing page.

How does it work?

The installation is a single command: gatsby new gatsby-starter-forty https://github.com/codebushi/gatsby-starter-forty. After that, run gatsby develop in the terminal to start the dev site. The grid uses a grid-wrapper container and col- classes that sum to 12, with an example showing three col-4 blocks in the README.

FAQ

Is gatsby-starter-forty free?

The starter is publicly available on GitHub with no mention of a purchase or license in the README, so it is free to use.

What version of Gatsby does it use?

It targets Gatsby.js V2. The v1 branch contains the older Gatsby V1 version of the starter.

How do I customize the grid?

Wrap the desired items with a grid-wrapper class. Inside it, give each item a col- class followed by a number, and the numbers should add up to 12, such as three col-4 blocks for a 3-column layout.