-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlab_027.html
More file actions
215 lines (210 loc) · 8.1 KB
/
lab_027.html
File metadata and controls
215 lines (210 loc) · 8.1 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en">
<head>
<title>
Lab 27 - Tracking Branches
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body data-lab-id="27">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 27</em>
Tracking Branches
</h1>
<h2>Goals</h2>
<ul>
<li>Learn how to track a <code>Git</code> branch remotely</li>
</ul>
<h2>Branches</h2>
<p>Now that we're connected, we have to <em>track our branch</em>. Much like how we had to track our files when we
first
add them, when we first connect to a remote repository, we have to track the <strong>branch</strong> we're on.
</p>
<p>If <code class="language-git">git commits</code> are a way to keep track of the changes to your code over time,
<em>branches</em> are a way to keep track of different versions of your code. Every <code>Git</code> repository
has a <strong>main</strong> branch and can be represented as a series of commits with their hash-values
attached.
</p>
<pre class="mermaid">
gitGraph
commit
commit
commit
commit
commit
</pre>
<p>Let's say we have a new feature we want to add to our website. However, we don't want to mess with the code we
currently have.
We can create a new branch for this new feature.</p>
<pre class="mermaid">
gitGraph
commit
commit
commit
commit
commit
branch develop
checkout develop
</pre>
<p>This new branch would reference the <strong>main</strong> branch from when it was created. We could make all
our changes for the new feature on this new branch.
</p>
<pre class="mermaid">
gitGraph
commit
commit
commit
commit
commit
branch develop
checkout develop
commit
commit
commit
</pre>
<p>When done, we could <strong>merge</strong> our changes from our developing branch back into our main branch.
</p>
<pre class="mermaid">
gitGraph
commit
commit
commit
commit
commit
branch develop
checkout develop
commit
commit
commit
checkout main
merge develop
</pre>
<p>Branches are often used when multiple people are collaborating on a project's repository. It can get pretty
complicated pretty quickly. For example, in the <code>git graph</code> below. Don't worry about understanding
it all now. You'll get better as you use <code>Git</code> branches more.
</p>
<pre class="mermaid">
gitGraph
commit
commit
branch test
checkout test
commit
checkout main
commit
commit
commit
branch develop
checkout develop
commit
commit
commit
checkout main
commit
commit
branch feature
checkout feature
commit
commit
commit
checkout main
merge develop
commit
merge feature
</pre>
<h2>Track Our Branch</h2>
<p>First, let's rename our branch to <code>main</code>.</p>
<h3><b>Execute</b></h3>
<pre class="command-line" data-prompt="$"><code class="language-git">git branch -M main</code></pre>
<p>Then we'll track our branch using the following command.</p>
<h3><b>Execute</b></h3>
<pre class="command-line" data-prompt="$"><code class="language-git">git push -u origin main</code></pre>
<p class="note"><code>-u</code> is short for <code>--set-upstream</code>. If you ever see that, it means the
same thing and that you need to track your local branch remotely.</p>
<h3><b>Output</b></h3>
<pre class="command-line" data-prompt="$" data-filter-output="(out)"><code class="language-git">git push -u origin main
(out)Enumerating objects: 23, done.
(out)Counting objects: 100% (23/23), done.
(out)Delta compression using up to 8 threads
(out)Compressing objects: 100% (21/21), done.
(out)Writing objects: 100% (23/23), 3.24 MiB | 2.95 MiB/s, done.
(out)Total 28 (delta 6), reused 0 (delta 0), pack-reused 0
(out)remote: Resolving deltas: 100% (11/11), done.
(out)To https://github.com/<username>/<username>.github.io.git
(out) * [new branch] main -> main
(out)branch 'main' set up to track 'origin/main'.
(out)</code></pre>
<p>You should see something similar to above.
Now if you go to the repository on GitHub, you should see all your local files uploaded to the remote repository!</p>
<img class="image" src="assets/2701.png" alt="GitHub repository with all the local files uploaded">
<h2>Stage, Commit, and Push</h2>
<p>Let's practice the new workflow that we have to be mindful of. Make the following changes to your <code>README.md</code>.</p>
<h3 class="file-heading"><em>README.md</em></h3>
<pre class="file line-numbers" data-line="4"><code class="language-markdown"># <Your Name>'s Personal Website
This is a personal website built using the Hack4Impact Starter Pack!
<You can add any description you want here.>
[Visit it Here!](https://<username>.github.io)
</code></pre>
<h3><b>Execute</b></h3>
<pre class="command-line" data-prompt="$"><code class="language-git">git add README.md</code></pre>
<pre class="command-line" data-prompt="$"><code class="language-git">git commit -m "feat: add link to README.md"</code></pre>
<h3><b>Output</b></h3>
<pre class="command-line" data-prompt="$" data-filter-output="(out)"><code class="language-git">git commit -m "feat: add link to README.md"
(out)[main 37d156a] feat: add link to README.md
(out) 1 file changed, 1 insertion(+)
(out)</code></pre>
<p>Now, <strong>push</strong> your changes to the remote repository!</p>
<h3><b>Execute</b></h3>
<pre class="command-line" data-prompt="$"><code class="language-git">git push</code></pre>
<h3><b>Output</b></h3>
<pre class="command-line" data-prompt="$" data-filter-output="(out)"><code class="language-git">git push
(out)Enumerating objects: 5, done.
(out)Counting objects: 100% (5/5), done.
(out)Delta compression using up to 8 threads
(out)Compressing objects: 100% (3/3), done.
(out)Writing objects: 100% (3/3), 353 bytes | 353.00 KiB/s, done.
(out)Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
(out)remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
(out)To https://github.com/khoa-l/khoa-l.github.io.git
(out) 67db699..37d156a main -> main
(out)</code></pre>
<p>Double check that everything went well on your remote repository. You should see the new link in your <code>README.md</code>. If not, review
the instructions and the last few labs.</p>
<img class="image" src="assets/2702.png" alt="The remote repository with the update link in the README.md">
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad: true, theme: "base"});
</script>
</body>
</html>