Starters Guide to Git & GitHub in Web Development

Git Terms You Should Know

Before we jump into Git, here are a few terms to get familiar with:

Repository (Repo)

This is where Git saves all of the data, history and changes for a project

Working directory

Folder location on your computer where your project lives

Staging

In Git, before you commit changes you must first stage your changes. This give us control of what we want to commit in case we didn’t want to make all the changes you made.

Commit

Git doesn’t save any changes to its history until your commit the changes. Also known as Git’s way of saving

Command Line

This is a place where we can type all the command for Git.

Push

Takes changes made in a local repo and pushes them to a repo on GitHub’s server

Pull

Pull changes from a repository on GitHub’s server and updates your local repository.

GitHub

Most popular repository hosting service.

What is Git?

The world’s most popular version control system. You can install git on your computer. git is best when used in the command line ui-less version. There are programs that attempt to make git easier, but it’s best to keep it simple.

Git helps with managing projects files. Please remember Git is not GitHub! They are two very different services. GitHub will be covered later in this post.

What Does Git Do?

History

Git keeps track of every change to your project. If you make a change to your website and months later you want to undo the changes, without all of the guesswork git can tell us the date you removed or changed lines X to Z in whichever file you need.

So you will never have to worry about forgetting what changes you made. So if anything breaks on your website, nothing is lost or final thanks to Git’s history.

Collaboration

Git allows you to collaborate in large or small teams and edit files simultaneously without waiting for your co-workers to finish with files.

You can continue working on your changes and merge everyone’s changes once the task is complete.

Feature Branches

Git allows you to work on separate features in a file or project at the same time.  Git tracks the branches separately from each other. Once one feature is finished, you can merge the branch into the tree (or master).

Why You Need To Learn Git

Git is an industry standard. So if you ever want to land a web development job, there’s no way around it. You must know Git. 

Is Git Disaster Proof?

Git has a hidden system folder it stores locally (on your computer) where it saves all the commits, changes and history for a repo. This means if something happens to your computer, your project is completely lost.

This issue is solved by hosting your repository on a server like GitHub. So yes, when used correctly, git is disaster proof.

How To Install Git

Windows

Installing Git for Windows:

1. Download Git for Windows

   go to git-scm.com → click on Download for Windows

2. Open

   Once download completes, open the installer

3. Fast-track it

   Click next all the way through (Keep default options)

4. Open Program

   Click on the Start menu → open the Git Bash program

OSX

Installing Git for Mac:

1. Open Terminal

   Open the Terminal program

2. Enter Command

   Type git —version → press Enter

3. You should see the git version number that is installed on your computer, if not go to git-scm.com and download the latest version for Mac

12 Git Commands You Can Master Now

pwd

The Print Working Directory command shows you exactly which folder you are currently woking in.

cd

The Change Directory command allows you to change to a different directory (folder).

mkdir

The Make Directory command creates a new folder in your present working directory.

git init

Git Initialize creates a repository from your present working directory. This allows all your changes and history to be tracked.

touch

This command creates blank files in you present working directory.

git status

The status command tells you which files were recently changed or added

git add

Adds a specified changed file to the staging area.

git commit

Commits changes to a repository (Git’s way of saving things to its history).

git checkout

This command goes into your history and restores your files back to the last commit made.

git clone

This command copies an existing repository from a server online to your computers hard drive.

git config

Allows you to personalize your Git settings by adding your name and email address.

git remote -v

This command shows us the server address where Git thinks you want to push files to.

Personalizing Git

Before getting started with Git you must let Git and anyone else you may be collaborating with know who you are and who’s making changes. Time to start typing commands!

Personalizing Your Git Settings

To set your username type following into your command line:

git config —global user.name “Your Name”

To set your email type:

git config —global user.email “your@email.com”

Now you are all set to go! Now you can start playing around with Git.

Getting Started with Git

Create a blank folder on your desktop and name it my-websites

Go to your command line and type pwd, Git will tell you which folder you’re currently working in.

Change your present working directory to the my-websites folder you just created by typing the following in your command line:

cd /users/your-computer-name/Desktop/my-websites

You can also type cd and drag the folder onto the command line

Make a new directory (folder) inside the my-websites folder and title it new-website by typing the following in your command line:

mkdir “new-website”

Create a repository inside the new-website folder by typing the following in your command line:

git init

The commands above will unitize an empty Git repository in the new-website folder. 

Congratulations! You’ve made your first repo! Now any changes you make in your directory and save will be tracked in the history. Also any accidental changes or file deletes can be undone quickly. Lets test this out.

Testing Git’s functionality

Create a new file titled index.html. Type touch “index.html” in your command line

With the command you typed above you should have a new file inside your new-website folder titled index.html. Open the file in your favorite text editor and add an H1 header and save it.

