How to create a Gatsby Blog - Part 1 ( Installing Dependencies )

Posted by : at

Category : gatsby   react


How to create a Gatsby Blog - Part 1 ( Installing Dependencies )

This is a part of a series - How to Create a Gatsby Blog from Scratch


Part 1 - Installing Dependencies

Gatsby Needs Node and Git for building and installing the dependencies. So first we might need to setup Node and GIT based on Which OS you are using

1. Install Node

Node.js is an environment that can run JavaScript code outside of a web browser. Gatsby is built with Node.js. To get up and running with Gatsby, you’ll need to have a recent version installed on your computer. npm comes bundled with Node.js so if you don’t have npm, chances are that you don’t have Node.js either.

For Windows Users

Download and install the latest Node.js version from the official Node.js website - https://nodejs.org/en/

For Linux Users ( Coming Soon )

For MacOS Users ( Coming Soon )

  1. Install Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. When you install a Gatsby “starter” site, Gatsby uses Git behind the scenes to download and install the required files for your starter. You will need to have Git installed to set up your first Gatsby site.

The steps to download and install Git depend on your operating system. Follow the guide for your system:

For Windows Users

Download and install the latest Git from the official Git website - https://git-for-windows.github.io/

When you’ve successfully started the installer, you should see the Git Setup wizard screen. Follow the Next and Finish prompts to complete the installation. The default options are pretty sensible for most users.

Open a Command Prompt (or Git Bash if during installation you elected not to use Git from the Windows Command Prompt).

Run the following commands to configure your Git username and email using the following commands, replacing Emma’s name with your own. These details will be associated with any commits that you create:

$ git config --global user.name "Sujay Kundu" $ git config --global user.email "sujaykundu777@gmail.com"

Great ! Now you are ready to create your Gatsby Project. Let’s get started :

Open your CMD/Bash shell to run the following commands to create a new Gatsby Project. :

** Install the Gatsby CLI**

$ npm install -g gatsby-cli

** Create a new Gatsby Project **

$ gatsby new <your-project-name>

This will be a interactive selection screen, where you can select a starter template for your project.

> What is your Project Called ? <your-project-name>

> What started would you like to use? gatsby-starter-default

Hit Enter

This will create a new bootstrapped project for you. Now you are ready to start working on the code. But before that we need to test if everything works as expected.

  1. Test the project, Run the dev server

$ cd <your-project-name> $ gatsby develop

This will start the development server at http://localhost:8000

Since we used the default gatsby-starter-default template, this will have some ui by default.We can modify that later !

If you want to run the production build.

$ gatsby build $ gatsby serve

This will serve a production build of your App at http://localhost:9000

Works ! Congrats. Way to Go !

  1. Setup VS Code

Lets open our project using VS Code ( You can use anything though - Your Choice !). You can download the latest VS Code Editor from here - https://code.visualstudio.com/#alt-downloads

$ code .

This will open our project using Visual Studio Code “.” refers to the current directory we are in.

  1. Setup Prettier Code Formatter Extension in VS Code

We will be using Prettier Code Formatter Extension to make/look our code pretty while we are building our App.

Search for Prettier Code Formatter in VS Code Extensions. Once Installed, make sure you have the following settings enabled, by default prettier will be used. So whenever you Press (Ctrl + Shipt + P), your document or selected code will be formatted by Prettier Formatter. Cool Right !

settings.json (VS Code configuration Settings)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Great Work ! Boss you gonna rock :D. In the next tutorial, we gonna modify our website and learn more about Gatsby Building Blocks :D