An opinionated starter for using Gatsby v2 with React Context, tag-agnostic styled-components, page transitions, scroll events with IntersectionObserver
. Made for state-of-the-art marketing sites.
You can access a demo of this starter online at https://gatsby-universal.netlify.com.
- ๐คฉ 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)
- โ๏ธ 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
Lighthouse scores (on Netlify)
๐จ To make sure you have the correct beta versions of Gatsby, please use
yarn
to install the dependencies.
# Installation
gatsby new my-site https://github.com/fabe/gatsby-universal
# 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: `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
insidestatic/
!
โโโ 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.
- Fabian Schultz (@fschultz_) - Stink Studios