Gatsby CLI

npm install --global gatsby-cli

Structure

├── package.json ├── src │ └── pages │ └── index.js │ └── page2.js

Create Project from Boilerplate

gatsby new sample-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world

gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-two

gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-three

gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-four

Start dev server (with HMR)

gatsby develop

Generate compiled and minified assets (./public)

gatsby build

Test build

cd build &&/ http-server

Plugins

gatsby-config.js

module.exports = {
  plugins: [`gatsby-plugin-typography`],
};

Typography Plugins

npm install --save gatsby-plugin-typography npm install --save typography-theme-bootstrap typography-theme-lawton

Data Layer

"Everything that lives outside a React component is Data." Gatsby’s data layer is powered by GraphQL. Supported data sources: Markdown, WordPress, headless CMSs, and other data sources of all flavours. Combination of Source and Transformer plugins handle all data wiring.

GraphiQL (GraphQL integrated development environment (IDE))

http://localhost:8000/___graphql

Source Plugins

Bring data into Gatsby’s data system. npm install --save gatsby-source-filesystem

Transformer Plugins

Transform the raw content brought by source plugins.

Transform Markdown into HTML npm install --save gatsby-transformer-remark