Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Staging Changed Files

3:50 with Jay McGavren

You know how to commit new files, now let's look at committing changes to existing files. (Hint: the process is nearly identical.)

We've committed our first version of medals.html to our repository. But medals.html doesn't include a link to bronze.html right now, so users of the site will have no way to find that page. We'll need to edit medals.html to add that link, and commit those changes as well.

Add the following code to medals.html:

  <div>
    <a href="bronze.html">Bronze medals</a>
  </div>
  • Be sure to save your changes after editing the file.
  • Don't worry if you don't understand all that. If you want, you can learn more about HTML in this course.

Now, we need to commit our changes to the file.

  • We've modified the medals.html file. Let's see what its status is, with the git status command: git status
  • There's a new section, "Changes not staged for commit". This is where changes to tracked files will appear.
  • Our medals.html file is in that section, listed as "modified".
$ git status
# 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:   medals.html
#
no changes added to commit (use "git add" and/or "git commit -a")
  • We can see a helpful message in the output telling us what to do next: 'use "git add ..." to update what will be committed'.
  • So, let's run the command git add medals.html.
  • git add doesn't just add untracked files to the staging area. It also stages the changes within tracked files.
  • If we run git status again, we'll see the modified medals.html is now listed under the "Changes to be committed" section. We've staged the changes to be committed.
$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   medals.html
#
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        bronze.html
  • But we can also see that bronze.html, the file our change refers to, is down in the "Untracked files" section.
  • So, as the helpful message in the "Untracked files" section says, we'll run git add to add bronze.html to the staging area: git add bronze.html
  • Let's run git status again:
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   medals.html
#       new file:   bronze.html
  • Now both files are in the "Changes to be committed" section, medals.html as "modified" and bronze.html as a "new file".
  • Now we can commit them both at once: git commit -m "Add bronze medals"
  • Now that the commit is complete, we can run git status...
  • And it will show us that we have no modified files, and no untracked files.
  • It says the working directory is "clean", meaning it doesn't have any changes that aren't also in the Git repository. Everything is committed!
$ git status
# On branch master
nothing to commit, working directory clean
  • 0:00

    We've committed our first version of medals.html to our repository.

  • 0:04

    But medals.html doesn't include a link to bronze.html right now.

  • 0:09

    So users of that site will have no way to find that page.

  • 0:12

    We'll need to edit medals.html to add that link and commit those changes as well.

  • 0:17

    So here in our workspace I'll show the sidebar, and

  • 0:21

    I'll open the metals.html file.

  • 0:24

    Then I'll paste in some HTML code that I've prepared.

  • 0:30

    We'll add a division element here in the document body to hold our link.

  • 0:34

    Within that division element,

  • 0:36

    we'll add an anchor element, which refers to the bronze.html file.

  • 0:40

    We'll give the anchor some text, Bronze medals.

  • 0:44

    Be sure to save your changes after editing the file.

  • 0:47

    Don't worry if you don't understand all that HDML code,

  • 0:50

    we'll have more info about it in the teacher's notes if you want it.

  • 0:53

    Now we need to commit our changes to the file.

  • 0:56

    Let me hide the side bar again, and

  • 0:59

    then I'll click down in the console to activate it.

  • 1:02

    We've modified the medals.html file.

  • 1:05

    Let's see what its status is with the git status command.

  • 1:09

    There's a new section here, changes not staged for commit.

  • 1:13

    This is where changes to tracked files will appear.

  • 1:16

    Our medals.html file is in that section listed as modified.

  • 1:21

    Remember this is one of our three possible states for files in git.

  • 1:25

    Next we need to stage this file and then commit it.

  • 1:29

    We can see a helpful message in the output telling us what to do next.

  • 1:32

    Use *git add to update what will be committed.

  • 1:36

    So let's run the command git add medals.html.

  • 1:41

    Git ad doesn't just add untracked files to the staging area,

  • 1:45

    it also stages the changes within tracked files.

  • 1:48

    If we run git status again, we'll see the modified

  • 1:51

    medals.html is now listed under the changes to be committed section.

  • 1:57

    We've staged the changes to be committed, but we can also see that bronze.html,

  • 2:02

    the file our change refers to, is down in the untracked files section.

  • 2:07

    So we can't really consider this change complete.

  • 2:09

    If we commit right now, we'll have a version of metals.html that links to

  • 2:14

    bronze.html, but we haven't actually added bronze.html to the git repository yet.

  • 2:20

    If someone copied this repo and

  • 2:22

    checked out this commit, they wouldn't get a copy of the bronze.html file.

  • 2:26

    They'd have a medal.html file that links to a nonexistent bronze.html file.

  • 2:32

    It's because of situations like this that Git allows us to make multiple files part

  • 2:37

    of the same commit.

  • 2:38

    All we need to do is add bronze.html to the staging area first.

  • 2:43

    Then when we commit, both the new links in medals.html and

  • 2:46

    the bronze.html file itself will be committed at the same time.

  • 2:51

    So as the helpful message in the untracked files section says,

  • 2:54

    we'll run git add to add bronze.html to the staging area.

  • 3:02

    Let's run git status again.

  • 3:04

    Now both files are in the changes to be committed section.

  • 3:07

    Medals.html is modified.

  • 3:12

    And bronze.html as a new file.

  • 3:15

    Now we can commit them both at once, git commit -m "Add bronze medals".

  • 3:26

    Now that the commit is complete, we can run git status again.

  • 3:30

    And it will show us that we have no modified files and no untracked files.

  • 3:34

    It says the working directory is clean, meaning it doesn't have

  • 3:38

    any changes that aren't also in the git repository, everything is committed.

  • 3:42

    We modified our files, staged them, and committed them.

  • 3:46

    The files have passed through all three states that a file can be in with git.

You need to sign up for Treehouse in order to download course files.

Sign up