Now we need to check the status of any changes in our repository. In your command line type

git status

Git will inform you that you’ve made a change to index.html

Next, we need to add the index.html file to the staging area. Type the following in your command line:

git add index.html

We can check our status to see if the index.html file was removed. It should now be gone and added to the staging area. You can check by typing git status But you don’t have to do this every time.

Now let’s commit the file and add the message ‘My first commit.’ Type the following in your command line:

git commit -m ‘My first commit.’

Congratulation! You just made your first commit to a repo! This means you can make all the mistakes you need. You can let your cat do some typing and saving, you can even delete your files and empty trash. You’ll always be able to revert back to your last commit. Let’s test this out.

Testing Git’s Disaster Proofing

Move your index.html file to the trash and empty it. Now make sure your file is completely gone.

Restoring Files

To restore your files back to your last commit all you need to do is type the follow:

git checkout -- .

Just like magic your index.html file should be back to normal. You can see the usefulness of Git already right? 

Pull an Existing repository

More often than not you’ll be cloning an existing repository from a server to your computer hard-drive. This is really easy to do with Git.

In the command line navigate to the my-websites directory by using the cd command. Just type the following:

cd /users/your-computer-name/Desktop/my-websites

or you can use the other way by typing cd and dragging the folder into the command line.

To pull an existing repo from an online server just type

git clone http://github.com/jameelevans/git-starter-guide.git

This would clone the repo and add it to the my-websites directory. You should now see all the images, css and html files instantly! Open the index.html file in you favorite browser and enjoy.

Why Use GitHub

But what if you completely broke or lost your computer? Then your repository and it’s files would be completely lost. This is where a repository hosting service like GitHub is a must-have.  There are other repository hosting services out their like GitLab, BitBucket, SourceForge or many others. Since I already have a GitHub account were gonna use that.

Getting Started with GitHub

Before we get started with GitHub you’ll need to swing over to  GitHub.com and create a free account. Once you’re done with that you can start creating your first repository.

Creating a New Repository

To  create a new repository click the + dropdown and select New Repository

Choose a name for your repo making name all lower case with dashes between words

Leave the ‘Initialize this repository with a README’ unchecked

Then scroll down and select ‘Create Repository’

You’ll be directed to an empty repository overview page

At this point your new repository is ready for you to PUSH something to it.

Pull repo (Website) to Work With

Instead of starting a completely new project, lets pull one off GitHub to work with. 

Go to your command line and change you working directly to my-websites (Refer to previous examples on cd)

Then enter the following:

git clone http://github.com/jameelevans/starter-website.git

You should have a new starter-website folder in the my-websites folder. Inside the new folder you’ll see files for a starter bootstrap 4 website.

Rename the folder to what ever you named your repository on GitHub.

Change your present working directory to the folder you just renamed (Refer to previous examples on cd)

Push Local Repo to Your GitHub Repo

Since we cloned our repo from an existing GitHub repo, Git will try to push it back to its original  place.

Type git remote -v in your command line to see where Git will try to push your repo.

You’ll notice the address from the repo you pulled before. This is not what you want. Since you’ll pulled the repo from an existing aGitHub repo you’ll need to set a new origin.

Set New Origin of Repo

To set the origin to match the url of your blank repo simply go over to your blank repo on GitHub and copy that address to your clipboard

In you command line type git remote set-url origin (type or paste in the url without brackets) press enter. Check to see if everything is right by tying git remote -v in the command line. The origin should show the URL you just put in. 

So when we tell Git to push to the origin, it knows the origin is your GitHub.com repo. 

You are now ready to push your repo from local to GitHub. Type the following command in your command line:

git push origin master

Git will ask you for your Git username and password, enter them and press enter again (You won’t have to do this too much).

Once everything is done loading, go and refresh your GitHub repo page, then you’ll see you have added your files to GitHub from your computer using Git. Now you’re able to make local commits and push them all to your GitHub server when complete. Now this is complete disaster proofing. Let’s test everything out.

Using Git and GitHub Together

Now lets put everything together and use Git with GitHub together. We’re gonna make a local comment then push it up to GitHub.

First, make a few changes to the index.html file and save it.

Go to your command line and type git status This should tell you which files were changed. Stage the file by typing git add file/path

To add all files type

git add .

You can check to see if it was staged by using the git status command. 

Commit the changes by typing:

git commit -m ‘Made simple change to html’

This makes the changes to the local copy on our computer. Now lets push a copy to you GitHub server. Just type the following:

git push origin master

Go and check your GitHub.com overview for your repo, and your will see the changes there. This means even if your dog ate your computer, your files will always be safe.

Wrapping Things Up

I hope this guide was useful in helping you get comfortable with git. If you have any suggestions to add or edit anything to this post, please leave a comment below.