Git and Github

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

A few people have heard of Git and Github but don't really know how they work and what they do. Lawrence and Rik go over an introduction to both of them.

Share this post

Transcript

00:12

[Rick] Hey, I'm Rickand I'm here today to talk aboutwhat is Git and what is GitHub.I'm in New York and most of our team worksall the way around the world.So for instance, I'm gonna be working on this projectwith Lawrence, whose currently in Melbourne, Australia.So what is Git and how do we use it as part of our team?So Git is just a way of teams being able touse the same folders.It's basically called a version control system.It controls how your files are changedand what are added and what are removed as well.But how does it work?So, I've got a project on my screen.Basically, I've got my pitch.txt.It's just in this folder over here called newclient.So I'm gonna work with Lawrence to make this better.So for instance, I'm going to pretendthat I don't know what the client's name is,I've got some spelling mistakes in my copy.And I'm gonna send this to Lawrencefor him to look at.How does that work?So, what I'm gonna do is I'm gonna set up Git,I'm gonna send all my files to GitHub,which is just a way to store files for a team.Lawrence is gonna take these files, add things,change things, maybe even remove things later onand we're gonna work and collaborate together.So let's talk about how Git works.So for this project, I'm going to be usinga tool called a Terminal.Now, I'm on Mac, Windows uses the Command prompt.They're just fairly easy to do the same thing.How's it work?Well, I've already got my Terminal in my dock.You can open it by going to Finder.It'll be in your applications, under Utilities.So under here is Terminal.So let's just open this up and see how it works.Now, the Terminal is quite a complex tool.We're just gonna make it a little bit bigger to begin with.What I want to do is try and getinto this new client projectand I wanted to send this to GitHubso that Lawrence can collaborate.So where currently am I in my folder?Now, if I was to do this in Finder,I'll be in my home folder.This lists out all of these projects.And I can see if I'm in the same folderby doing LS and pressing enter.So you can see here, all of the projects,or all the folders are exactly the sameas what I'd have in my Finder.Now, I wanna go into this newclient project.My newclient project is currently on my Desktopso I want to go into my Desktop first.So to change folder, I'm going to do CD.CD stands for change directory,just think of it as change folder.I'm going to do a space and then the folder name.This is the Desktop.Now again, I just want to see what's on my Desktop.I can do LS to see that.I can see there's home, newclient, and screenshotswhich is exactly what I've got on my Desktop at the moment.And what I'm gonna do next is go into my newclient folder.Newclient.

03:01

And now I can see what's currently in my newclient folderusing LS again.Now currently, there's just one file in herecalled pitch.txt.Now what I want to do is work with Lawrenceon this pitch.txt file.I want Lawrence to be able to make those changes,I want him to be able to add some files.So, what I need to do first of all is start Git.Now, Git is sometimes installed on Macs by default.You might need to install it.It's quite an easy process to do.When you have it installed,you can use the Git command line.Now we're in command line at the moment using Terminal,all I'd need to is type git.Now I wanna start a new Git projectjust for this folder.So to do that, I'm gonna do a space and the word init.This basically stands for initialize project in Git.So this is basically giving mesome extra tools I can use.I've got some plugins installed on my Terminalto make Git a little bit easier to use.Now in my folder I've currently got an empty Git repository.I do have a filebut it's not stored in Git.So what I want to do next is add my file into Git.Let's do that.All I need to do is do Git then a space,then add, then a space and the name of the fileor the folder I'm going to add to Git.Mine is called pitch.txt

04:23

So now I've added my file.But what I want to dois when I've finished making all my changes,I want to do basically a big save.

04:33

I wanna save all of the file changes I've doneand then send them to Lawrence.I might do lots of little ones on my computer.But when I've finished what I've done,I want to send them all to Lawrence instead.Now to do that, we do a commit.Now the way we do a commit in Gitis by doing gits, then a space, then the word commit,then a space.Now what we need to add into our commit is a message.So I need to tell Lawrence what I've done.The way we do this is we do a dash.I'm going to add all of the files I've changedand then add a message using M.Then I'm going to do spaceand in quotes, I'm going to write the name,a kind of a message to Lawrence to tell him what I've done.I've started the pitch documentand I closed, closed.

05:25

Now when I press Enter, I've added a commit.I've added my first change that I wanted to do.Now, how do I work with Lawrence on this.Currently all my files are on my computer.What I need to do is send thisto a kind of central repository,basically, somewhere where we storeall of the files together to work on.Now, usually what you do with thisuse a site like GitHub.There are other ones called Bit Bucketand GitLab as well.What I'm gonna do, is I've already got GitHub set up alreadyI signed up for it.I've logged in.All I want to do is go to new repositoryin the parent corner.So what I'm going to do is work with Lawrenceon this new repository.I'm gonna put it under our team, save my teamand make a new repository named, called newclient.This can be called something different than the files name.It's up to you.I don't wanna make it publiccause it's quite a private file.So I'll make it private.And I'm going to create a new repository.Now what this will give you some instructions.So I would say complete,

06:30

So I would say create a new repository on the command line,which we've already doneor push an existing repository from the command line.Now I've already set Git up,so what I want to do is the first line.So I'm going to copy thisand paste it into my commandline.

06:48

And then, I'm going to get the second lineand copy and paste that one in.So what this will do, is you'll send all of these documents,only got one change into Git.So if I refresh the page now,what will happen is we'll see all of the files.So currently, there's just one commit,which is the on that I've changed.Let's click here.Start the pitch document.I can send this to Lawrence nowand he can now change the files.So what I'll do next is hand over to Lawrenceand he'll explain how to get these filesand make some changes and push them back to GitHub for me.[Lawrence] Hello, Lawrence here.What I am going to do in this videois to firstly, show how to grab this repository from GitHub.

