Gatsby Starter Fractal

Gatsby Starter Fractal is a free, MIT-licensed Gatsby.js starter template that recreates the Fractal one-page design by HTML5 UP as a static React site with personal branding and GitHub Pages deployment built in.

What is Gatsby Starter Fractal?

Gatsby Starter Fractal is a starter template for building a personal or single-page promotional site on Gatsby.js version 4. It takes the Fractal design from HTML5 UP — a one-page layout with a prominent heading, subheading, and social links — and packages it as a Gatsby project that you can scaffold with the Gatsby CLI. The template outputs a static site with a configurable config.js for site title, personal heading, subheading, and social media icons; it also includes a gh-pages deploy script and support for Gatsby's pathPrefix for hosting under a subpath. It was created by anubhavsrivastava and is distributed under the MIT license.

Key Features

• Gatsby v4 framework — Built on Gatsby.js version 4, a React-based static site generator that pre-renders HTML for fast loading and SEO.
• Fractal design by HTML5 UP — One-page layout with a bold headline, subheading, and social icon links, based on the openly licensed Fractal template.
• Configurable via config.js — Edit a single configuration file to set siteTitle, heading, subHeading, and an array of socialLinks with Font Awesome icon classes.
• Gatsby CLI scaffolding — Install with gatsby new <site-name> https://github.com/anubhavsrivastava/gatsby-starter-fractal to generate a new project.
• GitHub Pages deployment — npm run deploy publishes the site using the gh-pages module; pathPrefix in config.js supports hosting under a subpath like https://theanubhav.com/somePath/.
• MIT license — Free to use and modify for personal or commercial projects.

Who is it for?

This starter is aimed at developers and designers who want a fast, static personal landing page without building the layout from scratch. A developer can use it to spin up a personal portfolio page with their name, title, and links to GitHub and other profiles. A freelancer or agency can use it as a single-page site to announce a product or service with minimal setup. Anyone comfortable with the Gatsby CLI can use it as a learning base for how Gatsby v4 projects are structured.

What can you do with Gatsby Starter Fractal?

• Personal portfolio: Replace the default heading and subheading in config.js and add your GitHub, Twitter, or other social URLs to publish a clean one-page bio.
• Project landing page: Use the single-page layout to announce an open-source project or upcoming product, then deploy to GitHub Pages with one command.
• Gatsby learning tool: Examine the component-based structure of a real Gatsby v4 starter to see how pages, config, and deployment are wired together.

How does Gatsby Starter Fractal work?

Install the Gatsby CLI globally with npm install --global gatsby-cli, then create a new site with gatsby new <site-name> https://github.com/anubhavsrivastava/gatsby-starter-fractal. After running npm install, use gatsby develop to preview locally; personalization happens by editing config.js, and deployment to GitHub Pages is done with npm run deploy.

Alternatives

The same author maintains other HTML5 UP-based Gatsby starters that reuse the same config.js workflow, including gatsby-starter-casual, gatsby-starter-grayscale, gatsby-starter-spectral, and gatsby-starter-resume. These share the same scaffolding and deployment setup but apply different visual themes.

Pricing

Gatsby Starter Fractal is free and open source under the MIT license, so there are no licensing fees for personal or commercial use.

FAQ

Is Gatsby Starter Fractal free?

Yes, the template is released under the MIT license, as indicated by the license badge in the repository. You can use, modify, and redistribute it freely, including in commercial projects.

What does Gatsby Starter Fractal do?

It provides a pre-built Gatsby.js v4 site based on the Fractal one-page design from HTML5 UP. You configure your name, title, and social links in config.js, and the starter generates a static site you can deploy to GitHub Pages or any static host.

How do I deploy Gatsby Starter Fractal to GitHub Pages?

Run npm run deploy from the project root. The included package.json script uses the gh-pages module to publish the built site. If your site lives under a subpath, set the pathPrefix value in config.js first; for a root domain, remove that configuration.

Do I need the Gatsby CLI?

Yes, the README instructs you to install the Gatsby CLI globally with npm install --global gatsby-cli and then use gatsby new to scaffold a project from this starter. After that, standard npm commands like gatsby develop and npm run deploy are used.

What is the difference between this and other Gatsby starters by the same author?

Each starter in the author's collection applies a different HTML5 UP visual theme while keeping the same configuration and deployment approach. Gatsby Starter Fractal specifically uses the Fractal theme, which features a large headline and social icon layout centered on a single page.