github

Git-based Workflows using Github

Lessons

A Version Control Workflow

In this lesson, we will learn about Git via a hands-on exercise using Github.

Watch a Review Video Lesson
Go to a Related Set of Github Lessons

Git is a version control system for tracking changes in computer files and coordinating work on those files among multiple people.
– Wikipedia

GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its own features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project.
– Wikipedia

Git is a “distributed” version control system, where you keep your code in one place and are able to manage, track, and backup your code (e.g. using GitHub, a hosting platform that uses Git). It can be complex, especially when it comes to managing large projects with large teams. In this lesson, we are going to cover the basics specifically geared toward individual web designers, front-end developers and small teams working on small projects.

Outcomes:

  • Learn the basics of Git and common git commands via CLI (Command Line Interface)
  • Learn how to install Git locally, setup your local environment, and create a new repository from scratch.
  • Learn a basic daily workflow of syncing a local repository with a remote repository on GitHub, editing it locally, and updating it.

Lesson Resources:

  • Hello World (a first repository, for learning purposes)

Three Parts of this Lesson:

  1. Installing Git
    Make sure that you have Git installed on your local machine
  2. Setting up a Repo
    Learn how to create repositories on Github from scratch (in the browser)
  3. Learning About Daily Git Workflows
    Understand the process of cloning, pulling, editing, commiting, and pushing using git via CLI. to remotely update an existing repository on Github
Git Comic
Git comic from xkcd

Part 1

Install Git

Make sure that you have Git installed on your local machine

Before you install anything, first check to see if you have it already installed. You can confirm via the following commands (to be entered via CLI, such as Terminal on a MAC or Command Prompt on a PC)

$ git --version
  1. If you already have git installed, you can move on to Part #2. If you do not have git installed, follow the installation instructions on the Git web site.
    • Another option: you can also download GitHub Desktop, a GUI client, that will automatically install git on your computer. However, I do not recommend using GitHub Desktop to learn Git. Instead, I recommend using the command line interface (CLI), which we will do in this lesson. 
    • WARNING: Mac users, you might also need to install X-Code, available via the App Store for free, which comes with a built-in command-line tool. If prompted, be sure to follow these installation instructions and this should resolve potential CLI errors.

Part 2

Get Setup on GitHub

Create your first repository on Github from scratch (for 1st time users)

  • Create an account at Github.com and log in.
    • Note your user name
    • Note your user email address
  • Configure your git username and email address to match your github account (e.g. if you are using github).
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

To test/ensure that your username and email configurations are correct:

$ git config --global user.name
$ git config --global user.email

Tip: if you prefer to use a GUI to update your global username and email address, you can do so via Github Desktop.

Always Create your repositories on Github.com via your browser

A repository (aka “repo”) is essentially a main project folder, designed to organize single projects. Each can contain multiple sub folders and files. All repositories should have a README, a default file for each repository with information about the project. GitHub makes it easy to add one whenever you create a new repository using your browser (via github.com). It also offers other common options such as adding a .gitignore file (which some beginners find challenging to create locally) along with license options.   

  1. In the upper right corner, click + and then select “New Repository”
  2. Name your repository whatever you want (e.g. “hello-world”)
  3. Write a short description
  4. Select Initialize this repository with a README 
  5. Select “Create a .gitignore file” (this can always be edited or created later if you forget)
  6. After the repo is created, next go to settings > enable Github Pages
  7. Then scroll down to Part 3 below “CLI Daily Workflow for a New Project” section

Part 3

Daily Git Workflows

Use git (e.g. Github) as part of your daily practice

Below are several different scenarios and processes for how you might use git as part of your daily workflow and what some of the more common commands might be.

#1 CLI Daily Workflow for a New Project

(if this is your first time working on locally, or you previously deleted your local folder and need to set it up again.) 

NOTE: This workflow assumes that you already have a repo created on Github and you now want to clone it locally to start editing it.

CLI > cd (Change Directory) to where you want to work Locally

Via command line, navigate to your target parent directory (the folder where you will want to clone your github repo into)

$ cd targetparentdirectory

