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
- Part 2 - Understanding Gatsby Building Blocks
- Part 3 - Styling our App
- Part 4 - Fetching data using Graphql
- Part 5 - Working with Images
- Part 6 - Adding Markdown Support
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
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 )
- 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 "[email protected]"
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.
- 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 !
- 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.
- 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)
Great Work ! Boss you gonna rock :D. In the next tutorial, we gonna modify our website and learn more about Gatsby Building Blocks :D