Skip to content
๐Ÿ”ฎ An opinionated Gatsby v2 starter for state-of-the-art marketing sites.
JavaScript
Branch: master
Clone or download
dependabot and fabe Bump lodash from 4.17.11 to 4.17.14 (#56)
Bumps [lodash](https://github.com/lodash/lodash) from 4.17.11 to 4.17.14.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](lodash/lodash@4.17.11...4.17.14)

Signed-off-by: dependabot[bot] <support@github.com>
Latest commit 33e248f Jul 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
content Update design. Aug 22, 2018
scripts Add lighthouse tests to CircleCI. Jul 27, 2018
src Added prop types to the wrapPageElement, fixes eslint error (#21) Jan 25, 2019
static Fix robots.txt. Jul 27, 2018
.editorconfig Add config files. Jun 21, 2018
.eslintrc Loosen eslint rules. Mar 14, 2019
.gitignore Init. Jun 20, 2018
.prettierrc
gatsby-browser.js Add ESLint. Sep 26, 2018
gatsby-config.js Fix png importing problem (#48) May 6, 2019
gatsby-node.js Update DirectoryNamedWebpackPlugin config (#35) Mar 17, 2019
gatsby-ssr.js Update styled-components dependencies. Sep 10, 2018
license.md Update readme.md Sep 10, 2018
package.json Update `react`. May 9, 2019
readme.md fix the clone script (#50) May 25, 2019
site-config.js Add fb:app_id. Jul 10, 2018
yarn.lock Bump lodash from 4.17.11 to 4.17.14 (#56) Jul 20, 2019

readme.md

gatsby-universal

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


Features

  • ๐Ÿคฉ 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)

Usage

Edit on CodeSandbox Deploy to Netlify

# Installation with `gatsby-cli`
gatsby new my-site https://github.com/fabe/gatsby-universal

# Installation with `git clone`
git clone git@github.com: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.

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

โ”œโ”€โ”€ 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

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