Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nareshbhatia/gatsby-starter-material-ui
Gatsby Material-UI Starter
https://github.com/nareshbhatia/gatsby-starter-material-ui
Last synced: about 1 month ago
JSON representation
Gatsby Material-UI Starter
- Host: GitHub
- URL: https://github.com/nareshbhatia/gatsby-starter-material-ui
- Owner: nareshbhatia
- License: mit
- Created: 2018-08-27T22:56:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T22:54:01.000Z (about 6 years ago)
- Last Synced: 2024-08-04T01:05:00.820Z (4 months ago)
- Language: JavaScript
- Size: 397 KB
- Stars: 33
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-ui - Gatsby-starter-material-ui - A starter template for Gatsby using Material-UI. (Boilerplates)
README
# Gatsby Material-UI Starter
Starter template for Gatsby using Material-UI (based on [Gatsby default starter](https://github.com/gatsbyjs/gatsby-starter-default/tree/v2). See live demo [here](https://gatsby-starter-material-ui.netlify.com/).
For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/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](https://www.gatsbyjs.org/packages/gatsby-plugin-typography/).
## Prerequisites
Make sure that you have the Gatsby CLI program installed:
```sh
npm install --global gatsby-cli
```
Dev Build
---------
```bash
$ yarn
$ yarn develop
```
Now point your browser to http://localhost:8000.
Production Build
----------------
```bash
$ 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
--------------------------
```bash
$ yarn format
```