How to build your first Gatsby project.

6 Quickest steps and prerequisites to get started with Gatsby

Gatsby is a blazing fast modern site generator for React. Gatsby can be used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. It makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.

• Prerequisites:

1 .To have Node.js installed in the system.

• 6 Steps to get started with Gatsby

1. Install the Gatsby CLI.
 npm install -g gatsby-cli

2. Create a new site.
gatsby new site-name

3. Change directories into the site folder.
 cd site-name

4. Start the development server.
 gatsby develop

5. Create a production build.
 gatsby build

6. Serve the production build locally.
gatsby serve

By default, project will start running on localhost:8000

• Note: The command to run the project in development mode is npm run develop.
• Gatsby Project Files:
• gatsby-browser : We can add customized jquery code.
• gatsby-config : you can lots of pretty amazing plugins from https://www.gatsbyjs.org/plugins/ . and Command To install the plugin is npm install –save plugin-name . So, We gatsby-config file will consist of plugin options.
• gatsby-node : Gatsby gives plugins and site builders many APIs for controlling your site. If your plugin performs async operations (disk I/O, database access, calling remote APIs, etc.) you must either return a promise or use the callback passed to the 3rd argument. Gatsby needs to know when plugins are finished as some APIs, to work correctly, require the previous APIs to be complete first.
• gatsby-ssr : Implement any of these APIs by exporting them from a file named gatsby-ssr.js in the root of your project.

APIs:

1. onPreRenderHTML
2. onRenderBody
3. replaceRenderer
4. wrapPageElement
5. wrapRootElement

• There are several folders in src folder

        Pages : you can add your pages in this folder.
        Images : You can add your image files to this folder.
        Components : You can create each reusable components to this folder.