...that the "L-O-V-E" song was originally written in 1965 as the content for a webpage, using Git for version control?
We're going to re-enact the composition of this historic song by following the writer, Milt Gabler, step by step through his process of writing the song.
Enter these commands to create a folder for your page, initialize Git inside it, and create a blank HTML file.
$ mkdir love_song
$ cd love_song
$ atom .
$ git initgit init: Turns a folder into a repository. Also creates amasterbranch.
$ touch index.htmlAdd this boilerplate HTML to index.html using Atom.
...or SublimeText, or whatever text editor you're using. You can just copy and paste this entire chunk.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
</body>
</html>Finally, add and commit your work.
$ git add index.html
$ git commit -m "Initial commit"git add: Tells Git, "Hey, I want you to record the changes I made to this file"git commit: Tells Git, "Hey, actually record those changes now"
That is: he decided to focus on the HTML, rather than making the page look pretty with CSS. That came later.
Milt planned on trying out different variations of the lyrics to find what he liked best. He wanted it to be easy to get back to the boilerplate HTML every time he started a new variation.
So, Milt created a branch for working on lyrics.
$ git branch wip-lyricsgit branch: Creates a new branch
That way he could make commits, but they would only be on that branch -- it would leave the master branch alone. To get back to the boilerplate HTML, he could just go back to the master branch.
Having made the new branch, Milt switched over to (or "checked out") that branch.
$ git checkout wip-lyrics
git checkout: Switches over to another branch
Replace the contents of index.html with this. Again, I recommend copying and pasting -- only 3 lines are actually changing, but the Git stuff is the important part of this lesson, not the HTML.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
</ul>
</body>
</html>He felt this was good progress, so he made a commit.
$ git add index.html
$ git commit -m "Solid first line"Milt was so happy with that first line that he decided to go ahead and add it to the master branch of his site.
So, he switched over (or "checked out") the master branch:
$ git checkout master...and "merged" in the changes he made to the lyrics branch.
$ git merge wip-lyricsgit merge: To the current branch, adds all the commits that were made to another branch, from the point in time where the other branch split off from the current branch. Putting it another way: pulls in all the changes made to the other branch.
Still wanting to leave his master branch as the "good" current version of his webpage, and wanting to leave the lyrics branch for experimenting with lyrics, Milt made and switched over to a branch for CSS:
$ git branch wip-css
$ git checkout wip-css
$ touch styles.css...and he wrote some cutting-edge CSS:
In styles.css:
body{
text-align:center;
}In index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
</ul>
</body>
</html>$ git add .
$ git commit -m "Added stylesheet"$ git checkout master
$ git merge wip-cssHe noticed that the <title> was "My Page", which wasn't very descriptive, so he changed the <title> to the name of his song -- "Love Song" -- which was much more descriptive.
$ git checkout wip-lyricsIn index.html:
<!DOCTYPE html>
<html>
<head>
<title>Love Song</title>
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
</ul>
</body>
</html>$ git add .
$ git commit -m "Fixed title"In index.html:
<!DOCTYPE html>
<html>
<head>
<title>Love Song</title>
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
<li><dfn>O</dfn> is for the only one I see.</li>
</ul>
</body>
</html>$ git add .
$ git commit -m "Added second line"$ git checkout master
$ git merge wip-lyricsSuddenly he got this error:
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.
In a panic, he looked at his index.html and saw this:
<head>
<<<<<<< HEAD
<title>My Page</title>
<link rel="stylesheet" href="styles.css" />
=======
<title>Love Song</title>
>>>>>>> wip-lyrics
</head>A merge conflict occurs when the commits you're merging in from another branch include changes to a line (or code immediately before or after a line) that was also changed in the current branch.
The problem is two commits are trying to make changes in the same place, and Git doesn't know which commit has the changes you want to keep.
So it adds these weird <<< and === lines to show you the conflicting changes from the two different branches. ("HEAD" is the branch you're on now.)
Simply remove the lines you don't want to keep in your commit history. You don't want to keep the <<< and === lines so remove those too!
In index.html:
<!DOCTYPE html>
<html>
<head>
<title>Love Song</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
<li><dfn>O</dfn> is for the only one I see.</li>
</ul>
</body>
</html>Then he made a commit to "lock in" the merge he was attempting to make.
$ git add .
$ git commit -m "Merging CSS and changes to lyrics"They came to him in a flash of inspiration.
$ git checkout wip-lyricsIn index.html:
<!DOCTYPE html>
<html>
<head>
<title>Love Song</title>
</head>
<body>
<h1>Love Song</h1>
<p>By Milt Gabler</p>
<ul>
<li><dfn>L</dfn> is for the way you look at me.</li>
<li><dfn>O</dfn> is for the only one I see.</li>
<li><dfn>V</dfn> is very very extraordinary.</li>
<li><dfn>E</dfn> is even more than anyone that you adore can.</li>
</ul>
</body>
</html>$ git add .
$ git commit -m "Finished first verse"He was so excited he didn't even bother merging his lyrics changes into master first.
$ git checkout wip-cssIn styles.css:
body{
text-align:center;
font-family:"Comic Sans MS";
}$ git add .
$ git commit -m "Added some very Web2.0 fonts"When you git merge and there aren't merge conflicts, Atom (or whichever default text edtior you have) will open and ask you what you want your commit message to be.
You don't need to do anything -- you can literally just save and quit Atom.
$ git checkout master
$ git merge wip-css
$ git merge wip-lyricsThere were no merge conflicts here because the changes made to wip-css and wip-lyrics didn't overlap at all.
$ git branch -d wip-css
$ git branch -d wip-lyricsgit branch -d: Deletes a branch.
git init: Turns a folder into a repository, and creates amasterbranchgit add: Tells Git, "Hey, I want you to record the changes I made to this file"git commit: Tells Git, "Hey, actually record those changes now"git branch: Creates a new branchgit checkout: Switches over to another branchgit merge: Merges into the current branch the changes from another branchgit branch -d: Deletes a branch
Just delete the lines you don't want (including the <<<<<<, ======, and >>>>>> lines), add, and commit.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent