Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie we're going to make another edit to the Explore California site, and that is that we're going to rename one of our HTML files. From the root of the web site if you go to the menu for Tours, you open that up, scroll down the first tour here, it's called Backpack Cal. It has a nice little graphics are called Backpack Cal. The learn more link will take you to information about it, Backpack Cal, but notice that the name of the file up here is tour_detail_backpack, and that's it. It doesn't say Backpack Cal. And I'm thinking that there maybe a lot of things that are tour_detail_backpack in the future. We could have lots of backpacking adventures.
We need to be more specific. So we're going to change this file name to be tour_detail_backpack_cal so that it matches what's on the rest of the page. So that's going to involve renaming the file and also changing some content on some of the pages where we have links to this file. The very common sort of task that one might do within an HTML web site. So from inside my project I could just rename this file. I could go into the operating system and rename the file, but I think it's better to do the rename from inside git so there's no changes to my working directory right now.
Let's do the rename git move, and it's going to be inside the tours directory and the tour_detail_backpack.html that's its current name. We're going to move it to tours/tour_ detail_backpack_cal.html. So that moved it. If we take a look here we see that it's moved. In the project it shows it's moved. If we were to go to it in the finder we'd see it was moved as well, and if we do git status, it now shows it in the staged items that the item has been renamed.
So now we need to track down all the link references to this HTML page. So we'll do that with a global search I'll look for everything that was _backpack.html _backpack.html. You see came up with three instances I'm going to click on those three instances so that they open up for me and those are the ones I'm going to change. So here's the first one backpack_cal, save it, and close it. This one is right backpack_cal, save it, close, and the last one save it and close it. So I made those three changes. If we do our global search for backpack. html we don't find any, and if we do a search for backpack_cal, we see that all three are there.
So now we've changed our working directory, git status. So our working directory has those three changes in it. Our staging index has the rename in it. Now I want to make sure that something is super clear to you, which is, that if we go right now without committing anything to our repository, if we go right now to Firefox, and we take a look at this let's go to the top-level Explore California, Tours here's the tour. The learn more link, notice where it's going to take me. You can see it at the very bottom of my screen, or I'll go ahead and go there, and you can see it up here. It takes me to backpack_cal.
It changed the link already. Just make sure that that super clear to you. Our working directory is what we're working with. So that's what we're looking at in the browser. The browser has nothing to do with what's in the repository or what's in staging directory. It's about what's on the file system. So that is our working directory as we change files we see them right away in the browser. So we change them we've look at them again, we see if they're right. If you're doing something besides web, if you're compiling code, you can compile your code to see if it runs, but once you've got exactly like you want you want, maybe you're restyling the page or something and everything looks just right, then we can come over to git and say, okay git, I've now got my working directory in a state that's ready to commit, I'm ready to commit it.
I just want to make sure that you realize that your working directory is what you're working with all the time. That's what you're seeing. What's happening in the staging and the repository are just for git to use, they're not something that you can work with from your browser or compile and any thing like that. You've to bring changes into your working directory in order be able to work with them. So now we're ready to make commits, let's go ahead and do git add, and let's add tours.html. So now it added tours to the list. We also want to add these two files that we made changes to.
They're both in the same directory, the tours directory. We can actually just say git add tours and then usually put the slash after it to make sure it knows it's a directory and everything that's inside of it, you also put the asterisk after it, which lets it know everything inside of is a wildcard, but you don't have to. Add everything in the tours directory to the staging area, git status. Let me clear my screen so you can see it better, and now we see those things there. Notice that we don't see separate entries for the rename that we did and for the changes that we've made from one file to other. Is it peculiar? I needed you to be aware of.
We made changes to the file detail_backpack, we've changed the URL in it. But git reports it to us as just being a rename, in this case. Let's say that we're about ready to do our commit and suddenly we get a phone call from the client and the client tells us that we've need to change something on the Contact page that on the account page there are all these contractions. So we want take out all those contractions. So let's switch over here while we've got the client on the phone, we go ahead and just make sure that we've got it all straight, and we say if you are on this page, we are guessing you have got something to say! Drop us a line.
If you are looking for our seasonal tours--take out that extra space--and (we do not publish these for everyone!), but we will be sure to throw in some cool discounts if you are currently on a tour. So there we've taken out all the contractions and turn them into--oops, I missed one here, let us know what you are thinking. So we've got them all now. I'm going to save that. We come back over here to git, git status. Now we've got this additional change here that we've made to the Contact page.
So we get off the phone with the client, we've now made the changes, and we're ready to deal with it in git. The best practice here is to deal with these as two separate commits. You wouldn't want to add contact into the commit that you are making about tours, because the one about tours is about something different, and we want to try and make our commits related to each other. There's no need for us to break those top three files down any further. They're all related, they are all one conceptual change that we're making at that time. But the conceptual change that we're making to contact is a different one.
So let's make them as two different commits. So we're going to say git commit -m and the first commit is going to be, "Renamed Backpack Cal file for clarity". And then right afterwards we will do git commit--and remember I told you the shortcut, git commit -a with an m after it--and then we'll say, "Removed contractions from contact page text", and now we've made that one git status.
Our working directory is clean, git log, and we can see both of our commits that we've made. Now it's very clear what each one of those commits is doing, the goal that each one is trying to achieve. It takes practice to learn how to group files together and to write good commits for them. But you'll get better at it over time.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97196 Viewers
61 Video lessons · 84482 Viewers
71 Video lessons · 68688 Viewers
56 Video lessons · 101172 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.