6

6Git & Brackets a worked example

6.4

Before we look at branches, I want to make some small modifications to index.html and add it as another commit. Just so we’ve got two commit points to look at. This again is following the previous example in section 2.2.

Modify index.html, remove the second paragraph by deleting lines 21 and 22 from the original file (the original files is shown in code 6.3:

index.html
<html lang="en">                     <!-- Declare language -->
<meta charset="utf-8">       <!-- Use Unicode character set  -->

<title>PracticalSeries: Git Lab</title>

<body>
<h1>A Practical Series Website</h1>

<figure class="cover-fig">
<img src="11-resources/02-images/logo.png" alt="cover logo">
</figure>

<h3>A note by the author</h3>

<p>This is my second Practical Series publication—this one happened by accident too. The first publication is all about building a website, you can see it here. This publication came about because I wanted some sort of version control mechanism for the first publication.</p>

</body>
</html>

 Code 6.5   Modification to index.html a

Save the file and it will show in the Git pane as modified.

Tick the box to stage the file.

Just one thing to note, there is a small red (pink?—I’m a man, not good with colours) bar showing in the index.html file. This shows where something has been deleted. A green bar shows where something has been added and a yellow bar (might be amber or orange) shows a line that has been modified.

Commit the change with the following commit message:

P01: First Publication

It looks like this:

This time (because there is only one file), the Commit dialogue box shows the changes to index.html. It shows what has been deleted (in pink, that’s definitely pink).

Click the history button to see the two commits.

This time the commit is [25c1410]. Clicking this commit shows the commit information screen:

Let’s also tag this new commit with the label P01.

Again click the tag icon in the Git pane . This opens the simple tag dialogue box:

Giving us this:

And we now have this workflow:

Viewing the file history

We used the commit history to see a full list of commits made within the project (§ 6.3.3 and above). Now not every commit affects every file; of the two commits in the project, only index.html is affected by both, all the other files were affected by just the first commit.

We can see this by using the file history. To demonstrate this open the file history in the Git pane by clicking the button. The result depends on which file is selected in the file tree at the left hand side. I have this:

The history shown is for the selected file in the file tree (the selected file is shown in blue), I’ve highlighted where the selection is in orange in Figure 6.41.

The index.html file is affected by two commits; if I select the README.md file I get Figure 6.42.

The README.md file is only associated with one commit, the first one.

Clicking the commit line opens the commit information screen in just the same way as the commit history.

Viewing the contents of a file at a previous commit

Go back to viewing the file history for the index.html file (Figure 6.41) and click on the first commit [8ce2e8e]. This will open the commit information for index.html at that first commit, it looks like Figure 6.43.

This is showing index.html as it was at the first commit, you can see the lines we deleted are still there (I’ve highlighted them in orange).