[Gatsby]Setting up the environment

type

Post

status

Published

date

Jul 18, 2022

slug

summary

GitHub

Where we hosted the code for version control and every other stuff. We will be using GitHub Actions to deploy the site and use GitHub Pages to host it too.

If you haven’t already done so, you need to create a GitHub account and install Git or GitHub Desktop on your computer.

We will be using GitHub Desktop as example during this tutorial, you can download it from here:https://desktop.github.com/

Visual Studio Code

VS Code is the editor that I use for coding, Sublime Text is a good option too, but it does not have as many features as VS Code does, therefore I switched from Sublime Text to VS Code at one point.

Homebrew

Homebrew is package management for macOS, it is really handy for installing, uninstalling, and upgrading packages. It is a terminal/Linux-based software, therefore you need to familiarize yourself with the shell to fully utilize it.

The benefit of using Homebrew is that it takes care of many settings like Path setting and some other stuff, which makes things a lot easier.

You can install Homebrew by running the following command in your Terminal


/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew only works for macOS and Linux. For Windows devices, there is Chocolatey, I’ve never used it before but I heard good things about it, so worth a try if you are a Windows user.

NVM

NVM stands for Node Version Manager. It is really useful when you need to install a different version of Node and need to switch between them for projects or developments.

You can install NVM with Homebrew with the following command:


brew update
brew install nvm

brew update command is for updating the package directory in Homebrew so that you can have up-to-date packages installed.

After installing, we need to create a directory for NVM in home


mkdir ~/.nvm

Next, we need to configure the required environment variables. Use nano to open our bash profile


sudo nano ~/.bash_profile

then add the following lines to it


export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

Hit Ctl+O to save and hit Ctl+X to exit.

The last step for this section is to load the variables we just added to the current shell environment


source ~/.bash_profile

You can also achieve it by restarting your terminal.

You can run nvm in the terminal to see if the environment settings are applied. You should see something like this:


Node Version Manager (v0.39.1)

Note: <version> refers to any version-like string nvm understands. This includes:
  - full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
  - default (built-in) aliases: node, stable, unstable, iojs, system
  - custom aliases you define with `nvm alias foo`

 Any options that produce colorized output should respect the `--no-colors` option.

Usage:
  nvm --help                               
...

Install Node / npm

Next, we will be installing Node with NVM.

The current version of the node that our website is running is v16.15.0

You can install the latest version with this:


nvm install node

Or a specific version like this:


nvm install 16.15.0

By installing Node, it should automatically install npm on your computer too.

You can check the node status with:


nvm ls

->     v16.15.0
        v18.2.0
         system
default -> node (-> v18.2.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v18.2.0) (default)
stable -> 18.2 (-> v18.2.0) (default)
lts/* -> lts/gallium (-> v16.15.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.19.3 (-> N/A)
lts/gallium -> v16.15.0

The result will show you what version of Node is installed.

We can use this command to tell nvm what version of Node we want to use.


nvm use 16.15.0

Gatsby CLI

The last thing we need to install is Gatsby-CLI, it’s the command line interface for Gatsby and we will be using it quite heavily for the project.

You can install it with


npm install -g gatsby-cli

The -g flag indicates that this package is meant for global use, not just for the project we are in.

You can verify the gatsby installation with:


gatsby -v

It will return the current version of gatsby that is installed.

Next part, we will be talking about

[Gatsby]Setting up the Gatsby Website