Well done!

You have completed Git and GitHub Workflow for Developers!

Preview

Git and GitHub Workflow for Developers

9:06 with Travis Alstrand

Learn how to create a local git repository and seamlessly connect it to a GitHub repository using the terminal.

Resources

Text Editor Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Hi everyone, my name is Travis, and I'm an instructor and 0:09

a student success specialist in the Techdegree program here at Treehouse. 0:12

I'd like to show you my preferred way of creating a GitHub repository and 0:17

pushing your project files to it using the terminal. 0:20

This will be a common approach when working in a professional development 0:24

environment and with a team, so it's good to start familiarizing yourself with it. 0:27

In this video, I'll walk you through the step-by-step process of creating a local 0:32

Git repository on your computer, setting up a new GitHub repository, 0:37

connecting them, and pushing commits to GitHub using the terminal. 0:41

Let's get started. 0:45

The first thing we'll wanna do is download the project files provided by Treehouse. 0:47

For this video, I'm going to be using the Full Stack JavaScript files for Project 1, 0:51

but this process will work for any Techdegree or project you're working on. 0:56

I'm here on the project page under the Getting Started tab. 1:01

On the right side is a link to download the project files, let's click it and 1:05

download them. 1:09

Next, unzip the downloaded project files. 1:11

If you're unsure of how to do this, be sure to check the teacher's notes for 1:15

some help. 1:18

I'm renaming the project folder but you don't have to, 1:20

it's just my personal preference. 1:22

Now, I'm going to move my project to my desktop, but 1:25

you can store yours wherever you prefer. 1:28

Now, we need to make our project folder a local Git repository, 1:31

let's open it up in our preferred text editor. 1:34

I'm going to use Visual Studio Code, check the teacher's notes below on some links 1:37

for recommended text editors if you don't have one yet. 1:42

Let's open up the integrated Terminal. 1:45

You can select Terminal to New Terminal, but 1:48

a useful shortcut is control back tick. 1:51

This should automatically be navigated to the root of this folder. 1:54

But if not, you can use the CD command to change directories to ensure you're at 1:57

the top level of this project folder. 2:01

Let's enter the command git init and press Enter. 2:05

This command initializes a new Git repository in the directory you specified. 2:08

It creates a hidden .git directory that contains all the necessary files and 2:13

folders for Git to manage version control. 2:17

As you can see, all of our files are marked green and are tagged as untracked. 2:20

Before tracking any files, let's create a .gitignore file. 2:25

A .gitignore file tells Git to ignore specific files or 2:29

directories when tracking changes in a repository. 2:32

It's useful for excluding sensitive or unnecessary files and 2:36

keeping your repository organized. 2:39

I always do this before adding any files to Git to spare myself some trouble 2:42

later on. 2:46

So to demonstrate this, I'm gonna create a file that I don't want to add to Git and GitHub. 2:47

So let's click New File at the root of our folder and name it ignore_me.html. 2:52

Inside of this file, I'm going to use the Emmet shortcut to add some boilerplate 3:00

HTML by typing an exclamation point and pressing Tab. 3:05

Let's save that and now let's create our .gitignore file. 3:09

Inside, I'm going to simply type, ignore_me.html. 3:19

Let's also add some common files we would normally want to ignore. 3:25

I use an extension with Visual Studio code that sometimes creates a .vscode folder, 3:29

so let's add that, 3:33

and if you're on a Mac, adding .DS_Store is always a good idea. 3:35

I won't be installing any dependencies with this project, so 3:41

don't worry if you don't understand what that means yet, but 3:44

a very important folder to ignore in later projects will be node_modules. 3:47

So let's type node_modules/. 3:52

The trailing / is telling .gitignore that this is a directory, or 3:57

folder, and we wanna also ignore everything inside of it. 4:01

Let's save this file with Command S on Mac, or Ctrl S on Windows, 4:06

you'll now notice that ignore_me.html is not colored or 4:11

tagged as untracked like the other files anymore, perfect. 4:16

Next, let's stage our first commit that we'll soon push to GitHub. 4:21

Let's run the command git add ., this dot is telling it to add all of the folders 4:26

and files in this directory unless they're listed in the .gitignore, of course. 4:30

You could also specify a certain file or folder name instead of the dot, but 4:36

most of the time, I just use the dot. 4:40

Now you can see they're all tagged as added. 4:43

Next, run the command git commit -m "initial commit". 4:46

We should always provide a helpful commit message within those double quotes 4:51

stating changes that we've made since our last commit, 4:56

but for this first one I'll just use initial commit, 5:00

now our project files are staged and ready to push. 5:04

The next step is to create a new repository on GitHub. 5:09

Go to github.com and log into your GitHub account. 5:12

If you don't have an account, you'll need to sign up for one. 5:16

Check the teacher's notes below for 5:19

a link to a video showing you how to complete that process. 5:21

Once you're logged in, click on the New button to create a new repository. 5:25

Don't worry if your screen looks a little different than mine, 5:31

the process will be the same and you can always check the teacher's notes for 5:34

any updates and changes. 5:37

Give your repository a short and descriptive name. 5:39

I'll name mine my-random-quote generator with no spaces. 5:42

You can also add a description here. 5:48

I'll say, my first project submission for the full stack JavaScript Tech degree. 5:50

Here's where you can set your repo to be public or private. 5:57

I'm going to leave it as public so that others can review and 6:01

grade it when I'm ready to submit. 6:04

You can also initialize the repo with a README file, a .gitignore file, and 6:07

a license. 6:12

I'm going to leave those all blank for now and click the Create Repository button. 6:14

Awesome, we've now created our GitHub repository. 6:20

GitHub is now providing us with some convenient commands we can use to make 6:24

this process much easier and faster. 6:27

We can see this second block of commands is titled or 6:30

push an existing repository from the command line, that's exactly what we want. 6:34

Let's click this Copy button here on the right. 6:41

Now, back in our Terminal, we can paste them all with Command V on Mac or 6:44

Control V on Windows. 6:48

These first two commands will set up the connection to our GitHub repository and 6:50

main branch. 6:54

The third command will push our staged commit for us. 6:55

Let's hit Enter and refresh our GitHub page. 6:59

Our project files have been uploaded to our GitHub repo successfully, nice. 7:07

Now, let's see how we go about pushing new changes after we've completed some work on 7:13

our project. 7:17

For this example, I'm just going to make a small change. 7:18

I'm gonna create an array, which will eventually hold my quote objects. 7:22

If I save this change, you'll see the file changes to yet 7:40

another color and is tagged as modified. 7:43

Back in our terminal, let's again run the command git add .. 7:50

Then, git commit -m "started creating my quotes array". 7:58

Now because of those three helpful commands we copied and 8:06

pasted from GitHub earlier, all we have to type now is git push. 8:09

Finally, let's refresh our GitHub page, and we can see if the changes have been 8:18

successfully pushed to our GitHub repository. 8:23

There's the commit we just pushed, perfect. 8:27

From here on out, we only need to use those last three commands, 8:29

git add ., git commit -m "commit message", and git push, and that's it. 8:33

Now you know how to initialize a new Git repository, stage and commit changes, and 8:38

connect it to a remote repo on GitHub using the Terminal, congratulations. 8:43

I hope this video was helpful and 8:48

removed some of the fear that can come with using the Terminal. 8:50

Refer back to this video whenever you need a refresher, 8:54

but this will all become second nature after doing it a few times, 8:58

we'll see you next time, 9:01

and until then, happy coding! 9:02

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace