Creating a Gatsby JS project

Now in our first part of this tutorial we have already installed all the needed prerequisites.

Now we will use gataby cli command to create the Gatsby JS website to do so we need to enter the following command.

gatsby new

This command will ask the questions like following

  • What would you like to call your site? My Gatsby Site.
  • What would you like to name the folder where your site will be created? gatsby-website.
  • Will you be using JavaScript or TypeScript? JavaScript.
  • Will you be using a CMS? No (or I’ll add it later).
  • Would you like to install a styling system? No (or I’ll add it later).
  • Would you like to install additional features with other plugins? I have selected Add Responsive Images,Add an automatic sitemap, Generate a manifest file, Add Markdown and MDX Support.(Optional).
  • After this gatsby-cli will ask to create a folder along with plugins installation to that i have selected Yes.

Once all the options are chosen we can see the gatsby-website named folder has been created.

Now open the project folder using Visual Studio Code to do so we can use terminal using following command.

code .

Once project opened in VS Code we can run the project using following command

gatsby develop

Once this command will execute we can see the message in terminal like shown below.

To test our project is running we can run it on browser by entering URL http://localhost:8000/ in the browser.

Now we can see the following output on the browser.