https://github.com/fabe/gatsby-universal

🔮 An opinionated Gatsby v2 starter for state-of-the-art marketing sites.
https://github.com/fabe/gatsby-universal

boilerplate gatsby gatsby-starter jamstack pwa static-site universal

Last synced: 6 days ago
JSON representation

🔮 An opinionated Gatsby v2 starter for state-of-the-art marketing sites.

• Host: GitHub
• URL: https://github.com/fabe/gatsby-universal
• Owner: fabe
• License: mit
• Created: 2018-06-20T23:34:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-11T19:03:59.000Z (about 2 years ago)
• Last Synced: 2025-01-25T01:43:46.413Z (13 days ago)
• Topics: boilerplate, gatsby, gatsby-starter, jamstack, pwa, static-site, universal
• Language: JavaScript
• Homepage: https://gatsby-universal.netlify.com
• Size: 5.31 MB
• Stars: 615
• Watchers: 14
• Forks: 96
• Open Issues: 38
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

• awesome-list - gatsby-universal - of-the-art marketing sites. | fabe | 623 | (JavaScript)

README

        


  

    

  





  

    

  

  

    

  

  

    

  

  

    

  





  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 gatsby-universal.netlify.com.

  



***

## Features

- [X] 🤩 Page Transitions, component-based (with no-js support)

- [X] 👮‍♂️ `IntersectionObserver`, component-based (with polyfill)

- [X] 🌿 React Context for global UI state, with SSR

- [X] 💅 [`styled-components`](https://www.styled-components.com/) v4

- [X] 💯 Optimized with [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/) (including test)

- [X] 🔥 Code Splitting of CSS and JS (component based)

- [X] 🔪 Inline SVG support

- [X] ⚙️ One config file for site-wide settings

- [X] 💙 Most social + meta tags in one component

- [X] 🖼 All favicons generated, only one icon file needed

- [X] 🌐 Offline support

- [X] 📄 Manifest support

- [X] 🗺 Sitemap support

- [X] 📱 Generated media queries for easy use

- [X] 😎 [Prettier](https://prettier.io/) for code style

- [X] 👷‍♂️ [CircleCI](https://circleci.com/) support

- [X] 🐙 Schema JSONLD

- [X] 🔎 [`size-plugin`](https://github.com/GoogleChromeLabs/size-plugin) to keep an eye on your bundle sizes

- [X] 👨‍🏫 ESLint (based on [`eslint-plugin-react`](./.eslintrc))

Do you have suggestions or feedback? [Open an issue](https://github.com/fabe/gatsby-universal/issues/new)!

## Lighthouse scores (on [Netlify](https://netlify.com))

[![Lighthouse scores (on Netlify)](https://lighthouse.now.sh/?perf=100&pwa=100&a11y=100&bp=100&seo=100)](https://circleci.com/gh/fabe/gatsby-universal)

## Usage

[![Edit on CodeSandbox](https://cdn.rawgit.com/fabe/1dd805eed0153b47aba2b50cea2469ec/raw/64b0ea90c2a425d3847da908053f5f337128259b/edit-on-codesandbox-32px.svg)](https://codesandbox.io/s/github/fabe/gatsby-universal)

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/fabe/gatsby-universal)

```bash

# Installation with `gatsby-cli`

gatsby new my-site https://github.com/fabe/gatsby-universal

# Installation with `git clone`

git clone [email protected]:fabe/gatsby-universal.git 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

```

## Configuration

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

```js

module.exports = {

  siteTitle: `Gatsby Universal`,

  siteTitleShort: `GatsbyU`,

  siteDescription: `An opinionated starter for Gatsby.`,

  siteUrl: `https://gu.fabianschultz.com`,

  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

```bash

├── 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 schema.org 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.

```

## Author

* Fabian Schultz ([@fschultz_](https://twitter.com/fschultz_)) - [Stink Studios](https://stinkstudios.com)