Gatsby Material-UI Starter

Starter template for Gatsby using Material-UI (based on Gatsby default starter. See live demo here.

For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

The Material-UI theme is configured in src/getPageContext.js. This theme is propagated down a component tree using the withRoot HOC (see src/withRoot.js). Consequently, top-level components should be wrapped with this HOC. This will ensure that the theme is available to all the nested components. In this starter template, I have wrapped the Layout component with withRoot - it is the root component used by all pages.

Additionally, if you create your own JSS styles in a component, you need to wrap it with the withStyles HOC in order to pass your custom styles down (e.g. src/components/layout.js).

I have also provided a way to create global styles (see src/styles/styles.css). This allows you to style simple HTML markup, e.g. markup generated by Markdown. An alternate way to do this is using gatsby-plugin-typography.

Prerequisites

Make sure that you have the Gatsby CLI program installed:

npm install --global gatsby-cli

Dev Build

$ yarn
$ yarn develop

Now point your browser to http://localhost:8000.

Production Build

$ yarn build
$ yarn serve

Now point your browser to http://localhost:9000 and test the production build locally. When you are happy with it, deploy the public folder to your production web server.

Formatting JavaScript Code

$ yarn format