How to use Visual Studio 2019 to access and check in code to GitHub in 15 minutes
Tags: github, beginners, tutorial
Published: 2020-02-03 14:46:19

<h1 style="text-align: center;">Are you ready to learn how to check in code to GitHub in 15 minutes?</h1>
<img class="size-full wp-image-815 aligncenter" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_79afac2.png" alt="" width="548" height="266" />
Over the last couple years in my organization we have been tasked with moving from TFS to Git.  While Git is an awesome tool , it can be a little daunting if you have to pick it up and learn it on your own. There are plenty of great resources that explain WHAT git is.There are even plenty of articles that will go into detail about all of the things I am going to cover here! For that reason we are just going to focus on how to use it in, and specifically how to check in code to GitHub in 15 minutes!

<a href="https://www.thedevelopingdeveloper.net/2020/02/03/how-to-sign-up-for-a-github-account/">One of the first things you will want to do is create a GitHub account if you do not already have one.</a>
<h2 style="text-align: center;">Adding your GitHub Account to Visual Studio.</h2>
One of the first things we need to know about when using Git is how to access it. While there is a stand alone <a href="https://git-scm.com/">Git client</a>  and it can come in handy for certain things. The built in client for accessing Git In Visual studio really simplifies the steps required to download and check in code.
To access Git related options in Visual Studio we need to look no farther than the "Team Explorer". Under the Team Explorer we have several options that we will be covering throughout this article.
<h5 style="padding-left: 40px;">In the menu select View &gt; Team Explorer</h5>
<p style="padding-left: 80px;"><img class="wp-image-583 alignleft" title="" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_fcbb63f.png" alt="Team Explorer" width="250" height="303" data-wp-editing="1" /></p>
&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

Here you will be presented with the "Connect" dialog box.<a href="https://www.thedevelopingdeveloper.net/2020/02/03/how-to-sign-up-for-a-github-account/"> If you have created a GitHub Account for yourself</a> now would be a good time to connect it.
<h5 style="padding-left: 40px;">Team Explorer &gt; Manage Connections (it looks like a green plug) &gt; Connect to Github</h5>
<p style="padding-left: 80px;"><img class="alignnone size-full wp-image-796" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_6eddc94.png" alt="" width="295" height="256" /></p>

<h5 style="padding-left: 40px;">Fill in your account data</h5>
<p style="padding-left: 80px;"><img class="alignnone wp-image-798" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_6ef5ff8.png" alt="" width="347" height="386" /></p>
That's it! You are connected and can now sync your local projects to GitHub! Speaking of which....

Now that I am connected how do I get started with this GitHub thing? I'm Glad that you asked!

&nbsp;

&nbsp;
<h2 style="text-align: center;"><strong>How to create a local repository</strong></h2>
When it comes to GIT and creating and updating code in a repository we first need to understand the concept of the local and remote repository. The Local repository is the collection of files in their current state on your computer, git keeps track of the changes that occur on your local system, and then you give it the correct command it updates the local repository to a new version on your local system. After updating the local system however you still need to push your changes to the remote repository to complete the process of updating your remote repository.
In order to get started with GIT this means that we need to either create a local repository or import one to our machine so that Git knows what files it is keeping track of. To do this with Visual Studio it's actually a pretty simple task.
<ol>
 	<li>Open Team Explorer:<img class="size-full wp-image-770 alignnone" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_c41c578.png" alt="" width="438" height="319" /></li>
 	<li>Navigate to the lower pane of Team Explorer to the section labeled "Local Git Repositories"</li>
 	<li>Click "new" and specify a location.</li>
 	<li>Hit the "Create" button.</li>
 	<li>This simply adds adds git tracking to your local repository.
<img class="alignnone size-full wp-image-607" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_4e217a2c.png" alt="" width="285" height="111" /></li>
</ol>
&nbsp;
<h4><strong>How to import a remote repository.</strong></h4>
Now that we know how to build a project and create a local repository , let's look at how to pull a remote repository so that we can modify it. For this example we will use Github as the example.
<ol>
 	<li><a href="https://github.com/nineismine/">Navigate to Github</a></li>
 	<li>Find a repository that you want to clone. In this example we will use one of mine.</li>
 	<li>Hit the "Clone or Download" button.</li>
 	<li>Hit Open in Visual Studio.</li>
