Skip to content

Instantly share code, notes, and snippets.

@jnewman12
Last active December 15, 2016 17:39
Show Gist options
  • Save jnewman12/cfc784bb28dd724e52ea8a5b1909a97d to your computer and use it in GitHub Desktop.
Save jnewman12/cfc784bb28dd724e52ea8a5b1909a97d to your computer and use it in GitHub Desktop.
Slides for git branching and github pages

Branching with Git & Github Pages


SWBAT

  • create, read, update, destroy, and change branches
  • explain why we use different branches
  • explain what feature branches are
  • deploy a github pages website, and push to it with changes

Git Branching

  • Git branches are an integral part of your everyday workflow.
  • A branch represents an independent line of development.
  • Branches serve as an abstraction for the edit/stage/commit process, and are used to keep track of your progress on a project

CRUD Branches

  • The git branch command lets you create, list, rename, and delete branches.
  • git branch is tightly integrated with the git checkout and git merge commands

Doing stuff with branches


git branch

  • List all of the branches in your repository

git branch <branch>

  • create a new branch named <branch>
  • this does not let you go right into it

git checkout -b <branch>

  • creates a new branch named <branch>
  • allows you to go right into the branch

git branch -d <branch>

  • deletes the specified branch.
  • This is a “safe” operation that Git prevents you from deleting the branch if it has unmerged changes

git branch -D <branch>

  • to successfully delete a git branch with unmerged changes, run git branch -D <branch>
  • this will force delete the specified branch, even if it has unmerged changes.
  • This is the command to use if you want to permanently throw away all of the commits associated with a particular line of development.

git branch -m <branch>

  • renames the current branch to <branch>.
  • allows you to quickly rename the entire branch

dev flow


  • this above picture visualizes a repository with two isolated lines of development, one for a little feature, and one for a longer-running feature
  • By developing them in branches, it’s not only possible to work on both of them in parallel, but it also keeps the main master branch free from questionable code

Creating branches

  • It's important to understand that branches are just pointers to commits.
  • if you start with a branch that looks like: example

  • Then you create a branch with the following command: git branch crazy-experiment
  • The repository history remains unchanged. All you get is a new pointer to the current commit: finish example

  • But, this only creates the new branch.
  • To start adding commits to it, you need to select it with git checkout, and then use the standard git add and git commit commands.

Deleting Branches

  • Once you’ve finished working on a branch and have merged it into the main code base, you’re free to delete the branch without losing any history:
  • git branch -d crazy-experiment
  • However, if the branch hasn’t been merged, the above command will output an error message:
  • error: The branch 'crazy-experiment' is not fully merged. If you are sure you want to delete it, run 'git branch -D crazy-experiment'.

Force delete

  • if you do not care about the commits on this branch, you can always force it
  • git branch -D crazy-experiment
  • This deletes the branch regardless of its status and without warnings, so use it cautiously.

The Checkout

  • The git checkout command lets you navigate between the branches created by git branch.
  • Think of it as a way to select which line of development you’re working on.

Using checkout

  • git checkout <existing-branch>
  • this will check out the specified branch, which should have already been created with git branch.
  • This makes <existing-branch> the current branch, and updates the working directory to match.

Checkout continued

  • running git checkout -b <new-branch> creates and checks out <new-branch>
  • The -b option is a convenience flag that tells Git to run git branch <new-branch> before running git checkout <new-branch>.

  • git checkout works hand-in-hand with git branch.
  • When you want to start a new feature, you create a branch with git branch, then check it out with git checkout.
  • You can work on multiple features in a single repository by switching between them with git checkout.

example 1


example 2


Git Merge

  • Merging is Git's way of putting a forked history back together again.
  • The git merge command lets you take the independent lines of development created by git branch and integrate them into a single branch.
  • Once you’ve finished developing a feature in an isolated branch, it's important to be able to get it back into the main code base.

Using git merge

  • git merge <branch>
  • a merge allows you to take a feature branch, and merge it to master for production
  • a typical flow might look like this

  • on feature branch, <new_branch>
  • git add .
  • git commit -m "awesome commit"
  • git checkout master
  • git merge new_branch
  • git push

Github Pages

  • GitHub Pages are public webpages hosted for free through GitHub.
  • GitHub users can create and host both personal websites (one allowed per user) and websites related to specific GitHub projects.
  • Github Pages lets you do the same things as GitHub, but if the repository is named a certain way and files inside it are HTML or Markdown, you can view the file like any other website.
  • GitHub Pages also comes with a powerful static site generator called Jekyll

Make a new github pages site

  • go to your github account
  • once on github, navigate to https://github.com/new
  • once there, make a new repo and name the repo your_username.github.io
  • add a README.md file and click create

Adding a file

  • let's add an index file
  • go to your new repo and find the create new file button and click on it
  • at the top, name the file index.html and add some mark up
  • once your done, scroll to the bottom and press commit new file

Adding a new folder

  • let's add some css to this
  • first, run git clone https://github.com/username/username.github.io.git to get this on your machine
  • then cd to your folder, and open your folder in sublime using subl .
  • go to the top of sublime, and make a new folder called css. inside css, add a stylesheet and link it to your html
  • start styling your page!
  • once you're done: add, commit, and push

Your turn

  • with you and your pair, add a javascript folder and console.log "hi" to your console
  • then add any javascript (or jQuery) you want!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment