Product Design Lessons

Intro to Foundation  |   Lesson #34

Use Git to Share Your Work

Learn to clone, pull, commit and push your changes to and from GitHub.

We love Git as a collaboration tool — among ourselves and with the public. Git lets us share code and see how other people riff on our products.

We also know that Git can intimidate people not accustomed to using a command line, so here's how to share your work on GitHub.

illustration of a loop process

First, a few important terms:

  • GitHub: A service through which people share code. GitHub, the service, uses git, the technology.
  • Repository: A project on GitHub, including past versions and different, often experimental, variations.

When working with Git, you'll need to perform certain actions:

  • Cloning: The process of copying a project to your computer for the first time.
  • Committing: Creating a batch of changes on your computer to send back to a GitHub repository.
  • Pushing: The act of sending committed changes from your computer to a GitHub repository.
  • Pulling: The act of receiving other people's changes to a project you have already cloned.

We'll go over these actions next.

1. The first time you get started with a project, you must clone it to your system.

Type "git clone URL" where "URL" is a link to a Git repository. For example, "git clone https://github.com/zurb/foundation" will download the latest copy of Foundation. Git will create a new folder in which to put the new files, so don't worry about adding a lot of clutter to your folders.

You only need to do this step once per project.

 

Above: Use a repository's URL, located in the right-hand column, to clone. You'll need a free GitHub account to do this.

 

2. Make changes to the code.

Use any code editor to edit the code as you normally would. We’re fans of Sublime Text and Coda in particular, and usually keep projects in a specific ~/Sites folders on our Macs.

3. Staging your files for a commit.

A "commit" is a group of pulled files on your computer that have been changed. They're kept in a staging area, ready to be pushed later.

Type "git add -A" to add all recent changes to a commit, or type "git add (filename)" to add a specific file.

 

Above: Files you've edited get committed to a queue.

When you have one or more files in a commit, type git commit -m "Comments"

Edit "comments" to describe what the committed files will do if someone pulls them into their project. Best practice is to use complete thoughts and present tense, such as, "Fix bugs in the contact form", not "Fixed bugs."

4. Push your commit to GitHub

 

Sending your committed files to GitHub is called a “push.” The command is, appropriately, “git push”.

5. Pull down the latest changes.

This brings other people's changes to your GitHub repository. Even if you're the only person working on a project, pulling is a good habit to practice.

Type "git pull" to receive the latest version of the project.

The process in a nut

Using clone, pull, add, commit and push, you'll be able to share your changes to a digital product with the world.

  1. Git clone (only once)
  2. Git pull (get the latest changes)
  3. Git add (mark your files for a commit)
  4. Git commit (set files into a queue on your computer)
  5. Git push (send committed files to a repository)
  6. Git pull (repeat)

Don't worry about making mistakes: You can practice this online at http://try.github.io/levels/1/challenges/1 and http://gitimmersion.com. Then grab a copy of Foundation and learn to take advantage of the repository in our Advanced Foundation class.


About the instructor

Ben

Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.