{"id":7494,"date":"2021-09-16T18:57:26","date_gmt":"2021-09-16T18:57:26","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=7494"},"modified":"2022-03-10T20:09:32","modified_gmt":"2022-03-10T20:09:32","slug":"web-dev-basics-git-and-github","status":"publish","type":"post","link":"https:\/\/sites.la.utexas.edu\/kb\/2021\/09\/16\/web-dev-basics-git-and-github\/","title":{"rendered":"Web Dev Basics: git and GitHub"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-1024x342.png\" alt=\"\" class=\"wp-image-7968\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-1024x342.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-300x100.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-768x256.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-1536x512.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/10\/Artboard-2_1-2048x683.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Just like in design, oftentimes you will find yourself wanting to  save multiple copies of your work. I&#8217;m sure we all know this struggle . . .<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"891\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/final_meme_2-1024x891.png\" alt=\"\" class=\"wp-image-7551\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/final_meme_2-1024x891.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/final_meme_2-300x261.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/final_meme_2-768x668.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/final_meme_2.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"384\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/git_meme-1.jpeg\" alt=\"\" class=\"wp-image-7497\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/git_meme-1.jpeg 512w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/git_meme-1-300x225.jpeg 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>Well, (un)fortunately for developers, we don&#8217;t have to deal with the struggle of knowing which one is the actual final version. Instead we have these hash codes (the yellow lines in the screenshot below):<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"1024\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM-890x1024.png\" alt=\"\" class=\"wp-image-7498\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM-890x1024.png 890w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM-261x300.png 261w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM-768x883.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM-1335x1536.png 1335w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/09\/Screen-Shot-2021-09-16-at-12.18.12-PM.png 1678w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/figure>\n\n\n\n<p>All jokes aside, this is just to highlight the necessity and importance of version control. As you could&#8217;ve guess, version control (or source control) is the practice of tracking changes in digital work in general and specifically software code. This allows you to easily go back to previous versions of your code and revert the changes if needed. It also allows for procedural development, making it easier to review and debug.<\/p>\n\n\n\n<p>In this training, you will be learning how to use git, one of the most popular version control system used for software development. By the end of the training, you should be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create your own GitHub repository.<\/li><li>Clone, make changes, commit, and push to the repository.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>git vs. GitHub<\/strong><\/h2>\n\n\n\n<p>New users of git \/ GitHub can get confused between the two. So what&#8217;s the difference? git (with the g <em>not <\/em>capitalized) is a version control system, whereas GitHub (g capitalized, proper noun) is a hosting service that lets you manage git repositories. GitHub also provides a UI that makes it easier to use git.<\/p>\n\n\n\n<p>There are many other platforms to use git other than GitHub, such as Bitbucket, GiLab, Phabricator, etc.<\/p>\n\n\n\n<p>Once you start working more and more with git and GitHub, you&#8217;ll start to get a feel for how they work \/ are different from each other. For now just remember that they are not the same :).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Getting Started<\/strong><\/h2>\n\n\n\n<p>Go to <a href=\"https:\/\/github.austin.utexas.edu\/\">https:\/\/github.austin.utexas.edu\/<\/a>.<\/p>\n\n\n\n<p>Log in with your UT EID and password.<\/p>\n\n\n\n<p>You should now be logged in. Click on your profile at the top and make sure that you are signed in under your EID (Signed in as [your-EID]).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-1024x415.png\" alt=\"\" class=\"wp-image-8157\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-1024x415.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-300x122.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-768x312.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-1536x623.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-8-1-2048x831.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>First, we need to create new <strong>repository (repo)<\/strong>. A repository is where all changes to a project will be tracked and stored. <\/p>\n\n\n\n<p>In GitHub, click New.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-1024x417.png\" alt=\"\" class=\"wp-image-8158\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-1024x417.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-300x122.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-768x313.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-1536x626.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-9-1-2048x834.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Name your repository according to this format: FirstName LastName git Training.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"921\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-10-2-1024x921.png\" alt=\"\" class=\"wp-image-8159\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-10-2-1024x921.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-10-2-300x270.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-10-2-768x691.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-10-2.png 1514w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>[Optional] Give your repository a description.<\/p>\n\n\n\n<p>Set your repository visibility to Public (so that we can see your beautiful work!).<\/p>\n\n\n\n<p>Under \u201cInitialize this repository with,\u201d check \u201cAdd a README file.\u201d We will be editing this file in this training.<\/p>\n\n\n\n<p>Typically a README file is where you can put summary text and documentation for a project. We will be editing this file to demonstrate how to use git for this training.<\/p>\n\n\n\n<p>Your new repo configuration should look something like this:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"951\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-11-2-1024x951.png\" alt=\"\" class=\"wp-image-8160\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-11-2-1024x951.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-11-2-300x279.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-11-2-768x713.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-11-2.png 1490w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Click \u201cCreate repository.\u201d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Clone the Repo to your Computer<\/strong><\/h2>\n\n\n\n<p>Once you\u2019ve created your repository, you should see your repo UI like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-1024x443.png\" alt=\"\" class=\"wp-image-8162\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-1024x443.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-300x130.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-768x332.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-1536x664.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-12-2-2048x886.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Click the dropdown next to \u201cCode,\u201d and click the clipboard symbol next to the repo URL. This will copy the cloning link to your clipboard.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-1024x439.png\" alt=\"\" class=\"wp-image-8163\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-1024x439.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-300x129.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-768x329.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-1536x659.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-13-1-2048x879.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Open the <strong>Terminal<\/strong> on your computer. You can do this by searching &#8220;terminal&#8221; in the launchpad (Mac).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-1-1.png\" alt=\"\" class=\"wp-image-8164\" width=\"340\" height=\"194\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-1-1.png 738w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-1-1-300x172.png 300w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/figure>\n\n\n\n<p>The Terminal is a command line system that allows users to control the operating system and make changes. Using the Terminal takes a little getting used to, but it&#8217;s a super important skill for any developer.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-2-1024x663.png\" alt=\"\" class=\"wp-image-8165\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-2-1024x663.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-2-300x194.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-2-768x497.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-2.png 1168w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>The first thing we need to do in the terminal is change the directory to the one we want to copy our repo into. <\/p>\n\n\n\n<p>If you are working on a LAITS computer, please clone your repo into your STA folder in the LAITS Server. <\/p>\n\n\n\n<p>To access the server, follow these instructions:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open your Finder and click Go in the top menu.<\/li><li>Click Connect to Server&#8230;<\/li><li>Enter <a href=\"\/\/file.laits.utexas.edu\">smb:\/\/file.laits.utexas.edu<\/a> as the server url. Click Connect.<\/li><li>For your login, use your UT EID and password. Click Connect.<\/li><li>Select the &#8220;sta&#8221; volume and click Ok.<\/li><li>Find your folder or create one if you don&#8217;t already have one.<\/li><\/ol>\n\n\n\n<p>Now let&#8217;s go back to the terminal.<\/p>\n\n\n\n<p>When you first open the terminal, it sets itself to a default directory.<\/p>\n\n\n\n<p>You can see which directory it&#8217;s currently sitting in right before the blinking cursor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"785\" height=\"256\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-3.png\" alt=\"\" class=\"wp-image-8166\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-3.png 785w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-3-300x98.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-3-768x250.png 768w\" sizes=\"auto, (max-width: 785px) 100vw, 785px\" \/><\/figure><\/div>\n\n\n\n<p>To change the directory, we will use the <strong>cd <\/strong>command. Type the following into your terminal:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd DESIRED-DIRECTORY<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hint: an easy shortcut to get the directory you want is to drag the folder you want from your Finder into the Terminal after your cd command.<\/p><\/blockquote>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"184\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-5-1024x184.png\" alt=\"\" class=\"wp-image-8167\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-5-1024x184.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-5-300x54.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-5-768x138.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-5.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Once you&#8217;re done, press enter to execute the command.&nbsp;<\/p>\n\n\n\n<p>You will see the directory updated before the blinking cursor.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"256\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-6.png\" alt=\"\" class=\"wp-image-8168\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-6.png 788w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-6-300x97.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-6-768x250.png 768w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><\/figure><\/div>\n\n\n\n<p>Now we\u2019re ready to clone your git training repo. Cloning means creating a local copy of the Github repository on your machine. We will refer to this copy as your <strong>local repository<\/strong>. The copy on github.com is your <strong>remote repository<\/strong>.<\/p>\n\n\n\n<p>Type git clone and paste your copied repo link like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git clone REPO_LINK<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"192\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-7-1024x192.png\" alt=\"\" class=\"wp-image-8169\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-7-1024x192.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-7-300x56.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-7-768x144.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-7.png 1162w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Press Enter.<\/p>\n\n\n\n<p>Git may ask you to enter your login credentials. Github no longer allows normal password access for security reasons. Instead, they provide personal access tokens. Any github user can generate a token and use it. You can think of it as a special, more secure password.&nbsp;<\/p>\n\n\n\n<p>To generate a personal access token, go to your Github profile. Click Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-16.png\" alt=\"\" class=\"wp-image-8171\" width=\"159\" height=\"356\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-16.png 378w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-16-134x300.png 134w\" sizes=\"auto, (max-width: 159px) 100vw, 159px\" \/><\/figure>\n\n\n\n<p>Scroll to the bottom of the left menu and go to Developer Settings.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"731\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17-1024x731.png\" alt=\"\" class=\"wp-image-8172\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17-1024x731.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17-300x214.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17-768x549.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17-1536x1097.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-17.png 1750w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Go to Personal Access Tokens. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"227\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-1024x227.png\" alt=\"\" class=\"wp-image-8173\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-1024x227.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-300x66.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-768x170.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-1536x340.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-18-2048x454.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Then click the Generate New Token button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-1024x443.png\" alt=\"\" class=\"wp-image-8174\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-1024x443.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-300x130.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-768x333.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-1536x665.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-19-2048x887.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Name the token to whatever you want in the Note text field (ex: \u201csta-token-1\u201d).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"233\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20-1024x233.png\" alt=\"\" class=\"wp-image-8175\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20-1024x233.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20-300x68.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20-768x175.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20-1536x349.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-20.png 2022w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>In the Select scopes section, check the box that says \u201crepo\u201d. This will automatically select all of the sub-boxes under it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21-1024x637.png\" alt=\"\" class=\"wp-image-8176\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21-1024x637.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21-300x187.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21-768x478.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21-1536x956.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-21.png 1584w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Scroll down and click Generate token.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-22.png\" alt=\"\" class=\"wp-image-8177\" width=\"213\" height=\"44\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-22.png 516w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-22-300x62.png 300w\" sizes=\"auto, (max-width: 213px) 100vw, 213px\" \/><\/figure>\n\n\n\n<p>You will see a new string of random numbers, letters, and symbols. This is your new personal access token. You will be able reuse this token for all future GitHub functions.<\/p>\n\n\n\n<p><strong>IMPORTANT: Copy it and save it somewhere safe. Once you leave this page, you will no longer be able to access or see it again and will have to make a new token.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-1024x559.png\" alt=\"\" class=\"wp-image-8178\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-1024x559.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-300x164.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-768x419.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-1536x839.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-23-2048x1118.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Once you&#8217;ve copied your token, go back to your terminal. For your Git credentials:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Enter your EID as the username.<\/li><li>Enter your new personal access token as the password.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Edit your README.md file<\/strong><\/h2>\n\n\n\n<p>Once your repo has been cloned, you should be able to see it as a new folder in the directory you selected.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-14-1024x480.png\" alt=\"\" class=\"wp-image-8182\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-14-1024x480.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-14-300x141.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-14-768x360.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-14.png 1472w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>You should see the README.md file in your new folder. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-15-1024x563.png\" alt=\"\" class=\"wp-image-8183\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-15-1024x563.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-15-300x165.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-15-768x422.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-15.png 1318w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Open this folder in your code editor of choice. If you\u2019ve never used a code editor before, we will be using Visual Studio Code in this training.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24-1024x390.png\" alt=\"\" class=\"wp-image-8184\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24-1024x390.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24-300x114.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24-768x293.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24-1536x585.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-24.png 1554w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Edit this file to add some information about yourself. You can include anything you want. Mine looks something like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"229\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-1024x229.png\" alt=\"\" class=\"wp-image-8185\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-1024x229.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-300x67.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-768x172.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-1536x343.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-25-2048x458.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>The README file is a markdown file, so here\u2019s some basic markdown syntax if you\u2019d like to format your file prettily. This is completely optional, feel free to just have text if you would prefer.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>To start large header, type\n# &#091;header-name] or\n## &#091;header-name]\nFor smaller headers, add more #. The more hashtags you have, \nthe smaller the header will be.\n\nTo embed a link, follow this syntax:\n&#091;text-to-display](https:\/\/my_url\/)\n\nTo add bullet points, simply start each bullet point with a \u201c-\u201c. For example:\n- My first bullet point\n- My second bullet point<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pushing your changes<\/strong><\/h2>\n\n\n\n<p>Once you\u2019re done with the file, go back to the terminal. We will now be saving our changes and updating our repo in Github with the new changes. This process is often referred to as \u201cpushing your changes.\u201d<\/p>\n\n\n\n<p>To do so, we will need to do a series of simple commands.&nbsp;<\/p>\n\n\n\n<p>But first, we will need to change our directory. Right now, we&#8217;re in the folder we cloned our repo into. What we want is to be in the cloned repo folder itself.<\/p>\n\n\n\n<p>In the terminal type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd YOUR-LOCAL-REPOSITORY-FOLDER-NAME<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"40\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-26-1.png\" alt=\"\" class=\"wp-image-8189\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-26-1.png 848w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-26-1-300x14.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-26-1-768x36.png 768w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>git add<\/strong><\/h3>\n\n\n\n<p>Next, in the terminal type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git add README.md<\/code><\/pre>\n\n\n\n<p>Press Enter.<\/p>\n\n\n\n<p>This command adds a tells git that you want to include updates to a particular file (in this case, our README file) in the next commit.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>git status<\/strong><\/h3>\n\n\n\n<p>Next, in the terminal type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git status<\/code><\/pre>\n\n\n\n<p>This is an optional command, but a very useful one. Git status shows you the current state of your staged changes.&nbsp;Press Enter.<\/p>\n\n\n\n<p>You should see in green, your modified README.md file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>git commit<\/strong><\/h3>\n\n\n\n<p>Next, in the terminal type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git commit -m \u201cFirst commit\u201d<\/code><\/pre>\n\n\n\n<p>Press Enter.<\/p>\n\n\n\n<p>A commit is a snapshot of your project where a new version is created in your current repository. The commit command doesn\u2019t actually move any changes to your remote repository.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>git push<\/strong><\/h3>\n\n\n\n<p>Next, in the terminal type:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>git push<\/code><\/pre>\n\n\n\n<p>Press Enter.<\/p>\n\n\n\n<p>The push command uploads the updated local repository to the remote repository.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>View Your Results<\/strong><\/h2>\n\n\n\n<p>Go back to GitHub and view your repo. Refresh the page. You should see your changes to the README file up.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"737\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27-1024x737.png\" alt=\"\" class=\"wp-image-8190\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27-1024x737.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27-300x216.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27-768x552.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27-1536x1105.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/11\/github-27.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>If there\u2019s something that doesn\u2019t look like how you wanted it to be, simply make the changes to the file, add, commit, and push again.<\/p>\n\n\n\n<p>Congratulations! You\u2019ve learned the basics of committing and pushing code using git. <\/p>\n\n\n\n<p>You can imagine how this allows for multiple developers to work on the same project by cloning repos.<\/p>\n\n\n\n<p>git has powerful tools to help with merging changes from multiple developers, seeing the differential changes, and reverting changes if needed. We didn\u2019t cover those in this training, but hopefully this gets you started on using git :).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>GitHub Desktop<\/strong><\/h2>\n\n\n\n<p>While understanding and knowing how to navigate the terminal is important, many people find it quite inefficient. Many IDEs have built in git integrations. <\/p>\n\n\n\n<p>If you have a development environment you are already comfortable with that includes git integration, feel free to continue using it. If not, another useful tool is GitHub Desktop. <\/p>\n\n\n\n<p>GitHub Desktop is an app that provides a streamlined and user friendly way to commit, push, pull, etc. instead of doing it all directly in the terminal.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/desktop.github.com\/images\/github-desktop-screenshot-mac.png\" alt=\"Screenshot of GitHub Desktop running on macOS\" \/><\/figure>\n\n\n\n<p>To download GitHub Desktop, go to <a rel=\"noreferrer noopener\" href=\"https:\/\/desktop.github.com\/\" target=\"_blank\">https:\/\/desktop.github.com\/<\/a>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Note: If you are using a LAITS computer, you will need admin permissions to install new applications. Ask your web dev manager for assistance.<\/p><\/blockquote>\n\n\n\n<p>To view the documentation for GitHub Desktop, go to <a href=\"https:\/\/docs.github.com\/en\/desktop.\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/docs.github.com\/en\/desktop.<\/a> <\/p>\n\n\n\n<p>If you are interested, we highly encourage you to research and learn tools like these to improve your development workflow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;Resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Example repo: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.austin.utexas.edu\/els2772\/Estella-Sun-git-Training\" target=\"_blank\">https:\/\/github.austin.utexas.edu\/els2772\/Estella-Sun-git-Training<\/a><\/li><li>git docs: <a href=\"https:\/\/git-scm.com\/docs\">https:\/\/git-scm.com\/docs<\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-1024x341.png\" alt=\"\" class=\"wp-image-6649\" srcset=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-1024x341.png 1024w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-300x100.png 300w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-768x256.png 768w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-1536x512.png 1536w, https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/05\/basic-training-last-steps-2048x683.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Just like in design, oftentimes you will find yourself wanting to save multiple copies of your work. I&#8217;m sure we all know this struggle . . . Well, (un)fortunately for developers, we don&#8217;t have to deal with the struggle of &hellip; <a href=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/09\/16\/web-dev-basics-git-and-github\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":744,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7494","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/744"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=7494"}],"version-history":[{"count":24,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7494\/revisions"}],"predecessor-version":[{"id":8331,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/7494\/revisions\/8331"}],"wp:attachment":[{"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=7494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=7494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=7494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}