Categories
GIT and GitHub

How to integrate GIT + GITHUB on your visual studio code, part 1: Clone a github repo to our equip

 

 

If you want to work faster and more comfortable, and you use the popular Visual Studio Code would not be nice if you can sync your project with Github?

Let´s see how to do with some easy steps, depending on if we want to do.

We have 2 options:

-Cloning and sync an existing GitHub repo to our local equip

-Uploading and sync a local GIT repo which still doesn´t exist on our GitHub

On this article we will see the first option. The second one will be for another article.

IF WE HAVE NO LOCAL REPO (CLONE AN EXISTING GITHUB PROJECT TO OUR EQUIP)

  1. Install Git on your equip if it is the first time you do it.
  2. Create a repository on Github. For example I will create the repo for the new REST API I will create with slim 4 (tip: to choose a license, it seems if you select no license, the default copyright applies, so it would be more restrictive than choosing an specific license, you can read more on official GitHub license guide).
  3. Now we will have to clone the remote GitHub repo we have created, to our local equip. To do that, we go to our Visual Code and we select view/ command palette. There, on the dropdown menu, we select the command
    git:clone

Now, we must enter out GitHub repository URL

git-hub-url

4. After that, we will be asked for the local route for the cloned repo.

5. Is done!

Now we will see how to make changes on our local repo and upload them to GitHub repo. I think it is usually three steps:

  • add changes to repo
  • commit changes
  • sync changes.

So, to see how it works, let´s make any change on our local, for example, adding an index.html (tip: you hve a good HTML 5 basic template here).

changes

Can you see the marks? The green “U” means it is an untracked file, and the number on the branch symbol shows us how many of them we have. Untracked file means it has been still not added to the Git repository.

To add it to our repo, we just click the + symbol, then a green A will appear, that means the change is added to our repo

add-changes

 

added-changes

Once you have done, you should be able to commit the changes (prepare them to be uploaded later); to do that, simply select the branch symbol, enter a message and click the thick symbol

commit changes

WARNING: On this step, when we try to upload the changes, it can happens that GIT asks us who the hell we are (our credentials). Something like this:

git credentials

Then, enter you github credentials there.

Also, probably a window will be opened where you are asked to stage the changes before comitting them. Select “always”:

stage-changes

Once that is done, you will see you have one (or certain) commited changes, ready to be sync.

to-sync

Now, we just click on the “rolling arrows” to sync the changes. It will make a push and pull to the origin/* (where * can be “main, “master”…) branch on the GitHub repo

push-pull

And now, as you can see, we have on our remote repo the new file we created on local. Once you know how to do, it is very fast to stage, commit and sync the changes

sync-changes

 

 

PD: Remember this blog is more a way for a noob to learn and brush up things than anything else. As I know maybe I am not the best teacher due to my lack of experience, or maybe I have explained something wrong, I will give you another link where it is explained. However I hope it was useful to someone as it was for me.

https://azuredevopslabs.com/labs/azuredevops/github/

On another article I will talk about the second option: How to add a local GIT project to GitHub.