A Beginner's Guide to Web Dev Work Part 2: Git & Github

Published 15 Mar 2021

This is Part 2 of a series for folks who are new to web development. If you want to understand what exactly we're doing, check out Part 1.

Overview #

At the end of the day, we need both Git and Node installed on our machines to run this project. This post is only addressing getting Git running on your machine and authenticating with Github.

It's worth noting again that these instructions are assuming you're on a Mac. If you're running Windows, there are probably some additional steps needed with WSL or WSL2 before you could do this.

Some context for installing Git #

(Not sure what Git is? Part 1.)
There are a couple different approaches you can take to installing Git on a Mac. If you really want to control the installation on your own, there are a number of installation options. (I'd suggest using Homebrew in this case, as it's a very common package manager, and it could come in handy for installing all sorts of other development related things.)

If you're new to development and/or want to minimize the amount of installing packages, I recommend taking advantage of Apple's command line tools. This is typically part of Apple's Xcode integrated developer environment (IDE), the program used to build Mac and iOS apps. The full app can be awfully large, (it was registering as 29gb when I checked on my machine 😱) so we're gonna skip the the full app and use the command line to install just the tools part of it.

A note about command line instructions #

As you enter the world of web development and start installing packages via the command line, you'll likely run into documentation that looks like this:

$ ls -al ~/.ssh
# Lists the files in your .ssh directory, if they exist

In the example above, the $ symbolizes that the rest of the line is a command to run. If you copy the full line including the dollar sign and paste it into your terminal, you'll get an error. It's weird, but it's a common convention. So keep an eye out for that, and make sure you're not copying the dollar sign. (You'll see a $ in your terminal to the left of where you'll type a command, so this convention is mimicking that pattern.)

The # is used to denote a comment on that line. This is the syntax used in bash and other similar scripting languages that run in your Terminal.

Step 1: Open Terminal #

Welcome to the command line! Macs come with Terminal.app by default, so you don't need to download anything for this. It should be hiding in Applications/Utilities if you can't find it. It might look weird and feel intimidating, but you'll get used to it, I promise.

Step 2: Install Apple's command line tools #

This will include Git! Copy the command below into your terminal and hit enter to run it.

xcode-select —install

You will be asked to confirm that you want to install the command line developer tools.

Once that installation finishes, you should be good to go. To make sure, let's check for the version of git you're using. Run the following:

git --version

If it outputs a version number after your command, you're all set! If it doesn't, you'll need to Google whatever error you run into.

Step 3: Set up your GitHub credentials on your machine. #

If you don't have a GitHub account yet, go ahead and sign up for one. This is where the vast majority of software projects are managed, so it will be handy to have.

GitHub has created a handy credential manager for interacting on the command line, you should be able to follow their instructions (ignoring the step to install git via homebrew unless you want to do that) to get set up on your machine: https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git#git-credential-manager

Step 4: Fork the Project #

Now that we have git installed, the next thing we want to do is get the code downloaded to your computer. Like lots of web development things, this is a little bit more compliated than you might expected. To start, visit the home page of the repository for this project: https://github.com/katywatkins/Not-Your-Average-Bird.

On that main repo page in GitHub you should see a button near the upper right that says "Fork". Click it and follow any instruction provided.

If you just wanted to use this project for your own personal purposes, you could clone it directly to your computer. (This is also a common workflow when working as a developer on company projects.) But when contributing to open source projects, you probably won't have access to directly edit the project. Instead, you'll fork, or make a copy of that project that you are then able to directly edit.

Step 5: Clone the repo to your computer #

Now that you have your own copy of the project, you should clone it on to your machine. (Make sure you're cloning from your fork of the repo!) Clicking GitHub's green "Code" button will give you an easy option for copying the repo url. It will probably show HTTPS as highlighted, which is what you'll want.

Next, you need decide where you want the project to live. I just have a "projects" folder on my machine in the root with various subfolders. Pick what works best for you.

Once you've settled on where the project should live, go to the terminal again, and navigate to the directory where you want this project to be stored. When on the command line, you'll use the cd command, which stands for "change directory".

cd your-folder-name

The filepath you see before the $ in your terminal shows you where you're working. If you want this project inside of a subfolder of your home directory called "test", you'd run cd test. If you want to go back up a level, you'd use two dots: cd ... These can be combined. If you're a couple levels deep, you could go up a level and then into a different folder with cd ../other-folder.

Once you're in the right place, it's finally time to clone the repo. Type git clone and paste the url you copied.

git clone https://github.com/katywatkins/not-your-average-bird.git

At this point, GitHub should ask you for credentials. You'll need to use the Personal Access Token you generated up above rather than your password. If everything works as it should, you won't have to authenticate next time you interact with Git, because the credentials are stored.

Step 6: Open the project in your code editor #

You should see the file structure of the project on the left. Congrats! You're over halfway there. Now we just need to install Node.js and we'll be able to start running this project locally.

Up next: A Node.js Local Environment