07:35

I currently don't have anythingto with this project on my computerand then when it's on my computer,I'm going to open it up, make some changes,push those changes back to Github's repository,so Rick can pull them down on his sideand we can have the same version of our code in sync.

07:56

So first step, is to go to GitHub.This our SuperHi pageand in here, we've got the new client project.So this is the one that Rick created for meand the way that we can grab thisand sort of bring it into our own computeris firstly, we can download a .zip file of it.But I'm not going to show you that way.I'm going to, instead, show you how to do itdirectly from the command line.

08:22

So if you just grab this link that you see here,it's this sort of funky, git@github.comwith a .git extension on the end.

08:32

From the commandline, I'm firstly goingto make sure that I'm on my desktop.So I wanna grab the folderand I want to copy it to my desktop.So the first thing is, I'm going to do LS,so it's going to list my directories.Normally, when you start up your terminal,it will take you, by default into your home folder.So this is talking from a Mac perspective,your home folder is this folder here,where it's got your movies and documentsand downloads and stuff like that.So I am going to CD, so change directory to Desktop.

09:10

So its telling me here, I'm now on my desktop,which is good.So, the next step is to type in git.So now it's going to gitand the command we're going to use is called cloneand then, you're going to put a space inand I'm going to paste in this link here.So get clone and then the address of that repository.

09:35

So this will take a few momentsand basically what it's done thereis it's connected to GitHub,it's found that repositoryand it's now copied it to my desktop.So, we'll have a look at this in Finder.We've got this pitch.txt fileand I'm going to go about adding some extra bits into there,make some changes to the pitchand then push them back.So how do I go about doing this?Well firstly, I'm going to actually open up this pitch fileand I'll open it in a slightly moreuser friendly app.

10:10

So this is IA Writer.It's just aapp for typing .txt files basicallyand I'm going to firstly put in the dearand we're going to make this out to Awesome Companyand I'm just going to correct some of these typos.so we'll have to probably create a team on this project.We think it's be a real fun project to do together,potentially supernew website.(mumbles)okay great.So I'm just going to save thatand next I'm going to grab a SuperHi logoto pop in there.So I'm just going to go our DropBox folderand we had it in here as pie designand we got our logo assetsso let's give them a nice big .png file.

11:07

So I'm just going to go back to desktopusing the sort of finder app thereand I'm going to paste that in there.So now what we have are two files pitch.txtand our logo.

11:22

So one way you can actually go about findingwhat things have changed in Git,is using a command called status.So I'm gonna do it from the command line here.Go inside of this new client folder.So given that we're currently in the desktop,I want to change directory into newclient.

11:43

And if I take LS in here, shows me we got these filesand if I type in Git status,what it's going to tell you here are a listof all the files that had been modified or deletedor added and whatever new files are in as while.In this sort of Git terminology,they call this untracked files.So they're not currently gonna be watched by Git.And I'm gonna go ahead and add these two things back in.

12:13

So I'm going to firstly say, git addand if I want to go aheadand just add everything inside of a folder,I could put a full stop.So by the full stop, it meansjust add all the files and foldersand just everything that's contained in here.So I'm gonna say git add everything.If I type in git status again,you can see these are now come up greenwhich is a good sign.It means we're able to now commit these to repository.

12:47

So what I'm gonna do next is to say git commitand then m for messageand the message I'm gonna put here is updated the pitch.txtand added the logoand I'm just gonna put an emoji in therefor good measure.Cool, so we get a message back,successfully added files.Gives you a little sort of breakdown of what's changed,how many lines of code have been inserted.Git's very clever actually at looking at text filesand seeing which particular lines have changedfrom file to file.So that's good, these files are now committed.So the last step is to actually push these backto the repository and the way that I can do thisis by using the push command.So if I say git pushand where I want to push it to is this repository.

13:48

So in the sort of GitHub, usual git contextthis is called the originand then what I need to push to the originis what's called the branch.

13:59

So, if you look at thissort of left hand drop down here in git,Git has this concept of some branching of codesso if you are working on something separatelyfor someone else,you could do your work on a separate branch,which would mean you're not overwriting anythingthat they might do.The whole aim of git is to really not interferewith saving over other people's workand things like that.So we've actually only just got the one branch herewhich is called the master.So this is what branches are called by default in Git.So I'm just going to push this branch up again.So I'm gonna say git pushand pushing it to the origin, which is GitHuband I'm gonna push to my master branch.So if you hit Enter there,it's gonna do its thing, connect to GitHuband it's pushing these things upand hopefully when that's done, it's given me a messagesaying it's all good.And if I refresh now on the GitHub pageI will see what's changedand we can see that I am now the latest personto have pushed an update to this.So if you go to the commits here,we can see Rick's first oneand here and now we can see my one.And you can see exactly what has changedso with these sort of dark green highlighted bits,it actually does quite a good jobof being able to the diff between the two,pieces of text and tell you exactly what has changed.This becomes particularly useful when you're working on codeso you can really track specific thingsin files that have been changedand in addition to that added the logo too.So that's how it works.On Rick's side, what he can do nowis to then pull back those changes unto his computer.He can then do some more stuff,push it back upand this is just a really good way of workingespecially with code.It means that you're not overwriting other people's workand you're able to collaborate on thingstogether at the same timeand kinda keep things in a nice controlled sort of sane way.

16:06

So that's it.And I hope it was useful.

Published

September 20, 2017

Difficulty

Beginner

Posted by

Rik Lomas

Topics

More videos

Beginner

23:17

INTERVIEW

Planning, Designing + Coding Your First iOs App with Lou

Beginner

13:53

TUTORIAL

How to Make a Javascript Accordion

Intermediate

17:52

TUTORIAL

How to Add International Times with Timezones to Your Website

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!