Coding

GitHub Tutorial for Beginners | The Basics

  • 00:00:01 welcome to this video we talked about
  • 00:00:05 get all ready which allowed us to
  • 00:00:07 control different versions of our code
  • 00:00:09 locally on our machine in this video
  • 00:00:12 it's time to bring our code to the cloud
  • 00:00:15 so basically we will push our code from
  • 00:00:18 our local repository to a web base to a
  • 00:00:21 remote repository and for that we will
  • 00:00:24 use github now let's find out how this
  • 00:00:27 works
  • 00:00:30 now as I said github allows us to store
  • 00:00:34 our local git repositories in the cloud
  • 00:00:37 so we turned them into remote
  • 00:00:39 repositories for that we first need well
  • 00:00:42 a repository so let's quickly create a
  • 00:00:44 new git project not github yet right
  • 00:00:48 here I'm using Visual Studio code use
  • 00:00:50 the code editor of your choice of course
  • 00:00:52 so in here I'll create a new folder
  • 00:00:54 maybe name it
  • 00:00:55 github like that and then I will open
  • 00:00:58 this folder and let's maybe quickly add
  • 00:01:02 an index.html file one right here then
  • 00:01:06 open the terminal right there and now
  • 00:01:11 simply initialize our git repository
  • 00:01:15 right here our local repository add the
  • 00:01:18 change commit the change like that say
  • 00:01:22 start
  • 00:01:22 and then let's maybe add a second change
  • 00:01:26 because I want to have two commits in my
  • 00:01:28 branch just saying text and let's also
  • 00:01:31 add this text right here maybe written
  • 00:01:36 correctly like that and then we will add
  • 00:01:41 a text and then we will have our two
  • 00:01:45 commits right here as we can see if we
  • 00:01:47 go to get branch we only have our master
  • 00:01:51 branch of course and if we lock that we
  • 00:01:53 have our two commits that's everything
  • 00:01:55 we know so far so how can we now get
  • 00:01:58 this local repository to a remote
  • 00:02:01 repository so a repository on github
  • 00:02:03 well for that we first need to go to
  • 00:02:06 github.com right here and create an
  • 00:02:09 account the account is generally for
  • 00:02:11 free if you make your repositories
  • 00:02:15 accessible to the public if you want to
  • 00:02:17 have private repositories or
  • 00:02:18 repositories that can only be viewed by
  • 00:02:20 you basically or the people you allow to
  • 00:02:22 do so then it's not for free but
  • 00:02:25 normally the public ones should be
  • 00:02:26 sufficient so as I said create such a
  • 00:02:28 free github account and then simply
  • 00:02:31 click right here onto this plus and add
  • 00:02:33 a new repository you can now give this
  • 00:02:36 repository a name I will just name it
  • 00:02:38 get and my description will also be
  • 00:02:40 really long I just saying it and now you
  • 00:02:42 can see the difference between the
  • 00:02:43 public
  • 00:02:44 the private repository as I said I will
  • 00:02:47 stick to the public one and then you can
  • 00:02:49 decide if you want to initialize the
  • 00:02:51 repository with a readme this basically
  • 00:02:53 means that this repository right here
  • 00:02:55 would already contain some data some
  • 00:02:58 information but as you can see right
  • 00:03:00 here we can skip this step if you are
  • 00:03:02 importing an existing repository and
  • 00:03:05 that's exactly what we're going to do
  • 00:03:07 right here so we will create this
  • 00:03:08 repository without any content and then
  • 00:03:11 push the content of our local repository
  • 00:03:13 into this remote repository we see how
  • 00:03:16 this works in a few seconds then we
  • 00:03:19 could add a git ignore file or add a
  • 00:03:20 license
  • 00:03:21 I will not dive into that right now
  • 00:03:22 because for the basics it's not really
  • 00:03:25 that important so let's skip this and
  • 00:03:27 let's now press create repository right
  • 00:03:29 here with that our repository is created
  • 00:03:33 and you can also see it right here you
  • 00:03:35 can see my username this one right here
  • 00:03:37 and here you can see our repository
  • 00:03:40 right there and you can see we have this
  • 00:03:42 git repository which you can open right
  • 00:03:44 here but this repository doesn't contain
  • 00:03:46 any kind of code any kind of information
  • 00:03:49 of course that's what we have some nice
  • 00:03:51 hints right here about what you could do
  • 00:03:53 now the important thing is this one
  • 00:03:56 right here because that's what we want
  • 00:03:58 to do we want to push an existing
  • 00:04:00 repository for that we simply can use
  • 00:04:02 this code right here and paste it into
  • 00:04:05 our code editor and now I could press
  • 00:04:09 ENTER and continue but then the problem
  • 00:04:12 is well what did we write here so let's
  • 00:04:14 have a quick look at what we actually
  • 00:04:15 copied
  • 00:04:16 I think the good command is quite clear
  • 00:04:19 remote add simply means that we want to
  • 00:04:22 establish a connection between our local
  • 00:04:25 repository this one right here and a
  • 00:04:28 remote repository so the repository on
  • 00:04:31 github origin then is our name for this
  • 00:04:35 remote repository because we want to
  • 00:04:37 make sure that we establish the
  • 00:04:39 connection between a specific remote
  • 00:04:42 repository therefore we have to give it
  • 00:04:44 a name of course and this name typically
  • 00:04:47 is origin you can of course also choose
  • 00:04:50 a different name but for the purpose of
  • 00:04:52 this basics video we will simply stick
  • 00:04:54 to this origin naming convention
  • 00:04:57 after that we also have this URL right
  • 00:04:59 here you could also use SSH but this is
  • 00:05:03 also something we will skip right now
  • 00:05:05 because with HTTPS we can perfectly get
  • 00:05:08 started with github and also push our
  • 00:05:10 code to well get up from our local
  • 00:05:12 repository now with that we can hit
  • 00:05:16 enter now and well now nothing changed
  • 00:05:20 actually that's only partially true
  • 00:05:23 because if we go back right here and
  • 00:05:25 reload that page you can see we still
  • 00:05:28 don't have any branches or something
  • 00:05:29 like that but if we go back to our code
  • 00:05:32 and now enter git remote this command
  • 00:05:35 right here then you can see that we
  • 00:05:37 added this remote repository already
  • 00:05:40 this is this origin name you can also be
  • 00:05:43 more specific about that by entering git
  • 00:05:45 remote – V like that then you can see
  • 00:05:49 the origin right here right there so the
  • 00:05:52 name of the remote repository and
  • 00:05:54 additionally the URL behind that
  • 00:05:57 repository we can see we have this fetch
  • 00:05:59 and push commands right here we'll have
  • 00:06:01 a look at that throughout this video but
  • 00:06:03 the important thing is that now we
  • 00:06:04 already have kind of a connection
  • 00:06:06 between our local repository and the
  • 00:06:09 remote repository and github but our
  • 00:06:12 branches our commits are not yet pushed
  • 00:06:16 to github for that we can simply use
  • 00:06:19 this code right here this one but I will
  • 00:06:21 type it manually so we will say git push
  • 00:06:24 which basically tells get to as the name
  • 00:06:26 says push our branches to this remote
  • 00:06:30 repository then we add – you this
  • 00:06:33 basically establishes an upstream you
  • 00:06:36 could say between git and github this
  • 00:06:39 will simply allow us to write the
  • 00:06:41 commands in a more convenient way so we
  • 00:06:43 can simply write git push for the next
  • 00:06:45 time we want to push some code and also
  • 00:06:47 for pool we only have to write pool you
  • 00:06:49 will also see that in a few seconds so
  • 00:06:51 adding – you definitely make sense right
  • 00:06:53 here and then we add origin because we
  • 00:06:55 want to push our branches to the origin
  • 00:06:58 remote branch and then we not only have
  • 00:07:01 to specify a repository but also a
  • 00:07:04 branch and in our case this is the
  • 00:07:06 master branch that we will use if we now
  • 00:07:09 it enter
  • 00:07:11 then you can see that we are asked to
  • 00:07:14 enter a username that's important
  • 00:07:17 because otherwise well anybody could
  • 00:07:18 push any kind of code to any kind of
  • 00:07:20 repository and that's not the intention
  • 00:07:23 of github the username in our case is
  • 00:07:26 right here this one you can see appears
  • 00:07:28 or this mlo am is basically my username
  • 00:07:30 which I will simply copy and enter right
  • 00:07:32 here and then we have to enter the
  • 00:07:35 github password after that we can now
  • 00:07:39 see that the code was pushed to github
  • 00:07:41 and if we go back and reload the page
  • 00:07:44 now we can see that we have one branch
  • 00:07:47 right here our master branch and inside
  • 00:07:50 this branch
  • 00:07:51 if we click right here we can see the
  • 00:07:53 two commits that we created the start
  • 00:07:55 commit and the edit text commit now
  • 00:07:58 before we continue one important
  • 00:08:00 information about this password
  • 00:08:01 implementation we have read here because
  • 00:08:04 I added another tool right here which
  • 00:08:06 allows me to simply enter my username
  • 00:08:08 and my password once and then it will be
  • 00:08:10 saved on my machine this is a lot more
  • 00:08:13 convenient because adding or entering
  • 00:08:15 the password again and again whenever
  • 00:08:16 you want to push or pull code up or down
  • 00:08:19 from github that's not really convenient
  • 00:08:21 for that you can find a link in the
  • 00:08:23 video description which allows you or
  • 00:08:26 which shows you how to set up caching
  • 00:08:28 for your github password in git
  • 00:08:30 you basically need this always keychain
  • 00:08:32 helper right here which allows you to
  • 00:08:35 store the password on the Mac you can
  • 00:08:37 then simply enter keychain access right
  • 00:08:40 here in terminal and if you then search
  • 00:08:42 for github then you can find your
  • 00:08:44 internet password and you could also
  • 00:08:46 lead it right here if you want to but
  • 00:08:48 that's basically the way it is stored
  • 00:08:50 then on your machine and this allows you
  • 00:08:52 to use git and github in a more
  • 00:08:53 convenient way that's just a side note
  • 00:08:55 though let's go back to get hub because
  • 00:08:58 we can now see that we establish the
  • 00:09:00 connection between our local branch and
  • 00:09:03 remote branch and if we now go back to
  • 00:09:06 the code and enter git branch right here
  • 00:09:08 then we can see that we are at the
  • 00:09:10 moment in our master branch in our local
  • 00:09:13 repository and by entering git remote
  • 00:09:16 after that we can also see that we have
  • 00:09:18 a connection a link to a remote
  • 00:09:22 repository so a repository and get
  • 00:09:24 which has the name origin that's the
  • 00:09:28 name we defined previously but if we now
  • 00:09:31 enter git branch – are right here then
  • 00:09:37 we can see another thing we can see this
  • 00:09:40 origin master branch right here now
  • 00:09:43 what's that
  • 00:09:44 now without diving too much into the
  • 00:09:46 details in simple words this simply
  • 00:09:48 means that we have a connection between
  • 00:09:51 our local master branch and the master
  • 00:09:54 branch in our remote repository that's
  • 00:09:57 what you can see right here we basically
  • 00:09:58 have our remote repository which we
  • 00:10:01 point you with the name origin and
  • 00:10:03 inside this repository we have the
  • 00:10:05 master branch and that's exactly how the
  • 00:10:08 connection is established between our
  • 00:10:09 local repository and the remote
  • 00:10:12 repository and this remote tracking
  • 00:10:14 branch is automatically created whenever
  • 00:10:17 we type certain git commands for example
  • 00:10:21 git pull or git push as we saw it in our
  • 00:10:24 case so that's why we have this origin
  • 00:10:27 master remote tracking branch right here
  • 00:10:29 so with that we got the repository on
  • 00:10:32 github the remote repository but what if
  • 00:10:34 we have a colleague now who wants to
  • 00:10:35 access this code and maybe add something
  • 00:10:38 to it well for that we can go to github
  • 00:10:41 once again and now click on to our
  • 00:10:43 repository right here for example and
  • 00:10:45 now we have this clone or download
  • 00:10:48 option if we click onto that we could
  • 00:10:50 download a zip file or we can simply use
  • 00:10:54 this code right here once again to
  • 00:10:56 basically clone our github remote
  • 00:10:59 repository right here now let's copy
  • 00:11:01 that code and let's open a new window in
  • 00:11:05 visual studio code like that and let's
  • 00:11:09 open a folder and let's create a new
  • 00:11:13 folder let's maybe call it clone because
  • 00:11:15 I will clone the repository now like
  • 00:11:18 that now let's open the terminal and now
  • 00:11:22 let's enter get clone like that and
  • 00:11:25 paste this link right here if we do that
  • 00:11:28 we can see that now the entire that's
  • 00:11:31 important the entire remote repository
  • 00:11:34 the entire content of this repository is
  • 00:11:37 cool
  • 00:11:38 or copied into this folder locally on
  • 00:11:42 our machine now if I enter get status
  • 00:11:45 now you can see that this is not a good
  • 00:11:47 repository but if we go to you file open
  • 00:11:51 and now open this actual folder in here
  • 00:11:55 so this get folder like that and if we
  • 00:11:59 then reopen terminal and enter get
  • 00:12:02 statues once again then you can see that
  • 00:12:05 this is now indeed a git repository
  • 00:12:07 because as I said the entire repository
  • 00:12:10 is cloned this also means that we cannot
  • 00:12:13 work in this repository now let's say
  • 00:12:16 that we add another file maybe a CSS
  • 00:12:19 file something like that to it then we
  • 00:12:23 can follow the normal approach we could
  • 00:12:24 say git add and then say git commit
  • 00:12:28 added CSS like that and this is now a
  • 00:12:34 change that is saved locally and now we
  • 00:12:37 want to push it to our github repository
  • 00:12:39 of course but how can we push it now
  • 00:12:42 well if we enter get remote adhere once
  • 00:12:46 again then you can see that the remote
  • 00:12:49 repository is already known right here
  • 00:12:51 as I said the entire code is basically
  • 00:12:53 cloned and therefore the connection
  • 00:12:55 between git and github is also already
  • 00:12:57 established never enter git branch – are
  • 00:13:02 right here then you can also see that we
  • 00:13:04 have our origin master remote tracking
  • 00:13:08 branch also right here now why am i
  • 00:13:10 showing you this
  • 00:13:10 because this basically means that I can
  • 00:13:12 now simply enter git push right here and
  • 00:13:15 with that the entire code will be
  • 00:13:18 updated on github just by adding this
  • 00:13:21 command I can prove this to you by going
  • 00:13:24 back to get up right here and loading it
  • 00:13:26 and as you can see now we have three
  • 00:13:30 commits in here the first and the second
  • 00:13:32 one we already know and the third one
  • 00:13:34 with the added CSS file so this means we
  • 00:13:38 were now able to kind of clone our
  • 00:13:40 github repository change some code in it
  • 00:13:43 and push it back to github the problem
  • 00:13:47 now is that for our initial user this
  • 00:13:50 one the first user I created
  • 00:13:51 self basically we don't have this
  • 00:13:53 style.css file right here because right
  • 00:13:56 here in this right co-editor we added
  • 00:13:58 the CSS file and we push the code but
  • 00:14:01 now right here in this project I don't
  • 00:14:03 have this code for that I need to kind
  • 00:14:06 of download you could say or get the
  • 00:14:09 code from this github repository and for
  • 00:14:12 that we have two options one option is
  • 00:14:15 this one we can simply enter git fetch
  • 00:14:19 right here if I do this and press Enter
  • 00:14:22 then you can see that some things
  • 00:14:25 apparently happen right here but we
  • 00:14:28 still don't see these style.css file and
  • 00:14:30 it's strange right because it basically
  • 00:14:32 said that the master is not equal to the
  • 00:14:33 original master but somehow this is not
  • 00:14:36 reflected right here well this is the
  • 00:14:38 reason why we had a look at these remote
  • 00:14:41 tracking branches a few minutes ago
  • 00:14:43 because if I not enter git branch – are
  • 00:14:46 once again then we can see that we have
  • 00:14:49 our remote tracking branch right here
  • 00:14:51 and as we can see our master on github
  • 00:14:54 is now basically equal to the master in
  • 00:14:57 our remote tracking branch so this means
  • 00:15:00 github and the remote tracking branch
  • 00:15:02 kind of include the same code so if we
  • 00:15:05 now check out this remote tracking
  • 00:15:06 branch by adding git checkout origin
  • 00:15:10 slash master then we can see these
  • 00:15:12 style.css file in here but the local
  • 00:15:16 code on our machine in our local
  • 00:15:18 repository does not reflect these
  • 00:15:20 changes now now to reflect these changes
  • 00:15:22 we have to go back to our master branch
  • 00:15:26 right here and now we can simply say git
  • 00:15:29 merge origin slash master because we
  • 00:15:33 want to merge our local repository with
  • 00:15:37 this remote tracking branch so if I now
  • 00:15:40 enter this you can see that the
  • 00:15:43 style.css file is now added and if we
  • 00:15:46 now have a look at our branch we can see
  • 00:15:48 that we are in our master branch now so
  • 00:15:50 we have the local change and if I enter
  • 00:15:52 git branch – are you can see that your
  • 00:15:55 original master is also right here you
  • 00:15:57 can also combine these two steps so
  • 00:15:59 writing get fetched you get the
  • 00:16:01 repository code from the github
  • 00:16:03 repository to the remote tracking branch
  • 00:16:05 and then adding it merge to kind of
  • 00:16:07 merge to code from the remote tracking
  • 00:16:09 branch with our local branch by simply
  • 00:16:11 adding get pull right here
  • 00:16:13 that's basically what get prove of doing
  • 00:16:15 it would fetch the code to the remote
  • 00:16:17 tracking branch and then merge it with
  • 00:16:19 our local branch in the end but with
  • 00:16:22 that we now basically have the same code
  • 00:16:24 right here in both of our projects so
  • 00:16:26 this could be two users basically and
  • 00:16:28 with that we also saw the core commands
  • 00:16:32 you need if you want to connect git and
  • 00:16:34 github so what do you have to keep in
  • 00:16:37 mind basically you have to keep in mind
  • 00:16:40 the difference between a local
  • 00:16:42 repository and a github repository and
  • 00:16:45 that in between these two repositories
  • 00:16:47 you also have these remote tracking
  • 00:16:50 branches which are kind of in between SD
  • 00:16:53 connectors you could say between the
  • 00:16:55 local and the remote repository and if
  • 00:16:58 you enter git fetch to get fetch command
  • 00:17:01 then you will kind of synchronize the
  • 00:17:03 code in your github repository and to
  • 00:17:07 remote tracking branch and if you then
  • 00:17:08 enter
  • 00:17:09 git merge then you kind of also add
  • 00:17:12 these changes to your local repository
  • 00:17:14 this is how you pull your code basically
  • 00:17:17 down from github but you can also push
  • 00:17:19 code up then it's important to keep in
  • 00:17:22 mind that you refer to the right github
  • 00:17:24 repository we named it origin but as I
  • 00:17:26 said you can name it differently and
  • 00:17:28 that you also make sure that you refer
  • 00:17:30 to the right branch we always referred
  • 00:17:33 to the master branch in our case and one
  • 00:17:36 really final thing before we finish this
  • 00:17:38 video in case you want to delete all
  • 00:17:40 that what we did right here because it
  • 00:17:42 was just a test for you and you want to
  • 00:17:43 get started book zero you can delete a
  • 00:17:45 github repository by going to the
  • 00:17:47 repository of your choice then go to
  • 00:17:50 settings right here then scroll down to
  • 00:17:53 the dangerzone that indeed sounds well
  • 00:17:55 dangerous and then you can click right
  • 00:17:58 here or to delete this repository if you
  • 00:18:00 then enter the name of the repository in
  • 00:18:02 my case this was get then you can delete
  • 00:18:04 it right here and with that this
  • 00:18:06 repository is gone and you can also
  • 00:18:08 delete the remote repository so the
  • 00:18:11 connection between gate and the remote
  • 00:18:13 repository and github by going to your
  • 00:18:15 code and then simply entering git remote
  • 00:18:18 like that
  • 00:18:19 then you can see that this is the
  • 00:18:20 repository name get origin so if you
  • 00:18:22 don't enter get remote RM and the name
  • 00:18:26 of the repository like that then you can
  • 00:18:29 see that this repository is to lead it
  • 00:18:32 now you can do the same thing of course
  • 00:18:33 also right here
  • 00:18:34 indeed second code right here also in
  • 00:18:38 origin and if you didn't have a look at
  • 00:18:39 git remote you can see that we don't
  • 00:18:42 have these remote repositories in our
  • 00:18:44 code right here and with that we kind of
  • 00:18:46 deleted the connection between the git
  • 00:18:48 repository and the remote repository on
  • 00:18:52 github but that's it now finally so as
  • 00:18:54 always I can only say thanks so much for
  • 00:18:57 watching hope to see you in the next
  • 00:18:58 videos and bye