How to Use GitHub with Visual Studio Code | Commit, Publish, Push and Clone using VS Code and GitHub

hello everyone in this video i will show you how to use visual studio code to create a local git repository to push a folder to github to check the file modification history to clone github repository on the local machine and also to disable git on the local folder so first of all we need to check if git is installed on the machine or not so let's open the command prompt and in this window we have to type git so here we can see that the git is not recognized so i need to download and to install git so let's close this window and let's go to the browser so here we have just to type git then we need to go to this first link in this page we have just to click on this downloads link then we have to download git for windows now we need to save this installer but in my case i have already downloaded it so i will cancel this download so this is the installer of git i have just to run it in this window i have just to click on next then i will accept this default path where git will be installed then let's click on next now let's click on next then next next next again so we have to click on next several times then let's click on install now the installation finished it correctly so let's uncheck this box and let's click on finish to be able to push files to a github repository it is necessary to create a github account in my case i have already created a github account now let's start visual studio code and let's create a new folder so let's click on file then open folder then i will create a new folder on the desktop so i will call it website now let's click on select folder now let's add a new file to this folder so let's click on this button i will call this file home.html now let's write some html code and let's save this file now to create a git repository for this folder we need to click on this button then we need to click on initialize the repository now the git repository has been created so let's commit the modifications so we need to click on this commit button and let's click on yes then we need to provide a commit message let's say for example first commit let's hit enter and here we obtain this error so we need to configure git for more information we can click on this button learn more so in this page we have to scroll down and we can see that we need to provide the identity to git so let's copy this first command then let's open the command prompt let's paste the command just here and let's modify the name so i need to provide my name let's hit enter now let's copy the second command so this is the second command and let's provide the email address now let's close this window and let's go back to vs code now let's commit again let's provide the message for example first commit and let's hit enter this time the commit has been done correctly now we need to publish this folder to github so let's click on this button then let's click on command palette then in this field we have to type publish to github then let's select this option so here we need to authorize the github extension to access to github so let's click on allow then in this page we have to click on continue in this page i have just to click on authorize github then we can close this box and then we need to copy this link so this link is now copied so let's go back to vs code and here we have just to click on this label and then we have to paste the link in this field now let's hit enter and now the github extension of vs code is authorized to access to github so let's publish again so let's click on this button then command palette and here let's click on publish to github so here we need to create a new repository the name of the folder that i have is called website so we can create a repository on github that is called website so i want to create a new repository which is public so i will select this second option so we have already authorized the github extension to access to github this time we need to authorize git to access to github so let's click on sign in with your browser and in this page we have to scroll down and to click on authorize and now git is authorized to access to github so let's go to my github account and let's refresh this page so we can see that this repository has been created let's open it and here we can see that it already contains this file now let's go back to vs code and let's publish a new folder so let's close this folder then let's open a new folder so i want to open a folder that is available on the desktop which is called my shop so this folder contains these four files i want to publish it to github so let's click on this button so here i can click on initialize the repository which will create a new git repository then i have to make the first commit and finally i have to publish to github it is also possible to click on publish to github which will make all of these three steps but here i will click on initialize repository then i have to make the first commit so let's click on yes then let's provide a message for this first commit let's call it first commit let's hit enter and now to publish the folder to github i have to click on this button then command palette then publish to github so here i want to create a new github repository called my shop and i want it to be public so let's click on this second option now we can see that the folder has been published successfully so let's go to github and we can see that these files have been published correctly to github now let's go back to vs code and let's make some modifications to the different files so this is the login file i have just to modify the name now let's save this file and also let's modify the style.css so i will just modify this value now let's save this file so we can see that we have two modifications so let's click on this button and let's commit the modifications let's click on yes and let's provide a message for this commit i will call it commit2 let's hit enter now i need to push the modifications to github so i can either click on this button or also i can click on this button then push now the modifications have been transmitted correctly to github we can go to github then we have to refresh this page so we can see that the login file and the style file have been modified we can take a look on the login file and here we can see that this text has been modified now let's go back to vs code so using git it is possible to see the modification history of the different files so let's click on this button and let's select this file for example now let's click on timeline and here we can see that we have two versions of this file this is the initial version and this is the modified version also if we want to see the history of this second file we have just to select it and here we can see the different versions of this file if i select this file which has not been modified i can see that i have only one version of this file now i will show you how to clone a project from github so let's close this folder then let's go to github and let's find a repository so i want to find a login form using html so in this field i will type login form html so here i will select this second link and then i need to copy the url of this repository so i can copy this url from this field or also i can click on this button then i can copy this url using this button now let's go back to vs code let's click on this button then let's click on clone repository so i will provide the url that i have copied let's hit enter and i need to save it on the desktop let's click on select repository location and it has been cloned correctly so let's open it so these are the different files of the downloaded folder and it is possible to see the different versions of each file so to see the versions of this login file i have just to click on it then i have to click on timeline and here i can see the different versions of the login file now let's make some modifications so for example let's modify the title and let's save it so when i save this file i can see that git has recorded the modification to disable git it is necessary to open this folder in my case it is available on the desktop so this is the folder that i have downloaded let's open it and inside this folder there is a hidden folder to see the hidden folder i have just to click on view then hidden items and i can see this folder so this is the git repository to disable git i have just to remove this folder so let's delete it now let's go back to vs code and this time we can see that git is not recording anymore the modifications of this folder finally thank you very much for watching and please subscribe to the channel

Channel: BoostMyTool

Views: 40,360

Keywords:

Id: SW3emX9TJ4g

Length: 13min 34sec (814 seconds)

Published: Sat Dec 11 2021