Skip to content
๐Ÿ”ฎ An opinionated Gatsby v2 starter for state-of-the-art marketing sites.
Branch: master
Clone or download
Latest commit fbe237f Jun 9, 2019


CircleCI Greenkeeper badge styled with prettier Netlify Status

An opinionated Gatsby v2 starter with React Context, styled-components, page transitions, scroll events with IntersectionObserver and a focus on accessibility and SEO. Made for state-of-the-art marketing sites.

You can access a demo of this starter online at


  • ๐Ÿคฉ Page Transitions, component-based (with no-js support)
  • ๐Ÿ‘ฎโ€โ™‚๏ธ IntersectionObserver, component-based (with polyfill)
  • ๐ŸŒฟ React Context for global UI state, with SSR
  • ๐Ÿ’… styled-components v4
  • ๐Ÿ’ฏ Optimized with Google Lighthouse (including test)
  • ๐Ÿ”ฅ Code Splitting of CSS and JS (component based)
  • ๐Ÿ”ช Inline SVG support
  • โš™๏ธ One config file for site-wide settings
  • ๐Ÿ’™ Most social + meta tags in one component
  • ๐Ÿ–ผ All favicons generated, only one icon file needed
  • ๐ŸŒ Offline support
  • ๐Ÿ“„ Manifest support
  • ๐Ÿ—บ Sitemap support
  • ๐Ÿ“ฑ Generated media queries for easy use
  • ๐Ÿ˜Ž Prettier for code style
  • ๐Ÿ‘ทโ€โ™‚๏ธ CircleCI support
  • ๐Ÿ™ Schema JSONLD
  • ๐Ÿ”Ž size-plugin to keep an eye on your bundle sizes
  • ๐Ÿ‘จโ€๐Ÿซ ESLint (based on eslint-plugin-react)

Do you have suggestions or feedback? Open an issue!

Lighthouse scores (on Netlify)

Lighthouse scores (on Netlify)


Edit on CodeSandbox Deploy to Netlify

# Installation with `gatsby-cli`
gatsby new my-site

# Installation with `git clone`
git clone my-site
cd my-site
yarn install

# To develop
yarn develop

# To build
yarn build

# To test SSR (for Lighthouse etc.)
yarn ssr

# To format JS (precommit)
yarn format

# To generate favicons (included in `build`)
yarn build:favicons


Find the site-wide configuration in site-config.js.

module.exports = {
  siteTitle: `Gatsby Universal`,
  siteTitleShort: `GatsbyU`,
  siteDescription: `An opinionated starter for Gatsby.`,
  siteUrl: ``,
  themeColor: `#000`,
  backgroundColor: `#fff`,
  pathPrefix: null,
  logo: path.resolve(__dirname, 'src/images/icon.png'),
  social: {
    twitter: `gatsbyjs`,
    fbAppId: `966242223397117`,

๐Ÿšจ Don't forget to update your robots.txt inside static/!

Folder structure

โ”œโ”€โ”€ gatsby-browser.js # Specify how Gatsby renders pages in the browser
โ”œโ”€โ”€ gatsby-config.js # Gatsby config, mostly taken from `site-config.js`
โ”œโ”€โ”€ gatsby-node.js # Modify webpack config
โ”œโ”€โ”€ gatsby-ssr.js # Specify how Gatsby builds pages
โ”œโ”€โ”€ site-config.js # Global settings for the whole site, used by multiple scripts
โ”œโ”€โ”€ content # Content & data, in both json and markdown
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”‚   โ”œโ”€โ”€ head # All meta tags etc.
โ”‚   โ”‚   โ”œโ”€โ”€ io # Intersection Observer component, uses render props
โ”‚   โ”‚   โ”œโ”€โ”€ layout # Layout component
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ layout.css.js # .css.js for component's `styled-components`
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ layout.js
โ”‚   โ”‚   โ””โ”€โ”€ transition # Page Transition component, used by Gatsby APIs
โ”‚   โ”œโ”€โ”€ constants # Site-wide constants (breakpoints, colors, etc.)
โ”‚   โ”œโ”€โ”€ containers # Container components if store is needed
โ”‚   โ”œโ”€โ”€ helpers
โ”‚   โ”‚   โ”œโ”€โ”€ schemaGenerator.js # Generates JSON-LD snippets
โ”‚   โ”‚   โ””โ”€โ”€ mediaTemplates.js # Creates media queries for styled-components
โ”‚   โ”œโ”€โ”€ images # Images needed by the site/theme (not content)
โ”‚   โ”œโ”€โ”€ pages
โ”‚   โ”œโ”€โ”€ store # Store and provider of a React.createContext instance
โ”‚   โ””โ”€โ”€ global.css.js # Global CSS
โ””โ”€โ”€ scripts
    โ”œโ”€โ”€ lighthouse.test.js # Tests the site specified inside `site-config.js` with Google Lighthouse (WIP)
    โ””โ”€โ”€ favicons.js # Generates favicons and manifest using one png only.


You canโ€™t perform that action at this time.