{"id":4161,"date":"2019-10-20T00:27:44","date_gmt":"2019-10-20T00:27:44","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=4161"},"modified":"2019-10-20T00:27:44","modified_gmt":"2019-10-20T00:27:44","slug":"learning-to-work-with-git-and-github","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/learning-to-work-with-git-and-github\/","title":{"rendered":"Learning to Work With Git and GitHub"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post is part <strong>1<\/strong> of two-parts <strong><em>Learning to Work with Git &amp; GitHub<\/em><\/strong> post series. This learning post is still in active development and updated regularly.<\/p>\n<p>For self-taught web developers, learning <a href=\"https:\/\/en.wikipedia.org\/wiki\/Git_(software)\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a> is not an easy subject to tackle, especially if not-working in team. Web developers who work alone, all on-their-own and may not feel a need to learn Git &amp; use <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>. Because the software is so huge, there is lot to learn, even before getting started to use it. For most beginners, learning to use <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a> &amp; <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> could come with time consuming steep learning curve. My recent interest on <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">ReactJs<\/a> and <a href=\"https:\/\/www.gatsbyjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">GatsbyJs<\/a>, learning &amp; getting started using Git has become essential.<\/p>\n<p>The main objective of this learning series is to understand the very basic of <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a>, its commonly used most basic commands, and getting started using <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a>, by creating a local project and lunch it to <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> server.<\/p>\n<div class=\"article-series\"><strong>Learning series<\/strong><br \/>\n<strong>Part 1<\/strong>: Introduction to Git &#8211; The Basics (<strong>this post<\/strong>)<br \/>\nPart 2: <a href=\"https:\/\/tinjurewp.com\/jsblog\/a-collection-of-basic-git-commands-a-cheat-sheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Collection of Basic Git Commands &#8211; A Cheat Sheet<\/a><\/div>\n<p>The objective this part <strong>1<\/strong> of the series is to get familiar with <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a> and its key features, common Git terms, basic Git commands, and Git workflow from a perspective a front-end web developer.<\/p>\n<h4>What is Git &amp; How it Works?<\/h4>\n<h6>Git vs GitHub<\/h6>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Git\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a> is a distributed version control system (VCS) for tracking code changes in coding (software development) projects. It is the most preferred method of co-ordinating projects among team members. <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> is a open-source development platform to host code repositories to review code &amp; manage projects.<\/p>\n<p class=\"tip\"><em>Tip<\/em>: For a beginner, the terms <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git<\/a> &amp; <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> may be confusing. Simply put, Git is the system and GitHub is repository for hosting service.<\/p>\n<h6>Git Basics<\/h6>\n<p>Git is the most widely used open source distributed version control system (VCS) in software development and used by <a href=\"https:\/\/guides.github.com\/introduction\/git-handbook\/\" target=\"_blank\" rel=\"noopener noreferrer\">more than 70% developers<\/a> worldwide. In nutshell, Git sits on the top of file system and allows to manipulate files without changing the master file. It stores references of every changes in files as snapshot of that moment.<\/p>\n<p><a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics\" target=\"_blank\" rel=\"noopener noreferrer\">Git documentation<\/a> outlines following key features of Git:<\/p>\n<ul>\n<li><em>Git is a snapshots of a file mini system<\/em>. When a file is changed, Git takes snapshot of that file and stores only reference to that snapshot.<\/li>\n<li><em>Most Git operations are local<\/em> and it does not need extra server resources.<\/li>\n<li><em>Git has integrity<\/em>. Git uses unique ID, called SHA-1 hash (a 40-character string), to store everything and not by filename.<\/li>\n<li><em>Git generally only adds data<\/em>. All the actions taken in Git only add data to Git database.<\/li>\n<li><em>Git has the three states<\/em> (see below). The three main Git states that files can reside are: committed, modified, and staged.<\/li>\n<\/ul>\n<figure id=\"attachment_4184\" aria-describedby=\"caption-attachment-4184\" style=\"width: 689px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-4184 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/tinjurewp.com\/jsblog\/wp-content\/uploads\/2019\/10\/git-state.png\" alt=\"\" width=\"689\" height=\"485\" \/><figcaption id=\"caption-attachment-4184\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-4184 lazyload\" src=\"https:\/\/tinjurewp.com\/jsblog\/wp-content\/uploads\/2019\/10\/git-state.png\" alt=\"\" width=\"689\" height=\"485\" \/><\/noscript> Figure: Screenshot showing three states of git. Source: <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics#The-Three-States\" target=\"_blank\" rel=\"noopener noreferrer\">Git Documentation<\/a><\/figcaption><\/figure>\n<p>A brief <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics#The-Three-States\" target=\"_blank\" rel=\"noopener noreferrer\">explanation<\/a> of the three git states:<\/p>\n<ul>\n<li><strong>Git directory<\/strong>: It&#8217;s where Git metadata and object database of a project are stored. This what gets copied while cloning a repo from remote Git server.<\/li>\n<li><strong>Working directory<\/strong>: It&#8217;s a single checkout of one version of project. These files are pulled out of Git directory and placed in disk for use or modification.<\/li>\n<li><strong>Staging area<\/strong>: Its is simple file stored in Git directory which contains information that goes into the next commit. It is also referred as &#8220;index&#8221;.<\/li>\n<\/ul>\n<p>Additional Information: <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics\" target=\"_blank\" rel=\"noopener noreferrer\">Git Basics<\/a> | Git Documentation<\/p>\n<h6><strong>Git &amp; GitHub Terminology<\/strong><\/h6>\n<p>Before getting started with the Git &amp; GitHub, it is important to get familiar with some commonly used terms. Some selected glossary terms from the <a href=\"https:\/\/help.github.com\/en\/github\/getting-started-with-github\/github-glossary\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub glossary<\/a>:<\/p>\n<ul>\n<li><strong>Git<\/strong> : an open source, distributed version-control system (VCS) for tracking changes in text files, and core GitHub technology.<\/li>\n<li><strong>GitHub<\/strong> : a platform for hosting and collaborating on Git repositories.<\/li>\n<li><strong>Repository<\/strong> : A repository is the most basic element of GitHub. They&#8217;re easiest to imagine as a project&#8217;s folder.<\/li>\n<li><strong>Private repository<\/strong> : Private repositories are repositories that can only be viewed or contributed to by their creator and collaborators the creator specified.<\/li>\n<li>Add : This command is used to add file to Git repository.<\/li>\n<li><strong>Branch<\/strong> : A branch is a parallel version of a repository. It is contained within the repository, but does not affect the primary or <code>master<\/code> branch which allows to work freely without disrupting the &#8220;live&#8221; version.<\/li>\n<li><strong>Clone<\/strong> : A clone is a copy of a repository that lives on local computer instead of GitHub server, or the act of making that copy.<\/li>\n<li><strong>Commit<\/strong> : A commit, or &#8220;revision&#8221;, is an individual change to a file (or set of files). It&#8217;s similar to <em>saving<\/em> a file, except with Git, every time a file is saved it creates a unique ID (eg &#8220;SHA&#8221;) that allows to keep record of what changes were made when and by who.<\/li>\n<li><strong>Fork<\/strong> : A fork is a personal copy of another user&#8217;s repository that lives on local account.<\/li>\n<li><strong>Fetch<\/strong>: Fetching refers to getting the latest changes from remote repo without merging them in to compare with local branches.<\/li>\n<li><strong>Index<\/strong> : This refers to cache where changes are temporarily stored before they are committed.<\/li>\n<li><strong>Merge<\/strong> : Merging takes the changes from one branch (in the same repo or from a fork), and applies them into another. Often happens in a pull request.<\/li>\n<li><strong>Push<\/strong>: sending committed changes from local repo to the GitHub remote server.<\/li>\n<li><strong>Pull<\/strong>: Pull refers to when you are fetching <em>in<\/em> changes <em>and<\/em> merging them. If someone has edited the remote file you&#8217;re both working on, you&#8217;ll want to <em>pull<\/em> in those changes to your local copy so that it&#8217;s up to date.<\/li>\n<li><strong>Hash<\/strong> : It refers to a unique file ID created by Git. For example, if two files have identical contents then they will have the same hash value where as if the two files with different contents contain different hash values.<\/li>\n<li><strong>HEAD<\/strong>: It&#8217;s a commit hash value and referring to a pointer to the most recent commit on the current branch.<\/li>\n<li><strong>Status<\/strong>: A status is a type of status check on GitHub.<\/li>\n<li><strong>Diff<\/strong> : Its a command to that is used to determine what changes have been made.<\/li>\n<li><strong>Log<\/strong> : This refers to the revision history of a file or folder.<\/li>\n<li><strong>Remote<\/strong> : a common repository on GitHub. It can be connected to local clones so that changes can be synced.<\/li>\n<li><strong>Upstream<\/strong> : This refers to where file changes are pushed, typically the master branch.<\/li>\n<\/ul>\n<p>For full lists of terms: <a href=\"https:\/\/help.github.com\/en\/github\/getting-started-with-github\/github-glossary\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Glossary<\/a><\/p>\n<h4>Some Basic Git Commands<\/h4>\n<p>Before using Git, it is essential to familiarize with most basic commands to create file, copy, change and combine codes in projects. <a href=\"https:\/\/guides.github.com\/introduction\/git-handbook\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git Handbook<\/a> lists the following basic git commands with brief explanation:<\/p>\n<ul>\n<li><strong><code>git init<\/code><\/strong> : Create an empty Git repository or reinitialize an existing one. It adds a hidden sub-folder within the existing directory that houses the internal data structure required for version control.<\/li>\n<li><strong><code>git clone<\/code><\/strong> : Clone a local copy of a repository that already exists in the remote. The clone includes all the project\u2019s files, history, and branches.<\/li>\n<li><strong><code>git add<\/code><\/strong> : Add file contents to the index. The &#8220;index&#8221; holds a snapshot of the content of the working tree, and it is this snapshot that is taken as the contents of the next commit. Thus after making any changes to the working tree, and before running the commit command, you must use the <code>add<\/code> command to add any new or modified files to the index. (eg. track files).<\/li>\n<li><strong><code>git commit<\/code><\/strong> : Record changes to the repository. This command saves the snapshot to the project history and completes the change-tracking process. (eg. commit tracked files).<\/li>\n<li><strong><code>git status<\/code><\/strong> : Show the working tree status. This command shows the status of changes as un-tracked, modified, or staged.<\/li>\n<li><strong><code>git branch<\/code><\/strong> : List, create, or delete branches. This command shows the branches being worked on locally.<\/li>\n<li><strong><code>git merge<\/code><\/strong> : Join two or more development histories together. This command is typically used to combine changes made on two distinct branches.<\/li>\n<li><strong><code>git pull<\/code><\/strong> : Fetch from and integrate with another repository or a local branch. Incorporates changes from a remote repository into the current branch. (eg. file download).<\/li>\n<li><strong><code>git push<\/code><\/strong> : Updates remote refs using local refs, while sending objects necessary to complete the given refs. (eg. upload files).<\/li>\n<\/ul>\n<p>Additional information : <a href=\"https:\/\/git-scm.com\/docs\" target=\"_blank\" rel=\"noopener noreferrer\">Git Reference<\/a><\/p>\n<h6><strong>What is The GitHub Work Flow ?<br \/>\n<\/strong><\/h6>\n<p>GitHub work flow is the process where new development or pull request can be tested safely without making change to the master repository through branching. A Git flow can be simple or very complex depending upon the projects and team members involved etc.<\/p>\n<p>As per <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics\" target=\"_blank\" rel=\"noopener noreferrer\">Git documentation<\/a>, a basic Git workflow consists of the following three steps:<\/p>\n<ul>\n<li>Perform file modification in the working directory.<\/li>\n<li>Stage the modified file, adding their snapshots in the staging area.<\/li>\n<li>Make a commit, which takes the files from the staging area and stores that snapshot permanently to the Git directory.<\/li>\n<\/ul>\n<p>An example of more complex branch-based work flow, from the <a href=\"https:\/\/github.github.com\/training-kit\/downloads\/github-git-cheat-sheet.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Training<\/a>, has following six steps:<\/p>\n<figure id=\"attachment_4171\" aria-describedby=\"caption-attachment-4171\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-4171 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/tinjurewp.com\/jsblog\/wp-content\/uploads\/2019\/11\/gitflow.png\" alt=\"\" width=\"800\" height=\"254\" \/><figcaption id=\"caption-attachment-4171\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-4171 lazyload\" src=\"https:\/\/tinjurewp.com\/jsblog\/wp-content\/uploads\/2019\/11\/gitflow.png\" alt=\"\" width=\"800\" height=\"254\" \/><\/noscript> Screenshot showing Git Flow. Source: <a href=\"https:\/\/github.github.com\/training-kit\/downloads\/github-git-cheat-sheet.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Training<\/a><\/figcaption><\/figure>\n<ul>\n<li><em>Create a branch<\/em>: Branch are usually created from master, which allows to team members to contribute in parallel efforts. Name branch descriptively.<\/li>\n<li><em>Add commits<\/em>: This is snapshot of development efforts within a branch to create safe, revertible points in the history. Make commit to the branch locally &amp; regularly.<\/li>\n<li><em>Open a pull request<\/em>: It publicize project . For feedback or help<\/li>\n<li><em>Discuss &amp; review code<\/em>: Team members participate to in the project by code review, testing &amp; commenting open pull requests.<\/li>\n<li><em>Merge<\/em>: This is the process where changes from one branch (eg. repo or fork) and applies them to the other.<\/li>\n<li><em>Deploy<\/em>: Once the project is merged &amp; pushed to the master, it is deployed.<\/li>\n<\/ul>\n<p>More detailed information: <a href=\"https:\/\/guides.github.com\/introduction\/flow\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding the GitHub Flow<\/a> | <a href=\"https:\/\/guides.github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Guides<\/a><\/p>\n<h6><strong>Some GitHub Tips<\/strong><\/h6>\n<p>Some common tips while working on GitHub include:<\/p>\n<ul>\n<li><em>Commit often<\/em>: Make commit as small &amp; commit as often as possible.<\/li>\n<li><em>Test, then commit<\/em>: Never commit incomplete work.<\/li>\n<li><em>Use commit messages<\/em>: Include descriptive commit message about the change made.<\/li>\n<li><em>Branch out<\/em>: Create new branches as required.<\/li>\n<li><em>Settle on Common Workflow<\/em>: Use a common workflow among team members.<\/li>\n<\/ul>\n<p>Source: <a href=\"https:\/\/www.keycdn.com\/blog\/git-cheat-sheet\" target=\"_blank\" rel=\"noopener noreferrer\">Git Cheat Sheet<\/a> | <a href=\"https:\/\/www.keycdn.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">keycdn.com<\/a><\/p>\n<h6>Wrapping Up<\/h6>\n<p>In this Git basics learning-note post, defining Git and its key feature, common Git terms, basic Git commands, and Git workflow were discussed. In the 2nd part of this learning-note series, basic Git commands will be created as a cheat sheet and a few working examples will be discussed.<\/p>\n<p>Next Post: <a href=\"https:\/\/tinjurewp.com\/jsblog\/a-collection-of-basic-git-commands-a-cheat-sheet\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Collection of Basic Git Commands &#8211; a Cheat Sheet<\/a><\/p>\n<h6>Useful resources<\/h6>\n<p>While preparing this post, I have referred the following references extensively. Please refer to original posts for more detailed information.<\/p>\n<ul>\n<li><a href=\"https:\/\/guides.github.com\/introduction\/git-handbook\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git Handbook<\/a> | <a href=\"https:\/\/guides.github.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Guides<\/a><\/li>\n<li><a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started &#8211; Git Basics<\/a> | <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Getting-Started-Git-Basics#\" target=\"_blank\" rel=\"noopener noreferrer\">Git Documentation<\/a><\/li>\n<li><a href=\"https:\/\/juristr.com\/blog\/2013\/04\/git-explained\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git Explained: For Beginners<\/a> | <a href=\"https:\/\/juristr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">juri.dev<\/a><\/li>\n<li><a href=\"https:\/\/rubygarage.org\/blog\/most-basic-git-commands-with-examples\" target=\"_blank\" rel=\"noopener noreferrer\">Most Basic Git Commands with Examples<\/a> | <a href=\"https:\/\/rubygarage.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">RubyGarage<\/a><\/li>\n<li><a href=\"https:\/\/git-scm.com\/docs\/gitglossary\" target=\"_blank\" rel=\"noopener noreferrer\">A Git Glossary<\/a> | <a href=\"https:\/\/git-scm.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Git Documentation<\/a><\/li>\n<li><a href=\"https:\/\/help.github.com\/en\/github\/getting-started-with-github\/github-glossary\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Glossary<\/a> | <a href=\"https:\/\/help.github.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Help<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part 1 of two-parts Learning to Work with Git &amp; GitHub post series. This learning post is still in active development and updated regularly. For self-taught web developers, learning Git is not an easy subject to tackle, especially if not-working in team. Web developers who work alone, all on-their-own and may [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[33],"tags":[],"class_list":["post-4161","post","type-post","status-publish","format-standard","hentry","category-git-github"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=4161"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4161\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=4161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=4161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=4161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}