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 oneslint-plugin-react
)
Do you have suggestions or feedback? Open an issue!
Netlify)
Lighthouse scores (onUsage
# 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 yourrobots.txt
insidestatic/
!
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
- Fabian Schultz (@fschultz_) - Stink Studios