Working Remotely: How to Clone and Create a New Branch with Git

If you want to work on a remote team in 2020, then mastering Git is an essential skill. If you don't understand Git, you risk losing your job as @jrdev_ shares about a junior dev at his company:

Do not skip on learning git!

Our company had to let someone go recently because they didn't take the time to learn git properly (despite the amount of training received), and kept messing up the branches causing more work for other devs.

Make sure you know the basics

— Jr. Dev 👨🏾‍💻 (@jrdev_) June 28, 2020

This tutorial will teach you how to clone an existing GitHub repo into your local system using the terminal, make your own development branch, and then push your work to the GitHub repo development branch.

---

First, open the terminal and ensure you have Git installed on your local system by typing:

$ git --version

If you don't see a git version print out in the terminal, install Git following this Atlassian Git Install Tutorial

---

In order to clone an existing GitHub repo to your local system, you'll need the URL associated with the repo. This can be given to you by a manager or found by clicking the green Clone button in the GitHub repo main page.

Copy the URL and then head over to the command line terminal. Navigate to the directory where you want the project to live on your local system. There's no need to prepare an empty folder for the repo. The process of cloning will create a folder with the repository name. Once you've navigated to your directory of choice via the terminal, type the following line into the command terminal. Note that you must use the URL you've copied from the clone button:

$ git clone https://github.com/USERNAME/github-repo.git

Cloning creates a remote connection called "origin" that serves as the linkage between your local environment and the repository stored on GitHub. If you're unsure if the clone worked, navigate to the new repo folder via the terminal and then type:

$ cd github-repo
github-repo$ git remote -v

The terminal will print out the URL and the remote connection name 'origin'. It will look something like:

origin https://github.com/USERNAME/github-repo.git (fetch)
origin https://github.com/USERNAME/github-repo.git (pull)

You now know that your local system has a remote connection to github-repo. Now install any dependencies by typing:

github-repo$ npm install

You now have everything required to run the project in your local environment. But first, you'll likely want to create your own branch on the GitHub repository, so you're not pushing your code directly to the master branch. So let's create a new branch from the terminal called "develop" by typing the following commands.

github-repo$ git checkout -b develop
github-repo$ git push origin develop

The above code creates a new branch, moves you to that branch, and then copies and pushes the existing project files into the newly created "develop" branch. To verify a successful branch creation, view the list of branches within the repo by typing:

github-repo$ git branch -r

You'll see a print out in your terminal that will look something like:

origin/master
origin/develop

If you want to know what branch you are currently on, type:

github-repo$ git branch --show-current

In our case the terminal printout will say "develop" because we switched to that branch in the process of creating it.

So let's push our day's work into the develop branch. This is a three step process:

github-repo$ git add .
github-repo$ git commit -m "Added a new feature"
github-repo$ git push origin develop

The above git commands first add the changes to a staging area. Once staged, the changes are committed to the working branch. (In our case the "develop" branch as revealed by the "git branch --show-current" command earlier.) We include a commit message using the "-m" tag. The final command pushes the changes to the develop branch by accessing the remote connection named "origin."

For more resources on Git, visit:

try.github.io

Learn Git Branching: An Interactive Visual Git Playground

GitHub Docs

Comments

[Ken Hudak]

Great summary, Nathan. And thanks for the reminder that a new folder is created---I have a couple of ugly nested folders because I was manually creating the folder.

[Nathan B Hankes]

Thank you for the feedback, Ken! -Nate