Beginner’s Guide: Building a Website with Gatsby (Ubuntu)

This quick tutorial will help you learn a few CLI tool basics with git, gatsby, vscode, and node 😀 #NerdChallenges

Casey (CJ) Gerena
Feb 29, 2020 · 12 min read
Let’s get Gatsby.Js up and running!

The Goal

Background — What is Gatsby.js?

Optional Background — #NerdChallenges?

Let’s get started

Step 1 — Installing Visual Studio Code

Step 2— What is GitHub? Why do I need it?

sudo apt-get update
sudo apt-get install git
git --version
cj@cj-ubuntu:~$ git --version
git version 2.20.1

Step 3 — Install Node.js

lsb_release -a
$ lsb_release -aDistributor ID: Ubuntu
Description: Ubuntu 19.10
Release: 19.10
Codename: eoan
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
node --version
npm --version
cj@cj-ubuntu:~$ node --version
v12.16.1
cj@cj-ubuntu:~$ npm --version
6.13.4

Step 4 — Installing the Gatsby CLI

sudo npm install --global gatsby-cli
Success!Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.Usage: gatsby <command> [options]Commands:
gatsby develop

+ gatsby-cli@2.9.0
added 1 package from 1 contributor and updated 18 packages in 13.979s

Step 5 — Launch our first Gatsby site!

Visual Studio Code Starting Screen
Opening a new terminal in Visual Studio Code
gatsby new my-first-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default
cd my-first-gatsby-site
gatsby develop
Gatsby Development Server Running on http://localhost:8000
Gatsby Running on our machine! w00t 😃

Nerd Challenge #1

Step 6 — Save your changes to GitHub

GitHub Repository Settings
git init
git add .
git status
Screenshot showing all the files we added to the git repo
git config --global user.email "you@example.com" 
git config --global user.name "your name"
git commit -m "My first Gatsby site with GitHub"
git remote add origin https://github.com/CJGjr/my-first-gatsby-site.git
git push -u origin master
Our first git push!
Awesome! Our files are now saved on GitHub.com

Nerd Challenge #2

Nerd Challenge #3

Wrapping-Up

Summary of Nerd Challenges

Nerd Challenge #1

Nerd Challenge #2

Nerd Challenge #3

Nerd Challenges

A community of individuals aimed at providing users with a…

Nerd Challenges

A community of individuals aimed at providing users with a learning platform to build, acquire, and improve new skills and qualifications.

Casey (CJ) Gerena

Written by

Hello! I’m an IT Nerd With A Passion For Helping Others, The AWS Cloud, Web Development, and PC Gaming. I love #NerdChallenges, message me anytime!

Nerd Challenges

A community of individuals aimed at providing users with a learning platform to build, acquire, and improve new skills and qualifications.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store