Changes, Staging & Commits

After every set of changes you make it is good practice to save them as a commit, this updates the changes to your repository.

Changes

You will see when you make a change the source control icon Github source control iconwill be highlighted with a blue circle that has a number inside, this refers to the number of files you have just made changes in.

Click the icon and a message box should appear with the list of files you have just changed below it under the title "Changes".

We now have two options available either commit all the changes in one go which github.dev Web Editor will do by default if we do not stage our files. Or Stage our individual files so you have a clearer timeline of changes in your repository.

Staging

Staging is when we select each changed file individually or group select changed files and commit them together, for example you may have more than one webpage and you make the same change on more than one of them. This will be useful when we get to the "Next Build Steps" section.

To stage a changed file we need to hover over the item in the "Changes" list, a set of icons will appear, you then need to click on the + Staged Changes icon.

The chosen file will now move above the "Changes" list to a new list titled "Staged Changes".

Commit

After you have selected all the files for this commit write a small message in the box e.g "Changed head section details" or "added page title" make sure you choose something that will make sense to the future you, just in case you need to come back and check your changes at any point.

You then click the blue Commit & Push button or the tick above the box.

Remember Staging & Committing changes regularly in GitHub is good practice as it helps keep a continual timeline of your changes and why you made them, so you can refer back if necessary at any point.

rubber duck icon

Don't worry though we will remind you at the end of each step look out for these reminders!

FAQ quacking rubber duck

Gutter indicators When making changes VS Code adds helpful annotations in the gutter. But what do the different ones mean? Find out how on our FAQ's, Info & Tips page.

Page Last Edited: