MH Integrity

# Lesson 2 What is GIT

# GIT

GIT is a version control system for tracking changes in computer files.

When we create a web project, we create computer files containing code (text files) as well as other types of files like images.

So why would we want to store versions of our project files? When we work in a team or individually we want to keep track of project versions because it is:

  1. A better way to "undo" changes we make.
  2. When we have a set of changes that we want to keep track of, we call this a commit.
  3. View changes we have made in the past.
  4. A better way to collaborate with other people.
  5. A better way to share your code with the world.

Two main concepts

  1. Repository: (repo for short) the history of your project's commits.
  2. When we have a set of changes that we want to keep track of, we call this a commit.
  3. Commit: we save a group of file changes, like adding updating and/or deleting.

Why are we using GitHub?

  1. A public place to store our repository. (internet, cloud)
  2. When we have a set of changes that we want to keep track of, we call this a commit.
  3. GitHub has a worldwide community of people, including this class.
  4. There is a free account at GitHub which will store your repository, but it is public.
  5. Repositories at GitHub can be set up to allow other users to commit to it.
  6. GitHub is the best known GIT repository, but there are others like BitBucket and GitLab.

# First concept, creating a local repository

# DEMO

  1. Create a new project folder

    • Start VS Code
    • Click "Open Folder" button
    • Under "Desktop" select your user name "Mark Harder"
      • For many users this will not be there, choose: "This PC" then "Windows (C:)" Then "Users" and our logged-in user.
      • You can also use another drive like E: or D: depending on the configuration of your machine.
      • What you need to a location that you have full access to.
      • If you are using Windows 7 or 8, I recommend C:\src
    • Create a new Folder which we will place all our coding projects, name it "src" which is short for source code.
    • Create another new folder under src and name it "lesson02"
    • Click the "Select Folder" button

  2. When we have a set of changes that we want to keep track of, we call this a commit.

  3. Create a local git repository

    • [Ctrl-`] Ctrl Backtick -> Opens a command window (Terminal). This is the same thing as the "Command Prompt" windows app or "PowerShell" (Newer).
    • To initialize a git repository in the root of the folder, run the git init command
    ..\src\lesson02> git init
Initialized empty Git repository in C:/Users/../src/lesson02/.git/
    • If this is your first time, you will need to add a user.
    ..\src\lesson02> git config --global user.name "YourNameHere"
..\src\lesson02> git config --global user.email "Your@email"
    • You also should be asked for your login (username and password) for github

  4. Explore our project folder

    • Ctrl-B will toggle the Side Bar visibility, allowing us to easily maximize the space for our editor.

    • On the far left side, in the Activity Bar we have buttons which switch between feature views.

      • Ctrl-Shift-E File Group Icon: Explorer which is used to browse, open and manage our files.
      • Ctrl-Shift-F Magnify Glass Icon: Search
      • ctrl-Shift-G Branch Icon: Source Control

    • Explorer

      • There are two sections
        • OPEN EDITORS lists all open files
        • LESSON02 this is our project folder with all its contents

    • Create a new text file (Markdown format)

      • Place your mouse over the project folder project and you will see a New File and New Folder buttons. Click New File
      • type in a file name "README.md" press [Enter] key
      • the editor will open the new file and place the cursor at the top of line 1.
      • Enter the following text
      # Lesson 02 Hello World  

This Readme file is in a text format called Markdown.  
**Hello World**
      • Ctrl-S to save our file. Before you do, notice that in the right side of the file tab at the top of the screen we see a solid round icon showing that the file is not saved. After saving the icon will be an x which can be used to close the file.
      • Repeat this process for a second file named "README.txt", put any text you want in the file.

# Second concept, create a commit to our local repository

  1. When we have a set of changes that we want to keep track of, we call this a commit.

  2. Now lets look at GIT. Ctrl-Shift-G opens the source control screen. (Third Icon down on the right side)

    • At the top you'll see SOURCE CONTROL: GIT telling us that we are using GIT.
    • Next is our login, Commit Checkmark button, Refresh Circle button, More Actions Ellipsis
    • Next is a Message Textbox
    • Next CHANGES and a list of files that have changed

  3. Select our README.md file by clicking on the changes entry.

    • repeat this for the README.txt file.

  4. We can save a copy of our files as they are now by clicking the Plus icon "Stage Changes".

    • Stage Changes is the process of preparing a set of changes including updates, adds and deletes to be committed.
    • After we have staged all that we want to commit, we add a short statement explaining our changes.
    • Type "First Commit Hello World" in the Messages Textbox and click the Commit Checkmark.
    • We have now saved the first version of our files to our local git repository.

  5. Return to the Explore Side Bar Ctrl-Shift-E

    • Lets select the file README.txt that we created and delete it. DEL or Right-Click choose Delete
    • Next Edit the README.md file by deleting some text and adding some. Ctrl-S to save the file.

  6. Repeat steps 2-> 4, using a commit comment of "Delete unused file"

# Installing an Extension (GitLens)

  • One of the most powerful features of VS Code is the ability to add Extensions.
  • Extensions are:
    • Programs/Applications that add additional functionality inside VS Code
    • Written by the open source community, and they are free
    • Easy to add using the Extension Marketplace
  • Lets add an extension to make using GIT easier.
    • Ctrl-Shift-X Boxes Icon: Extensions
    • Type in the textbox "gitlens"
      • You should see :GitLens - Git supercharged
      • click on the green Install button.
      • You should see a page come up with details about the extension and then the button should change to blue and say "Reload"
      • Click on the Reload button to shutdown VS Code, then it will restart where you left off with the extension loaded.
      • You will now see a new Icon below Extensions called "GitLens"
      • Click on GitLens
      • You will now see an EXPLORER with details about your Git repository
        • Top icon will show your current branch.
        • under the branch icon will be commits, files changes and History.
        • Click through the History item to see your commits and the changes you made.
    • Adding to-many extensions can slow down VS Code or even interact in way you don't expect.
    • A few extensions I will use in the course are:
      • GitLens
      • GitHub
      • Live Server

# Our Repository at GitHub.com

  1. Get a free account for yourself at GitHub.com

  2. After logging into GitHub click the button "Start a project"

    • You will see "Create a new repository"
    • For the Repository name enter a short name without spaces "lesson02"
      • Enter a short description "My First Repo"
      • Leave it on Public (free)
      • Do not check "Initialize the repository with a README
      • click the button "Create repository"
      • You will see a new page with a Tab "Code" which has the new path that looks like https://github.com/markhharder/lesson02.git copy it

  3. Now we are going to use the command line to link our GitHub repo to our local git repo.

    • To push, pull and sync* between our local git repo and the one we created it GitHub.com

      > git remote add origin https://github/<repo owner>/<repo name>.git  
> git push -u origin master
      • If you get an error "fatal: remote origin already exists." then run the command "git remote rm origin" first to clear it out

    • In the Git sidebar choose [...] Advanced menu item Push.

      • You will see something like this in Terminal Ctrl-~
      git: 'credential-none' is not a git command. See 'git --help'.

The most similar command is
        credential-store
git: 'credential-none' is not a git command. See 'git --help'.

The most similar command is
        credential-store
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 212 bytes | 212.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/mhintegrity/lesson02/pull/new/master
remote:
To https://github.com/mhintegrity/lesson02.git
* [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

  4. Now let's go back to GitLens to see we now have entries in Remotes which match the local master branch

    • "origin" is the name we have given to alias the GitHub repo
    • Go to the GitHub.com web page to see our local changes reflected in the cloud.

# Assignment for next week

  1. Learn about Markdown reading this website
    http://commonmark.org/help/
  2. Go through this Markdown tutorial on your own at http://commonmark.org/help/tutorial/
  3. Create 3 Markdown files in your Lesson02 project, commit them in your local Git repo, and then push them to your GitHub page.
  4. Make sure to use mhintegrity Slack if you have questions.
  • Git References https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes
  • Review Keyboard shortcuts we learned in VS Code
    • Ctrl-~ Show / Hide Terminal
    • Ctrl-Shift-B Show / Hide Side Bar
    • Ctrl-Shift-E Show / Hide Explorer
    • Ctrl-Shift-F Show / Hide Search
    • Ctrl-Shift-G Show / Hide Source Control GIT
    • Ctrl-S Save current file
  • All class demo's have been removed and will be replaced with screenshot videos soon.
    • 37 Minutes Long
    • 127 MB Size
    • Resolution: HD 1080p

# Next Lesson

Lesson 3 HTML Getting Started