If you haven't experienced the life changing magic of version control, then this post is for you! I've decided to make this one of my very first posts on my new blog because Git and Github are things you'll use in all of your future coding projects. I'll talk a bit about my life before Git (cringe!), the differences between Git and Github, why you should use them, and how to get started. Read on and commence learning my friend! <3

Life before Git ( sad days :/ )

I remember my first attempts at getting started with Git. It was way back in 2012 and I had just gotten my first "real" dev job. No one in my office was using Git at the time, but I had started hearing about it from developers I followed on Twitter. So, I decided to try it out, even though I didn't really know what it was for. I browsed some projects on Github and forked a few becuase.. why not? and after struggling for a whole weekend I finally created my first Github repo. I felt a mild sense of accomplishment, but I wasn't really sure what the point of it all was.

Meanwhile, at the office, my team continued to work on our web projects the only way we knew how. Making updates to a client website went kind of like this:

1. First we would download the web files via FTP from the server. This is how we made sure we had the latest code.
2. Then (and this was super important), we would create backups of any files we needed to change, that way, if we broke something and needed to restore a previous working version, the backup was on hand to save us.
3. Once we finsished making our changes, we would get rid of the backups and upload the finished files to the server again via FTP.

Sometimes this would get complicated if several people were working on the same project at the same time, but in those cases we were just extra careful about making backups and tried to communicate as much as possible to avoid overwriting each other's work.

Enter the Octocat

The Octocat is Github's cute cat-headed octopus mascot.

They day my team finally started usng Git, my life as a developer changed forever. It was a hard sell at first. Changing team processes can be difficult and Git is especially intimidating when you don't know how to use it. But once we got used to it, Git made it so that we never had to worry about losing work that we spent so much time on again! And with Github, we could all collaborate much more easily without fear of overwriting each other's work. Finally, I understood WHY Git and Github were so useful and I've been using them ever since. (In fact, I wish we had Git for everything.)

The Difference Between Git and Github

The first thing you need to know about Git and Github, is that they are two different things.

Git is the name of the technology that tracks changes to files in a given directory. It is what provides us with what we call 'version control'. Git can track changes to files in a project folder on your computer, or it can track changes to files on a remote server. With Git you can group a set of changes together in what is called a 'commit' and you can push those groups of changes to a remote repository, if you have one, so that other developers can see and download your changes. We will get into what else it can do in a little bit.

Github is a company that hosts remote Git repositories. It provides a place for you store your code, so if something tragic were to happen to your computer, you don't risk losing important work. It also allows for code sharing and project collaboration with people all over the world.

To put it simply, Git is a version control system, and Github hosts repositories that use Git. Also, repository is the term we use to refer to directories that are using Git to track file changes.

Git Started

Alright, now that we have some context for what Git is, and why we should use it, let's Git started!

Before you can work with Git, you need to make sure you have it installed on your computer. To see if you already have Git on your computer, open a Terminal (Mac) or Command Prompt (Windows) and run git --version. If you get something that says command not found then either you don't have Git installed or its not

I'm not going to spend time debugging Git installations in this post (sorry!) but if you need additional help getting Git setup on your computer, check out these resources:

• Getting Started - Installing Git
• Terminal Command To Find What Version Of Git I Have Installed?
• Installing Git for Windows on a Windows Machine
• error with git (-bash: git: command not found)

If you find any other resources to help get Git working on your system, please share in a comment below! :)

Git Configured

This section contains stuff you should only ever have to do once after first installing Git. We are going to run through some commands you can run to tell Git a little about yourself so that it can relate your file changes to you! We will be applying these setting globally. You can also apply git config setting for individual repos. Pretty cool, huh?

Git User name
Check your Git user name:

git config user.name

Set your Git user name:

git config --global user.name 'Firstname Lastname'

Git Email
Check your Git email:

git config user.email

Set your Git email:

git config --global user.email [email protected]

There are lots of other setting in Git that you can configure, but we will stick with these for now. Let's move on!

Git for New Projects

Local Repo Setup