</ol>
<img class="size-medium wp-image-686 hoverZoomLink alignleft" title="" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_5247ee3-300x284.png" alt="" width="300" height="284" />

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

&nbsp;

or
<ol>
 	<li>Copy the URL that is in the Clone with HTTPS dialog</li>
 	<li>Go back to Visual Studio &gt; Team Explorer &gt; Connect &gt; Clone &gt;</li>
 	<li>Paste the URL  into the Open from GitHub</li>
 	<li>Choose a Local Path</li>
 	<li>Hit Clone<img class="alignnone size-full wp-image-821" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_7f6d5b6.png" alt="" width="285" height="170" /></li>
</ol>
&nbsp;

<img class="alignnone size-full wp-image-822" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_7f7c565.png" alt="" width="414" height="460" />
<h2 style="text-align: center;">Remote... Local? What's the difference?</h2>
<p style="padding-left: 40px;">I said I would avoid getting too deep into HOW Git works but I want to make sure I touch on this topic really quickly because it is important.</p>
<p style="padding-left: 40px;">I essence when you add a project to a Git Repo we now have 3 stages that we are tracking in terms of your stored files..</p>

<ol>
 	<li style="list-style-type: none;">
<ol>
 	<li style="list-style-type: none;">
<ol>
 	<li><strong>Your active workspace.</strong>
This is where your current files live any time you make a change and save it, you make real changes to your active workspace but they do not automatically apply to your Local repository.
(I think that this is one of the places people get confused with GIT)</li>
 	<li><strong>Your Local Repository.</strong>
You can think of the magic behind git as a change tracker.. your local repository is a record of the last changes you made to any file that is being tracked by GIT as of your last commit.</li>
 	<li><strong>Your Remote repository.</strong>
After making changes to your local repository you have to then commit them up to the remote repository. These are the three states of files being tracked by git. Understanding this process will make it much easier to understand what you are doing with GIT and WHY.</li>
</ol>
</li>
</ol>
</li>
</ol>
<h2 style="text-align: center;">Ok! Now that I have a repository... What the heck do I do with it?</h2>
So keeping in mind the last section , we need to make changes to our code (our active workspace)  &gt; Apply them to local and then apply them to remote.
<h4>How to modify your active workspace</h4>
<p style="padding-left: 40px;">This is the easiest one, just make a change and save it like any other file.  When you make an uncommitted change to the active workspace you will see a red checkbox next to the uncommitted file in the Visual Studio Solution Explorer. <img class="alignnone size-full wp-image-806" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_737a149.png" alt="" width="719" height="291" /></p>
&nbsp;
<h4>How to commit your changes to the Local Repository.</h4>
<p style="padding-left: 40px;">Open Team Explorer &gt; Click Changes &gt; Enter a commit message to the Commit Dialog &gt; Hit the "Commit All" button.</p>
<p style="padding-left: 40px;"><img class="alignnone size-full wp-image-807" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_7394a26.png" alt="" width="291" height="277" /></p>
<p style="padding-left: 40px;">After the commit you get a message that shows you that you have made a <strong>Local Commit</strong>.</p>
<p style="padding-left: 40px;"><img class="alignnone size-full wp-image-808" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_73d0bc2.png" alt="" width="290" height="371" /></p>
<p style="padding-left: 40px;">Now <strong>Sync</strong> by clicking the blue text that says Sync in the message. (you can see it in the screenshot above)</p>
<p style="padding-left: 40px;">If we keep with the above explanation of the stages of git we are now in stage 2 , we have committed our changes locally.</p>
<p style="padding-left: 40px;">On the Synchronization tab, under outgoing, we have an uncommitted change that is waiting to be pushed to remote.</p>
<p style="padding-left: 40px;">Click push and it will push your changes to the master branch. That's it! you have learned how to check in code to GitHub in 15 minutes!</p>
<p style="padding-left: 40px;"><img class="alignnone size-full wp-image-766" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_c38d310.png" alt="" width="297" height="309" /></p>
<p style="padding-left: 40px;"><img class="alignnone size-full wp-image-767" src="https://www.thedevelopingdeveloper.net/wp-content/uploads/2020/01/Snag_c390a6c.png" alt="" width="314" height="294" /></p>
&nbsp;