For example, some developers use the desktop and many found lessons will use the desktop for demo purposes. It doesn’t matter where you choose to save your project folders because this is a personal choice. Plus, you can always move them later. For demo purposes, let’s use the desktop.

$ cd desktop

Confirm that you are in the right place by listing the directory files/folders

$ pwd   // for Mac users, pwd displays the directory path (where you currently are)
$ cd   // for PC users, cd will display the directory path (where you currently are)

$ ls -l // lists the files within the current directory for Mac users
$ dir   // lists the files within the current directory for PC users

Clone the Github Repo to your Local Computer

Once you feel confident that you are in the correct place (e.g. the desktop), the next step is to clone the repo from GitHub. Clone the directory to your repo on Github (tip: copy/paste the url path to the repo via your browser, e.g. https://github.com/username/reponame/)

$ git clone <path-to-repository>

Example:

$ git clone https://github.com/johndoenma/hello-world

Once the repo is cloned to your local machine, you’ll need to navigate into the project folder/directory

$ cd projectfolder

Example:

$ cd hello-world

Once again, you can confirm that you are in the right place by displaying your currently directory path:

$ pwd // or cd for PC users

Optional/additional confirmation: at any time you can double-check the status of your repo to see if your cloned local repo is up-to-date

$ git status

You are set to begin editing! (e.g. edit the README.md file, add project folders or files, run gulp, edit/code, etc).

  • For an initial “hello world” lesson (your first Github repo), open your IDE (editor of choice) and edit the README.md file, then save it.
  • After you have made a change to your README.md file, move on the Daily Workflow steps below for when you are done for the day.

#2 CLI Daily Workflow for an Existing Project

(if you already have a project setup and worked on it locally before)

Via command line, navigate to your a target parent directory

$ cd projectfolder

Check the status of your repo to see if your cloned local repo is up-to-date

$ git status

If your local folder is up-to-date, then you are set to go! (e.g. edit files, run gulp, etc.)

If your local folder is not up-to-date, then you need to update your local repo to match the remote repo by “pulling” the latest version.

$ git pull

To confirm that your pull worked, you can double-check the status of your repo to see if your cloned local repo is now up-to-date

$ git status

Tip: an easy way to do this is to use VS Code’s built-in syncing feature, which can be found in the Source Control tab (3rd icon down on the left side of the UI). See the tip below for more info.

Once you feel confident that you have the latest up-to-date files from the remote repo, then you are set and ready to code! (e.g. edit files, run local build tools, etc.)

#3 CLI Daily Workflow for When You are Done for the Day

(Tip: you should memorize these commonly used git commands)

When you are done editing for the day, the following are the most commonly used git commands for solo developers.

First off, whenever you are done for the day, you should always check the status of your repo before you commit.

$ git status

If your local version is ahead of master (which it should be if you are a solo developer), then these three commands will be the most important ones to memorize:

$ git add -A
$ git commit -m “comment goes here”
$ git push origin master

Warning: at one point (~ mid-2021) Github started naming the default branch “main” instead of “master” so be prepared to take note of this change if/when you create any new repos.

If successful (e.g. no errors), you should be able to double-check by launching your browser and viewing your github.com repository to ensure that all recent updates/changes have been uploaded to github.com.

TIP: Use your Code Editor as a Git GUI. It’s Easy! I recommend VS Code.

FYI: Some code editors provide easy GUI-based workflows for version control, such as VS Code’s built in support for git. Therefore some developers may not use the terminal always, especially when it can be done so quickly and easily without leaving their editor. Regardless, it is important to understand core git commands so that you understand what is happening under the hood when you commit and push your code to Github using a GUI. It will also come in handy when/if you ever run into errors or conflicts.

You can also use Github Desktop, a native GUI app for managing your Github workflows, although I would recommend using either VS Code’s built-in GUI features or VS Code’s built-in Terminal.

Congratulations, you are now up and running using git on Github!

Further Reading

Related Lessons

The following are related lessons that were created as part of a multi-step exercise on how to set up a student site via Github:

Git Related Reading and Learning Resources