6

6Git & Brackets a worked example

6.4

Adding another commit

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 -->
    <head>                           <!-- Start of head section -->
        <meta charset="utf-8">       <!-- Use Unicode character set  -->

<link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">

        <title>PracticalSeries: Git Lab</title>   
    </head>

    <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.

Figure 6.34 - Modified and staged index.html

Figure 6.34   Modified and staged index.html

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

Index.html modified, proofreading correction.

It looks like this:

Figure 6.35 - Commit dialogue box

Figure 6.35   Commit dialogue box

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.

Figure 6.36 - Second commit in history

Figure 6.36   Second commit in history

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

Figure 6.37 - Second commit information

Figure 6.37   Second commit information

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

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

Figure 6.38 - Tag dialogue box

Figure 6.38   Tag dialogue box

Giving us this:

Figure 6.39 - Commits with tags

Figure 6.39   Commits with tags

And we now have this workflow:

Figure 6.40 - Workflow with two commits

Figure 6.40   Workflow with two commits

6.4.1

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 tag icon button. The result depends on which file is selected in the file tree at the left hand side. I have this:

Figure 6.41 - index.html in file history

Figure 6.41   index.html in file history

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.

Figure 6.42 - README.md in file history

Figure 6.42   README.md in file history

6.4.2

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.

Figure 6.43 - index.html at the first commit point

Figure 6.43   index.html at the first commit point

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).



End flourish image