-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathwhat-is-git.html
129 lines (125 loc) · 10.5 KB
/
what-is-git.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What is git? || Git & Github</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
</head>
<body class="vh-100">
<div class="container-fluid h-100">
<div class="row minh-100">
<div class="bg-black minh-md-100 col-md-5 col-xxl-3 position-fixed z-2">
<div class="row w-md-100 mh-md-100vh align-items-center justify-content-start text-start">
<div class="col">
<div class="row">
<div class="container">
<nav class="navbar navbar-expand-md bg-black flex-row flex-md-column align-items-center align-items-md-start" data-bs-theme="dark">
<a class="navbar-brand w-md-100" href="index.html"><h1 class="fw-lighter fs-4 display-md-4 w-100 text-wrap">Introduction to Git and Github</h1></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-start" id="navbarNav">
<span class="text-white mb-3 fw-lighter">By <a class="text-secondary" href="https://github.com/alepbloyd" target="_blank" rel="noopener noreferrer">Alex Boyd</a> and <a class="text-secondary" href="https://github.com/maxturer" target="_blank" rel="noopener noreferrer">Max Turer</a></span>
<ul class="navbar-nav nav-underline flex-md-column text-uppercase">
<li class="nav-item"><a class="nav-link" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="what-is-git.html">What is Git?</a></li>
<li class="nav-item"><a class="nav-link" href="setting-up-git.html">Setting up Git</a></li>
<li class="nav-item"><a class="nav-link" href="guide.html">Git basics</a></li>
<li class="nav-item">
<a class="nav-link" href="push-guide.html"
>Pushing to GitHub</a
>
</li>
<li class="nav-item"><a class="nav-link" href="links.html">Links for further reading</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="col col-right">
<div class="row h-md-100 flex-column align-items-center justify-content-center">
<div class="col p-3 fade-in">
<h1 class="fw-lighter">What is Git?</h1>
<h2 class="fw-lighter">Git is a <i>version control system</i>.</h2>
<p>
A <i>version control system</i> is a way of keeping track of the history of a file - often a code file - as changes are made over time.
</p>
<h3 class="fw-lighter">
Git allows multiple authors to contribute, suggest changes, and review changes suggested by others - without losing any information along the way.
</h3>
</div>
<div class="col p-3 text-end fade-in fade-2 border-black border-top border-bottom">
<h1 class="fw-lighter">Git Lifecycle</h1>
<p class="fw-light">Information tracked by git moves one step at a time through the git lifecycle from unsaved content to a remote git repository.</p>
<p class="fw-light">The lifecycle flows in the same order each time:</p>
<p class="fw-light text-uppercase"><span class="red bg-black p-1">Unsaved</span> ⮕ <span class="yellow bg-black p-1">Staging</span> ⮕ <span class="green bg-black p-1">Local Git</span> ⮕ <span class="blue bg-black p-1">Remote Git</span></p>
</div>
<div class="col p-3 fade-in fade-3">
<div class="row flex flex-row justify-content-center align-items-center">
<div id="carouselExampleIndicators" class="carousel carousel-dark slide carousel-fade p-sm-tall w-75 border border-black">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6" aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7" aria-label="Slide 8"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/step1.png" class="d-block car-img" alt="Changes that you have made to a file, and we haven’t told git anything about them.
Once you are happy with the changes, you move this code from the Unsaved bucket to the Staging bucket with git add <your-file-name>">
</div>
<div class="carousel-item">
<img src="assets/images/step2.png" class="d-block car-img" alt="move the contents of the unsaved progress bucket into the staging bucket">
</div>
<div class="carousel-item">
<img src="assets/images/step3.png" class="d-block car-img" alt="We can add as many files as we want to this bucket using git add <file-name>.
Files that are in this bucket together will be grouped when we commit them.
We move files to the local git repository with:
git commit -m “a description of our changes”">
</div>
<div class="carousel-item">
<img src="assets/images/step4.png" class="d-block car-img" alt="move the contents of the staging bucket into the local git bucket">
</div>
<div class="carousel-item">
<img src="assets/images/step5.png" class="d-block car-img" alt="By committing changes, we have added them to the git repository and the history of the file. These changes are now part of the git repository, but only on your computer.
We can push our updated repository to a version stored online with git push.">
</div>
<div class="carousel-item">
<img src="assets/images/step6.png" class="d-block car-img" alt="move the contents of the local git bucket into the remote git bucket">
</div>
<div class="carousel-item">
<img src="assets/images/step7.png" class="d-block car-img" alt="the remote git bucket is ready">
</div>
<div class="carousel-item">
<img src="assets/images/step8.png" class="d-block car-img" alt="Once we have pushed from our local repository to the remote repository, our work is stored online.
This is commonly done through Github.">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>