Gatsby Universal

Gatsby Universal is an opinionated Gatsby v2 starter template for building state-of-the-art marketing sites, bundling React Context, styled-components, page transitions, IntersectionObserver scroll events, and a focus on accessibility and SEO.

What is Gatsby Universal?

Gatsby Universal is a starter template for the Gatsby static site generator, created by Fabian Schultz at Stink Studios. It takes a single configuration file (site-config.js) as its main input and produces a static, server-rendered marketing site with progressive web app support, including offline functionality, a web manifest, and a sitemap. The template runs on Gatsby v2 and is distributed on GitHub.

Key Features

• Component-based page transitions — transitions use a React component with no-JavaScript support, so content degrades gracefully.
• IntersectionObserver scroll events — a render-prop component with a polyfill for observing element visibility.
• React Context global UI state — state management that works with server-side rendering.
• styled-components v4 — component-scoped CSS with generated media queries for responsive design.
• Google Lighthouse optimization — the starter includes a Lighthouse test script and reports scores of 100 across performance, PWA, accessibility, best practices, and SEO on Netlify.
• Code splitting of CSS and JS — component-based splitting keeps bundle sizes small.
• One-config site settings — site-config.js controls site title, description, URL, theme colors, social links, and logo.
• Built-in meta and social tags — a single Head component outputs the majority of meta, Open Graph, and Twitter Card tags.
• Favicon generation — a script generates all favicons and the manifest from a single PNG icon.
• Schema JSON-LD — a helper generates structured data for search engines.
• Dev tooling — Prettier, ESLint (based on eslint-plugin-react), CircleCI configuration, and GoogleChromeLabs size-plugin for bundle monitoring.

Who is it for?

• Marketing site developers — want a fast, audited starting point for company or product sites.
• Agencies and freelancers — who need a reusable starter with SEO and PWA features baked in.
• Jamstack enthusiasts — looking for a Gatsby starter that follows current best practices for performance and accessibility.

What can you do with Gatsby Universal?

• Launch a marketing site quickly — use the gatsby new CLI command with this repo to scaffold a new project.
• Run automated Lighthouse tests — execute the included lighthouse.test.js script to verify site quality in CI.
• Generate a fully-optimized PWA — the starter outputs a site with offline support, manifest, and sitemap with one build command.
• Customize globally — change the whole site's branding by editing site-config.js and rebuilding favicons.

How does Gatsby Universal work?

The starter installs like any Gatsby project, either by running gatsby new my-site https://github.com/fabe/gatsby-universal or cloning the repository and running yarn install. Development is yarn develop, production builds are yarn build, and yarn ssr runs a server-side render test for Lighthouse. The favicon script is automatically included in the build.

FAQ

Is Gatsby Universal free?

Yes, it is an open-source starter available on GitHub. You can clone it, modify it, and use it for personal or commercial projects without restriction.

What Gatsby version does it use?

The template is built for Gatsby v2 specifically, as stated in the repository description. It uses modern React features like React Context and IntersectionObserver.

Does it support offline usage?

Yes. The starter includes offline support via Gatsby's offline plugin, a web app manifest, and generated favicons, making it a full progressive web app.

How do I change the site configuration?

All site-wide settings live in a single site-config.js file at the root. You edit properties like siteTitle, siteDescription, siteUrl, themeColor, and your social media links, then rebuild.

Does it include testing setup?

It ships with a CircleCI configuration and a Lighthouse test script, as well as Prettier and ESLint for code quality.