vixalien.tngl.sh
my website
1---
2title: Learn Git!
3description: Learn to use Git, a popular Distributed Control System to effectively collaborate and manage your software projects.
4publish_date: 2021-08-01
5tags: [tutorial, code]
6---
7
8So now you understand a certain programming language and coffee is your new best friend. But everywhere there is code, you see **Git**. They say a true developer must know Git and here you are, knowing nothing about Git, but longing to getting started.
9
10I have to admit, Git is as complex as it is popular. However, you don't need to know all the 160+ commands of Git to do daily operations. Here is a short but comprehensive tutorial that will teach you the most used features of this world-famous version control system.
11
12## What is a Version Control System?
13
14A Version Control System (VCS) is a system that track and manages changes to files. A project with a VCS is usually called a __repository__ or __repo__ for short.
15
16A VCS allows you to have multiple versions of a project. To visualize the need for a VCS, imagine you are working on a new feature in a project, and a bug that needs to be fixed immediately is reported. With a VCS, you can easily create a new version of your repository, fix the bug, then return to the previous version when you are done fixing the bug. You can also see the different changes you've made in your repository over time and can easily rollback when a change is undesired or introduced a bug. If you also modify your files or lose them, you can restore your repository to the last saved snapshot.
17
18## What is Git?
19
20**Git** is a version control system that manages a collection of files in a certain directory. Git is a _Distributed Version Control System._ This means Git does not rely on a central server to store all the versions of a project's files. Instead, every person "clones" a copy of a repository and get all the history and branches (more on that later) of the project. Although the original source code of a repository may be stored on a third-party hosting service like Github, any person can have their own copy of the project.
21
22Git was created by Linus Torvalds in 2005 for development of the Linux kernel, with other kernel developers contributing to its initial development.
23
24## Installation
25
26> **Note: You'll need to be able to work with the command line fluently before learning Git.** Even though there are Git GUIs, Git itself is a command line application. If you don't understand the arts of the command line yet, you can check [Tania's command line tutorial](https://www.taniarascia.com/how-to-use-the-command-line-for-apple-macos-and-linux/).
27
28You can download Git for macOS, Windows, Linux or build it from source from the [Official Git website](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).
29
30When you are finished installing, you can check if git is installed by running the following code in your Terminal (or Command Prompt for windows).
31
32```bash
33git --version
34```
35
36If you see a result like the following, you are good to go.
37
38```
39git version 2.30.2.windows.1
40```
41
42## Configuring Git
43
44After you install Git, you will have to set some configurations. These include your name and email and are used to mark changes that you introduce in a repository. That way, people can see changes you made and contact you easi;y.
45
46```bash
47git config --global user.name "Firstname Lastname"
48git config --global user.email username@email.com
49```
50
51The above commands tell Git your names and email. Remember to change `Firstname Lastname` and `username@email.com` to your own names and email respectively.
52
53You can type the following command to check the saved config:
54
55```bash
56git config --list
57```
58
59And you may get results similar to this:
60
61```
62color.ui=auto
63core.editor='C:\Program Files\Sublime Text 3\subl.exe' -w
64core.symlinks=true
65core.eol=lf
66user.email=username@email.com
67user.name=Firstname Lastname
68```
69
70## Git workflow
71
72Any git repository consists of 3 "trees" maintained by Git:
73
74- **Working Directory:** This is your folder with the actual files, the one you can see in File Explorer.
75- **Index:** This is a staging area where Git put files that you are going to commit soon. (i.e. changes that are going to be marked as a new version.) This is because there are certain files that you may want to mark as finished and won't change, while there are others you are still working on and don't want to be released in this version.
76- **HEAD:** This is a reference that points to the last commit you've made.
77
78So you _add_ files from the Working directory to the Index. As you work further, you can add more files to the Index or even remove (_restore_) files from the Index. When you are ready, you **commit** your changes. This will next generate a commit and a new HEAD that points to your last commit.
79
80## Working with repositories
81
82In this tutorial, we will need a new blank directory to learn Git and follow along. You can create a new folder anywhere to start experimenting with Git. I created mine at `D:\project`.
83
84### Initializing a Git repository
85
86By Initializing a Git repository, you convert an unversioned project to Git or as in our case, create a new empty repository. (Yep, you can now call your project a repository!) You will need to run the rest of the commands in the root of the project. You can type `cd` to see where you are now and check if it is indeed where you are planning to create a new repository.
87
88```bash
89git init
90```
91
92After initializing your git repository, you should see a message like: "Initialized empty Git repository in C:/project/.git/" to confirm that a new repo has been created successfully. Note that Git create a hidden folder called `.git` to store version and history data.
93
94### Tracking files
95
96You will now need to create two files at the root of your project folder: `index.html` and `style.css`. You can use your favorite text editor (I ❤ [Sublime Text](https://www.sublimetext.com/)) to save them to the root of your repository.
97
98#### Checking the status of a repository
99
100You can check the status of your local repository by using the `git status` command. You will use this command a lot while working with Git repositories.
101
102```bash
103git status
104```
105
106Output:
107
108```
109On branch main
110
111No commits yet
112
113Untracked files:
114 (use "git add <file>..." to include in what will be committed)
115 index.html
116 style.css
117
118nothing added to commit but untracked files present (use "git add" to track)
119```
120
121> **Note:** On some older versions of Git, the `main` branch may be called `master` by default, this is normal. To change the name of the master branch to main, run: `git checkout master` then `git branch -M main`
122
123#### Staging files
124
125The output above tells us that Git knows there are new files in the Working Directory but they are not tracked (They are not part of our Git repo; Git is not tracking changes to them, yet). We have to **stage** the files using the git `add` command.
126
127```bash
128git add .
129```
130
131Adding/Staging the files put them to Git's Index.
132
133> The `.` (or `*`) tells git to add EVERYTHING to the repo.
134>
135> You can also add a single file to the index at a time by using the `git add <filename>` syntax. `git add index.html` would add index.html only.
136>
137> You could also add a range of files using the `*` (wildcard character). `git add hello/*` would add all files in the hello folder.
138
139#### Committing changes
140
141Let's check the status again with `git status`.
142
143```
144On branch main
145
146No commits yet
147
148Changes to be committed:
149 (use "git rm --cached <file>..." to unstage)
150 new file: index.html
151 new file: style.css
152
153```
154
155We are now ready to commit the files (i.e. mark the changes we made a version).
156
157
158```bash
159git commit -m "Initial Commit"
160```
161
162Output:
163
164```
165[main (root-commit) 154dcd7] Initial Commit
166 2 files changed, 2 insertions(+)
167 create mode 100644 index.html
168 create mode 100644 style.css
169```
170
171While committing, the option `-m` can be used to provide a commit message, in this case "Initial Commit". You are encouraged to always provide a descriptive commit message that show a gist of the changes you've made.
172
173> If you don't provide a commit message, Git will use the default editor, set in the installation process on Windows or otherwise Vim, which could be weird for users who don't know to use Vim because it shows a strange screen where you can no longer enter any commands. To quit Vim, press <kbd>ESC</kbd> and type `:q!` followed by <kbd>ENTER</kbd>. You can [learn how to configure Git to use your favorite text editor](https://docs.github.com/en/get-started/getting-started-with-git/associating-text-editors-with-git).
174
175### Branches
176
177Branches are used to develop features isolated from each other. The `main` branch (or `master`, depending on the version of Git) is the "default" branch when you create a repository. Use other branches for development and merge them back to the main branch upon completion.
178
179#### Creating a new branch
180
181In this project, we will be creating a new branch to add javascript.
182You use the `git chekout -b <branch-name>` syntax to add a new branch.
183
184```bash
185git checkout -b javascript
186```
187
188```
189Switched to a new branch 'javascript'
190```
191
192#### Listing all branches
193
194You can use the `git branch` command to list all branches in the current repository.
195
196```bash
197git branch
198```
199
200```
201* javascript
202 main
203
204```
205
206The current branch is highlighted in green and an `asterisk` is shown before it's name.
207
208We can starting working on code in our new branch. Create a file called `script.js`. We can the use `git status` to view the state of our repo.
209
210```bash
211git status
212```
213
214```
215On branch javascript
216Untracked files:
217 (use "git add <file>..." to include in what will be committed)
218 script.js
219
220nothing added to commit but untracked files present (use "git add" to track)
221
222```
223
224Notice that the output shows that we're on branch `javascript` and that `script.js` is untracked. We will need to add it to the
225Index.
226
227```bash
228git add .
229```
230
231Then commit.
232
233```bash
234git commit -m "Add script"
235```
236
237```
238[javascript 355fad9] Add script
239 1 file changed, 1 insertion(+)
240 create mode 100644 script.js
241
242```
243
244### Reviewing and Merging
245
246When you are done implementing a feature in a branch, the only thing left is to **merge** it to the main branch. Merging is Git's way of taking a forked history (an independent line of that divergd from the current branch) and incorporating it the current branch. Merging allows you to "combine" different versions of code that diverged from a shared branch. We are going to merge code from the `javascript` branch back into the `main` branch.
247
248We'll need to go back to the main branch first.
249
250```bash
251git checkout main
252```
253
254#### git diff
255
256It is good practise to first review changes before merging or committing. You can use the `git diff` command (short for difference) to show changes between different revisions or paths. (You can use it to compare branches, commits and whatnots).
257
258If you provide only one argument, Git shows the changes in your working tree relative to the named reference. You can use HEAD to compare it to the latest commit, or a branch name to compare it to the tip of a different branch, which is what we'll do here.
259
260```bash
261git diff javascript
262```
263
264```
265diff --git a/script.js b/script.js
266new file mode 100644
267index 0000000..d7ac302
268--- /dev/null
269+++ b/script.js
270@@ -0,0 +1 @@
271
272```
273
274#### git merge
275
276After now reviewing the changes we are about to merge, it's time we merge the actual changes back into the main branch.
277
278```bash
279git merge javascript
280```
281
282```
283Updating 154dcd7..355fad9
284Fast-forward
285 script.js | 1 +
286 1 file changed, 1 insertion(+)
287 create mode 100644 script.js
288
289```
290
291After the branch is merged successfully, we can now delete the `javascript` branch because it is no longer needed.
292
293```bash
294git branch -d javascript
295```
296
297> Git tries to auto-merge changes. Unfortunately, this is not always possible and results in conflicts. You are responsible to merge those conflicts manually by editing the files shown by git. After changing, you need to mark them as merged with `git add <filename>` before merging changes.
298
299### Logging
300
301You can type `git log` see the repository's history and confirm that the branch has been merged.
302
303```
304commit 355fad97c2d442bb4a307385bfd6bac2198e825d (HEAD -> main)
305Author: Firstname Lastname <username@email.com>
306Date: Sun Aug 1 15:35:31 2021 +0200
307
308 Add script
309
310commit 154dcd7ce38589eb903346f6996e810401fa4910
311Author: Firstname Lastname <username@email.com>
312Date: Sun Aug 1 15:07:37 2021 +0200
313
314 Initial Commit
315
316```
317
318Because git feeds git log results to a pager, you may need to press `q` when the log is too long.
319
320You can add a lot of parameters to make the log look like what you want. Here are a few examples:
321
322- To see only the commits of a certain author:
323`git log --author=alice`
324- To see a very compressed log where each commit is one line:
325`git log --pretty=oneline`
326- Or maybe you want to see an ASCII art tree of all the branches, decorated with the names of tags and branches:
327`git log --graph --oneline --decorate --all`
328- See only which files have changed:
329`git log --name-status`
330
331These are just a few of the possible parameters you can use. For more, see `git log --help`
332
333### Tags
334
335When you are done and ready to mark a version of your code, you can add a git tag.
336
337```bash
338git tag v1.0.0
339```
340
341### The End
342
343You are now mostly ready to contribute to projects while using Git to track your projects. Although you must note that this is only a basic tutorial of Git and you still have more to learn namely working with remotes. Git is a very complex software and has more than 160 commands but it's amazing how you don't have to know even a half to contribute to open source projects and track your project's progress. You'll know more git commands naturally as you become more experienced with Git and when the need for them comes.
344
345### Resources
346
347- [Official Git website](https://git-scm.com/)
348- [Git Downloads from the official site](https://git-scm.com/downloads)
349- [No nonsense git cheatsheet](https://rogerdudler.github.io/git-guide/img/trees.png)
350- [Extensive Git guide by Atlassian](https://www.atlassian.com/git)