Exercise Monday

We have our project directory created and our Git repository initialized. Now, we can create the HTML file that will say hello to the world. Let's make an empty file at the command line in our project directory:

$ touch hello-world.html

Now, let's open our project directory in Atom so that we can add some content to our empty HTML file.

$ atom .

Here is our project directory in Atom with the empty file open.

Project directory screenshot

In the coming lessons, we are going to learn all about HTML but for now, copy and paste this text into your hello-world.html file in Atom:

hello-world/hello-world.html
<h1> Hello World </h1>
<h2> A program to greet the planet. </h2>

<p>This page is an attempt to greet everyone on Earth using our various human languages.  We're interested to see how long our list can become.  </p>

<p>We'll start with languages that the Epicodus staff could offer without using Google. </p>

<ul>
  <li> English: Hello, world! </li>
  <li> Spanish:  Hola, mundo! </li>
  <li> Japanese: Konnichiwa, sekai! </li>
  <li> French: Bonjour, monde! </li>
  <li> Kinyarwanda: Mwirwe, isi! </li>
</ul>

We save our file in Atom and see the blue circle on the hello_world tab turn from a circle to an x. If we aren't sure if our changes have been saved, this is the indicator we can use to double check. No blue circle, changes saved.

We can view our HTML in the web browser by going to our Desktop GUI folder and double-clicking on hello-world.html.

Hello world

Git tracking

Now, let's see what Git has done with our changes by running the command git status:

$ git status
On branch master

Initial commit

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

    hello-world.html

nothing added to commit but untracked files present (use "git add" to track)

When we ask for the status, Git lets us know that there has been a new file added to our project directory but it is not being tracked because we haven't yet added it to the files for Git to track. Let's do this now using the command Git tells us to use: git add.

$ git add hello-world.html

Now when we run git status, we see that adding our new file told Git that these are changes to start tracking. Git lets us know we have a new file that exists, but has not been committed.

Initial commit

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

    new file:   hello-world.html

Making Git commits

A commit in Git is a way of saving changes to the permanent history of our project. Right now, our file is saved on our hard drive but it has not been committed to the historical log of the Hello World website. When we make a commit, it is a snapshot of our work exactly as it exists at that moment. Let's commit our work now to the project history

The command is $ git commit when working solo, or on a Windows machine:

$ git-pair-commit -m "add initial HTML file with 5 languages saying hello"
> git commit -m "add initial HTML file with 5 languages saying hello"

We use the git-pair-commit or git commit command, followed by a succinct but descriptive message in " "after the -m. For consistency, the message should complete the sentence, "This commit will…". So, when looking at our commit we know that this commit will "add initial HTML file with 5 languages saying hello".

Let's look at our Git history now using the git log command:

$ git log

commit a9bf57dee7fb18b36900fd6f7b67bf12c84426ba
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Tue Feb 23 11:29:00 2016 -0800

    add initial HTML file with 5 languages saying hello

Our initial commit has been assigned a unique identifier of numbers and letters, a9bf57dee7fb18b36900fd6f7b67bf12c84426ba. Forever more, if we want to see our HTML file as it exists right now, we can return to this unique commit.

A couple of staff members just shared additional entries for our list! Let's updates to our HTML file to include them (again, simply copy and paste this HTML for now):

hello-world/hello-world.html
<h1> Hello World </h1>
<h2> A program to greet the planet. </h2>

<p>This page is an attempt to greet everyone on Earth using our various human languages.  We're interested to see how long our list can become.  <p>

<p>We'll start with languages that the Epicodus staff could offer without using Google. </p>

<ul>
  <li> English: Hello, world! </li>
  <li> Spanish:  Hola, mundo! </li>
  <li> Japanese: Konnichiwa, sekai! </li>
  <li> French: Bonjour, monde! </li>
  <li> Kinyarwanda: Mwirwe, isi! </li>
  <li> German: Guten tag, Welt! </li>
  <li> Pig Latin: ello-hay, orld-way! </li>
</ul>

After we save our updates in Atom, let's look at what our git status displays:

On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   hello-world.html

no changes added to commit (use "git add" and/or "git commit -a")

It shows us that the hello-world.html file has been modified. If we would like to commit these changes to our project history, we can add and commit them now.

So, how do we know when we should make a commit? As a new developer, this is not an easy question to answer. The phrase that many developers use to describe a good commit is a "logically separate change set". For us in this first week, we'll make commits after we complete a task we've set for ourselves like completing a new file or adding a new element we're trying for the first time. We will only commit when our code works as we expect it to. If it is not working or not working as intended, we need to make the necessary fixes before committing.

As you practice using Git, your own sense of when to commit will evolve as your coding becomes more and more advanced.

Since we added a couple of additional lines to our HTML and are going to stop working on this code for a while, let's go ahead and add our file and commit our changes.

$ git add hello-world.html
$ git-pair-commit -m "add German and Pig Latin hellos"

Here is our project's history now:

$ git log

commit f7f936dea9c170288f96a48d7fe3dc6601b4407f
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Tue Feb 23 12:16:21 2016 -0800

    add German and Pig Latin hellos

commit a9bf57dee7fb18b36900fd6f7b67bf12c84426ba
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Tue Feb 23 11:29:00 2016 -0800

    add initial HTML file with 5 languages saying hello

As our project grows, we will be able to run git log to see how it has evolved from the beginning to its current state by reading each of our commit messages. The log also tells us the dates and authors of the code that was committed.

This may seem like more details than we want for a simple Hello World website but as we go you will see how using Git will make working on more complex tasks or in collaboration with a bigger team incredibly powerful for keeping code organized with each other and over time.

Let's take a final look at our website to see our changes.

Hello world

Hurray! Hello, World!

Pair Commit Workflow


Add file(s) to track in Git

In terminal:

$ git add hello-world.html

or if multiple files should be added the . can be used to add all files:

$ git add .

Commit

In terminal:

$ git-pair-commit -m "add a short, descriptive present tense commit message here describing the changes made"

Note: for solo work, the commit command is git commit instead of git-pair-commit.

Git Commands


In this reference, examples in brackets [xxx], should be entirely replaced by what is indicated (do not leave brackets).

Set up configurations

  • git config --global user.name "[name]"- sets a SINGLE user name for all commits.

  • git config --global user.email "[email address]" - sets a SINGLE email for all commits.

  • git pair [initials 1] [initials 2] - using the initials from the .pairs file in the home directory, sets the user names and emails of PAIRS on a project.

Committing

  • git add .: Adds ALL files with changes to be committed.

  • git add [file]: Adds the named file to be committed.

  • git-pair-commit -m "[message]": FOR PAIRS records all of the added files/changes permanently to the version history; message should describe the changes finishing the phrase "This commit will…".

  • git commit -m "[message]": FOR SOLO WORK records all of the staged files permanently to the version history; message should describe the changes finishing the phrase "This commit will…".

  • Example: git commit -m "add AJAX functionality to the comments form"

Reviewing Git Information

  • git log: Lists commit history for the current branch.

  • git status: Lists the files where changes have been made to be committed.

  • git about: Lists the information about the currently assigned pair's names.