The command line can be a scary, dark place for new developers. With the Starters Guide to Git, GitHub in Web Development you’ll never be afraid of the dark again. This guide will take you from zero to hero in no time.
Table of contents
- Git Terms You should Know
- What is Git?
- What Does Git Do?
- Why You Need To Learn Git
- Is Git Disaster Proof?
- How To Install Git
- 12 Git Commands You Can Master Now
- Personalizing Git
- Getting Started with Git
- Testing Git’s functionality
- Testing Git’s Disaster Proofing
- Why Use GitHub
- Getting Started with GitHub
- Push Local Repo to Your GitHub Repo
- Using Git and GitHub Together
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
- 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.
- 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.
- Takes changes made in a local repo and pushes them to a repo on GitHub’s server
- Pull changes from a repository on GitHub’s server and updates your local repository.
- 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?
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.
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.
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
Installing Git for Windows:
- Download Git for Windows
go to git-scm.com → click on Download for Windows
Once download completes, open the installer
- Fast-track it
Click next all the way through (Keep default options)
- Open Program
Click on the Start menu → open the Git Bash program
Installing Git for Mac:
- Open Terminal
Open the Terminal program
- Enter Command
Type git —version → press Enter
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
- The Print Working Directory command shows you exactly which folder you are currently woking in.
- The Change Directory command allows you to change to a different directory (folder).
- 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.
- 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.
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 “firstname.lastname@example.org”
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:
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:
Create a repository inside the new-website folder by typing the following in your command line:
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 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.
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:
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.
Blog posts authored by Jameel with easy-to-navigate table of content
Starters Guide to Git & GitHub in Web Development
The Definitive Guide to 508 and ADA Website Compliance
3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Here's a couple of recommendations from Linkedn