Introduction to Git & Github

Try Git | Markdown Cheatsheet | Pro Git | Git Config

Getting Started
In the terminal start by creating a new directory, then run git init to initialize a git repository

mkdir my_new_directory
ck my_new_directory
git init

Now that we have initialized a git repo, we can add files, and make edits, while trackin changes along the way. We can also revert back to previous 'commits' and merge branches. We'll go into detail about these terms mean and do shortly.

For this example, let's create a static website with a couple of pages, stylesheets, javascripts, and maybe even some fonts.

Tracking Changes
Create a file called index from the command line, then check its git status.

touch index.html  
git status

You should notice that index.html is in 'untracked files'. In order to add this file to be tracked, we can run git add index.html. If you have changed several files and want to add them all, you can add all files with git add .

When we add files, we say they are staged or have been added to the staging area. Add the index to the staging area and check the status again.

git add index.html
git status

You should now see that index.html a change to be committed. So far, we have initialized a git repository, created a file, and added it to be staged. We can now 'commit' to make a saved point we can revert back to later, if we wish. When we create a git commit, we should give it a message (preferably a meaningful message).

git commit -m "Add index file for site homepage"

Now if we try git status we can see there is nothing to commit. Try git log to see a log of the commits in this repo. This is useful for git commands such as revert, reset, and checkout.

Build Out the Site
Open up index.html in your favorite editor (sublime, etc.), and fill in some valid HTML.
note: Open the file with Chrome from the command line, using open -a "google chrome" index.html

Here, I've added a link to a stylesheet. I've also omitted some optional tags; feel free to include them, if it's more comfortable.

<!DOCTYPE html>

<meta charset="UTF-8">

<title>Drew's Site</title>

<link rel="stylesheet" src="assets/stylesheets/styles.css">

<h1>Drew's Site</h1>

<p>This is my site, yo!

After saving, run git status and see the changes made are not yet staged for commit. git add . will add all changes to the staging area. Commit changes that have been added to the staging area, then check the status and the logs.

git commit -m "Add content to homepage"
git status
git log

Branches
When we want to make changes, rather than make them on the main working copy (master), we can create a new branch. It's a good idea to create a new branch, make some changes, merge the changes into master, then delete the branch, rather than continue working on a branch that you have already merged. Remember to commit often. This will make much more sense as it sinks in, and we will cover it in depth shortly.

git branch will display the local branches, with an asterisk on the current branch.

Create a new branch called my_styles

git branch my_styles  
git checkout my_styles

Note:these two steps can be accomplished in one command, git checkout -b my_styles

Make a directory called assets that contains a styles directory. Then create a styles.css file inside the styles directory.

mkdir assets  
mkdir assets/stylesheets
touch assets/stylesheets/styles.css

Open the styles.css in your preferred editor, and add some styles for your page.

body {
  color: #888;
}

h1 {
  color: #cee;
  text-shadow: 2px 2px #444;
}

Add all the files to the staging area, check git status, and make a commit.

git add .
git status
git commit -m "Add stylesheet and assets directories"

You should now have 3 commits in your git log, and be starting to get comfortable with adding files and making commits.

Merging Branches

ogryzek/git_and_github.md

Introduction to Git & Github