The first thing we should do when starting any new web development project is set up a Git repo (short for repository) to store and track changes to our code.

First let's create a directory for our project on our computer. I usually keep all of my web projects in a folder called WebDevelopment. This makes it easier for me to find any web project I want to work on. Once your project folder is created, open up a Terminal (Mac) or Command Prompt (PC) and navigate to your project folder. For me, the command to navigate to my project folder looks like:

cd WebDevelopment/my-web-project/

cd is the command used to change directories. Next, is the path to the directory. Once inside your project directory, initialize git by running:

git init

If all goes well you should get a response that looks like:

Initialized empty Git repository in path/to/your/project/.git/

This command ads a .git directory which contains all of the files responsible for tracking your project with Git.

Congratulations! You've just created a local Git repository!!!

Now that your repo has been created, open your project folder in your favorite code editor.

Add some important project files

Before we start adding HTML, CSS, or JavaScript code to our project, we need to add some files that will help us manage our repo. The two files we will add are:

• .gitignore - This is the file Git uses to know which files to ignore. When Git ignores a file or folder, it doesn't track it. Git will not include any changes to files or folders listed in .gitignore in your commits nor will it push them to your remote repository. These files will continue to exist in your local project only.
• README.md - This is the file that contains information about the rest of the files in your repo. It can give an overview of your project, instructions on how other developers can get it up and running, and other helpful information about your project. This is the file that Github renders on the front page of your repository, so its a good idea to make sure it is always up to date.

Create a .gitignore file. We will leave it blank for now, but we may add files and folders to later as needed.

Create a README.md file. The .md file extension means that this file is a Markdown file. Markdown uses a simple syntax to render formatted text like titles, bullets, links, etc... It also accepts valid HTML.

Let's just add a title and description for now:

# my-web-project
A hello world get repo

Initial Commits

Now that we've done some work, let's make sure we don't risk losing any of it. We will be using the git commit command to save a snapshot of our project at its current state.

The first thing I like to do before I commit any changes is check the status of my git repo to see what changes have been made. To do this simply run:

git status

You should get a response that looks like this:

On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        README.md

Ok, good. This means Git is tracking our directory and knows that we create and modified two files, .gitignore and README.md

Now, let's add these changes so we can commit them. To add all of our changes we can run this command:

git add .

The . is a way of saying that we want to add all changed files in the current directory. Now let's run git status again to make sure everything was added correctly. If all went well, you should now see something like this:

On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   .gitignore
        new file:   README.md

Now we can commit our changes and add a message to describe the changes we made. To do this, run the following command (add your own message if you like):

git commit -m "initial commit"

The -m flag stands for message and is followed by our commit message. Our commit message needs to be surrounded by quotes ("").

Congrats! You just created your first commit!!!

Remote Repo Setup

Now that we have commited our changes to our local repo, let's set up a remote repository on Github where we can safely store and share our code. If you don't have a Github account, create one.

Once you are logged in, navigate to the 'Repositories' tab on your profile and click the big green 'New' button.

Create a new repository and name it the same thing you named your local project directory. Don't add a .gitignore or README.md since we already did that in our local repo. The rest of your repo settings should resemble the image below:

Now that you have created your new Github repo, we need to add it as a remote to our local repo. To do this run the following command (replacing the text in all caps with your info) in your Terminal:

git remote add origin [email protected]:YOURGITHUBUSERNAME/YOUR-PROJECT-NAME.git

Then set the upstream branch so Git knows where to push our code.

git push --set-upstream origin master

Note: You should only need to run that full command once. Next time you want to push your code to your remote repo's master branch, you can just run git push.

Now go back to your remote repo page on Github and refresh. You should see your .gitignore and README.md files. Awesome job!!!

Keep it going

Now you know the basic flow for adding, committing, and pushing changes from your local Git repo to your remot Git repo on Github. Just repeat these steps for any future changes you make. :)

If you run into any problems while running through this tutorial, leave a comment (coming soon!) and I'll be happy to help out as soon as I can! Happy coding!