5 Local History

You will create a folder on your computer, initialize a git repository, add an HTML file, and start committing changes.

5.1 Create a folder and initialize a git repository

Create an empty folder named githubPage in your preferred directory (where you want your projects to be stored, maybe document/1a/info/)

Note

Avoid using spaces in your folder names, it will make your life easier when working with the command line.

Initialize a git repository in that folder

In the SmartGit menu:
- Repository > Add or Create
- Select the folder you created
In the terminal: git init in the folder you created

5.2 Edit your files

Git is not a text editor, you will need to use a text editor to create and modify your files. You can use any text editor you like, but we recommend using Visual Studio Code.

Note

While Visual Studio Code can be used to edit individual files a Integrated development environment (IDE) like VScode really shine when you view the full project structure.

Open Visual Studio Code (from the window menu) and open the folder you created. - File > Open Folder - Select the folder you created

Create a new index.html file. Save the Empty file (Ctrl + S) in the folder you created.

You can see the file : 1. in the file explorer on the left side of the window. 2. Look in the Windows file explorer that the file is indeed created 3. Look into SmartGit that you can “working tree/Index” is now “changed”

5.3 Your first commit

Stage the newly created file index.html
Commit the staged modification, give this commit a meaningful comment ( e.g. feat: Add and index.html )

Tip

Meaningful comments are important, they will help you and the other understand what you did in the future. We recommand that you follow the conventional Commits formats for your commit messages.

<type>[optional scope]: <description>

[optional body]

examples:

```
feat: add a new section to the page
```

fix: correct the url of the profile picture img

build: integrate the modification from William into the project

William has added a new section to the page, I have integrated it into the project

Note

Here are the most common types of commits you will use in this project:

feat: A new feature (you add a new page to you website, a new section to your page, an image, etc.)
docs: Documentation only changes (you add a README.md, a LICENSE file, etc to the project but the website itself is not modified)
fix: A bug fix. (you fix a typo, a broken link, a wrong id or class, etc.)
build: You merge a branch
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature (rename all the class in your project, change the structure of your project, etc.)

other types of commits you will use in later project:

perf: A code change that improves performance
test: Adding missing or correcting existing tests
ci: Changes to CI configuration files and scripts (example scopes: GitLabCI)

5.4 Linear History

You will learn to make changes and commit them regularly. Commits will follow one another in a linear way.

5.4.1 Create the webpage

Add a basic HTML skeleton to the index.html file

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title> </title>
  </head>
  <body></body>
</html>

Listing 5.1: Skeleton HTML code

Save the file

Important

It is very important that all your files are saved before you interact with git/smartgit. Git only tracks the files that are saved on your computer. Later on in the collaboration, when pulling changes from the remote repository, you will not see the change in VS code if the file is not saved.

Stage and commit this last modification

flowchart BT
   Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
   A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)

Figure 5.1: The commit graph of the project after adding the basic HTML skeleton

5.4.2 Linear History: Add some content and commit regularly

Add some content about you (Personal Info like name, age, class, and a photo if you want - Formation - Professional Experience - Other things about you like your hobbies for example)
Stage and Commit regularly (every commit should have a meaningful name)
Repeat until you have something similar to (it would ideally have more commits):

flowchart BT
  Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
  A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
  B --> C(feat: add Personal Info)
  C --> D(feat: add Formation)
  D --> E(feat: add Experience)
  E --> F(feat: add Miscellanous)

Figure 5.2: Linear history of the project after adding some content

5.5 Nonlinear History

5.5.1 Branch and fast forward

flowchart LR
  subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
  %% F --> G(Empty CSS)
  %% G --> H(Basic CSS)
  end
  subgraph branches
      main>Main*] ==> F
      %% css>CSS] ==> H
  end

class main HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.3: Commit graph with the main branch, the star indicate the HEAD

Create a branch named “CSS”
Checkout that branch (Double-click on “CSS” branch in the “Branches view” and confirm the Check Out dialog that comes up)

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    %% F --> G(Empty CSS)
    %% G --> H(Basic CSS)
    end
    subgraph branches
        main>Main*] ==> F
        css>CSS] ==> F
   end

class css HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.4: Commit graph with two branches main and css pointing the same commit

Add a CSS file and commit ( feat: Add a CSS page for style )
Add some CSS and commit

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    F --> G(build: Create Empty CSS)
    G --> H(feat: add basic CSS)
    end
    subgraph branches
        main>Main*] ==> F
        css>CSS] ==> F
   end

class css HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.5: CSS branch is two commits in advance

Checkout the main/main branch (Double-click on the main branch in the “Branches view” and confirm the Check Out dialog that comes up)
Merge the modifications from CSS into main
Include your CSS into your HTML
Commit new index.html

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    F --> G(build: Create Empty CSS)
    G --> H(feat: add basic CSS)
    end
    subgraph branches
        main>Main*] ==> H
        css>CSS] ==> H
   end

class main HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.6: Css was ahead from main it should result in a fastforward

5.5.2 Branch and merge commit

This time we will make a modification in the css branch, go back to the main branch and make modification and commiting them, simulating that both branches evolved (either you were working on a side project or you were working on a feature that was not ready to be merged yet and got back on the main branch to fix an issue, or simulating collaboration with another person). We will then merge the css branch into the main branch.

Modification in the feature branch:

Check out CSS branch
Modify your stylesheet (i.e. your CSS file)

h1 {
  font-size: 70px;
  color: green;
}

Commit

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    F --> G(build: Create Empty CSS)
    G --> H(feat: add basic CSS)
    H --> I(feat: color the title in green)

    end
    subgraph branches
        main>Main*] ==> H
        css>CSS] ==> I
   end

class css HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.7: CSS branch is one commit in advance

Getting back to the main branch to make some modification:

Check out main branch
Modify your stylesheet (i.e. your CSS file)

p {
  color: red;
}

Commit

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    F --> G(build: create Empty CSS)
    G --> H(feat: add basic CSS)
    H --> I(feat: color the title in green)
    H --> J(feat: color the paragraph in red)

    end
    subgraph branches
        main>Main*] ==> J
        css>CSS] ==> I
   end

class main HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.8: Main branch and CSS branch evolved at the same time

Merging modification from CSS into main:

Merge the modification from CSS into main

flowchart LR
    subgraph commits
    direction BT 
    Init(56fa61<br>Initial commit) --> A(819ab1<br>feat: add an empty page<br>Just an empty index.html)
    A --> B(c0f3ee<br>feat: add Skeleton<br>Added some basic html structure to the html document)
    B --> C(feat: add Personal Info)
    C --> D(feat: add Formation)
    D --> E(feat: add Experience)
    E --> F(feat: add Miscellanous)
    F --> G(build: Create Empty CSS)
    G --> H(feat: add basic CSS)
    H --> I(feat: color the title in green)
    H --> J(feat: color the paragraph in red)
    I --> K(feat: Create a new CSS)
    J --> K

    end
    subgraph branches
        main>Main*] ==> K
        css>CSS] ==> K
   end

class main HEAD;
classDef HEAD font-weight:bolder,fill:#fdf

Figure 5.9: Result of a 3-way merge