原创：itsOli @前端一万小时
本文首发于公众号「前端一万小时」
本文版权归作者所有，未经授权，请勿转载！
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
❗️❗️❗️
以下链接为本文最新勘误篇章——《Git 和 GitHub：① Git、GitHub 初认识》
本知识点常见于“招聘要求”中——熟练使用 Git。
前言： 在《从零基础到轻松就业 | 初次接触前端，我们要理解哪些名词？》中，我们对版本管理系统、Git、GitHub 等有了初步的认识。那接下来的 2 篇文章将系统地诠释版本管理系统的重要性，以及怎样轻松入门 Git 和 GitHub。
后续文章只要涉及代码、工具的学习，我们都是先动起手来，不断的试错，然后在找问题过程中，解释相对应和与之相联系的知识点。代码的学习，眼百遍、耳百遍，不如自己动手一遍。
1 再次熟悉相关概念
-
Git 是一个免费、开源且新时代的“分布式版本控制系统”；
-
“版本控制系统”是一种记录一个或多个文件内容变化，以便将来查阅特定版本修订情况的系统；
-
GitHub 是一个通过 Git 进行版本控制的软件源代码托管服务平台。它是世界上最大的代码存放网站和开源社区。
2 程序开发为什么需要“版本控制系统”，最好还得是分布式控制系统
对于前端开发工作者来说，我们主要的任务就是用一行行代码去实现不同的需求：
-
现实工作场景中，需求是会随着市场反馈等相应变化的，与之同时，我们的代码也需要修改变化；
-
当我修改与需求对应的 A 功能的若干处代码后，我发现 B 功能没法正常的运行了——被我改挂掉的。这时，按照常理我需要回查我都修改了些什么而导致 B 功能的挂掉；
-
此时，我迫切需要的是，把改后的代码与之前 B 功能还能正常运行时的代码作一个对比。这两个不同时间、不同空间的代码，就是我们所说的“版本”。而“版本控制系统”就是一种记录一个或多个文件内容变化，以便将来查阅特定版本修订情况的系统。
如果我们有了这个系统，那么上边第 3 步中，我们就能很轻松、精确的找到问题所在。并且此时，你可以选择：
-
轻点几下就回到之前未改动的版本；
-
也可以选择存储在本地（因为之前的所有版本和相关改动也都已经有序的存储在这个版本控制系统中了）；
-
还可以选择把这个项目托管到如 GitHub 一类的开源平台上，邀请同事一起来共同开发，各不干涉，然后再把同事们所有的改动合并成一个共同的版本。
🏆总结： 项目开发中，使用版本控制系统好处是相当多的。版本控制也是我们前端开发工作者一项必备的技能。
3 Git 在哪里
在《从零基础到轻松就业 | 工欲善其事，必先利其器——软件安装、环境搭建》中，我们安装和配置了 Git。我们知道，对于 Git 的运用，初次接触时，我们一定要熟悉命令行的操作方式，这样我们才能明白 Git 每一步操作的具体含义，这也对我们项目工作中少犯错误有很大的帮助。
那 Git 在哪里？
用你的终端，以命令行去吩咐它（本系列的两篇文章会以具体操作详细谈到具体命令）。
💡Git 中文使用文档
4 Git、GitHub 初尝试
- ✅任务：在 GitHub 上新建一个项目，然后克隆这个项目到本地，最后把本地最新修改的内容再推送到 GitHub 的远程仓库上去。
4.1 第一步，在 GitHub 上创建一个仓库（repository)
💡注释：repository 是“仓库”的意思，可以直接理解为一个放置项目的地方。
4.2 第二步，设置、描述这个仓库
-
注释 1：写上你的项目名称；
-
注释 2：简单描述你的项目（这会稍后直接显示在项目下方）；
-
注释 3：个人用户直接选择免费、公开的；
-
注释 4：注意看下边的英文——“如果你勾选这个框，那么你可以随即克隆这个项目到你的电脑本地；如果你不勾选，则意味着你是想随后推送一个你电脑本地已经建立好的仓库到 GitHub 线上。”
请注意我们本文的任务是：从 GitHub 上克隆一个线上项目到本地。所以，请勾选这个选项。
4.3 第三步，克隆这个项目到本地
在第二步中，我们建立好了一个仓库，那么我们就开始按照本节任务进行克隆这个项目到本地。
-
注释 1：这个
README.md文件其实我们很常见，我们工作生活中下载的很多软件的文件夹里基本都会有这么一个文档，即使我们从来没有打开过一个。我们可以直接称作“说明文档”。这里的.md格式就是我们之前提到过的 Markdown 语法写的文档，不熟悉的请参考《从零基础到轻松就业 | 初次接触前端，我们要理解哪些名词？》。 -
注释 2：这里是我们上一步中添加的项目描述，它直接显示在了这里；
-
注释 3：默认情况下我们点击这里的 Clone or download ，会直接让我们用 HTTPS 的协议来操作。但是我们知道 HTTPS 是一种进行加密的网络传输协议，如果用 HTTPS，那么就会出现你以后的每一次操作，都会让你去终端输入用户名、密码，很麻烦。这里我们选择 SSH 协议——它用于计算机之间的加密登录，大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。
-
注释 4：在重新选择了以 SSH 协议来 Clone 项目后，新弹出来的地址就是我们需要拷贝的地址。
4.4 第四步，尝试“克隆”，检查错误
拷贝第三步中的地址，打开电脑的终端，命令行输入：
git clone (刚才拷贝的 SSH URL)
-
注释 1：这一步中电脑给我们发出了错误提醒；
-
注释 2：当然也给我们了一些建议——“请确保你是有这个权限来链接这个项目，或者确保这个仓库是否是存在的”。
我们知道，我们仓库肯定是存在的，那意思就是我们没有这个权限。为什么我们没权限？——反推一下：如果人人都有这个权限，那么任何人在得到你的 GitHub 地址后，就都可以向你的 GitHub 推送东西，那简直是特别恐怖的事情。所以，我们需要进行授权。
4.5 第五步，开始授权操作
开始授权操作，终端输入以下命令并一直回车：
ssh-keygen -t rsa -b 4096 -C "GitHub 注册的邮箱"
-
注释 1：这个命令过后，将会在我们本地电脑的家目录下生成两个钥匙——私钥（id_rsa）和公钥（id_rsa.pub）；
-
注释 2：一般我们把公钥给别人（这里指 GitHub），私钥留给自己。当别人（GitHub）去访问你的时候，它会拿着公钥去访问你，如果你们两个钥匙匹配上了，彼此才有权限进行后续的操作。
4.6 第六步，拷贝公钥
我们在第五步生成了钥匙，那接下来，我们就要把这个公钥的完整字符打开后拷贝到 GitHub 。终端输入以下命令查看公钥文件的内容：
cat ~/.ssh/id_rsa.pub
- 注释：完整复制这一连串的字符。
4.7 第七步，复制钥匙串
打开 GitHub，粘贴上一步复制的钥匙串字符：
- 注释：点击 SSH and GPG keys，在弹出的界面里点击 New SSH key。
4.8 第八步，再次试着操作第四步
在第七步末尾，当你点击了 Add SSH key 后，你便完成了 GitHub 上 SSH key 的添加。那也就意味着，你建立好了权限。接着再次试着操作第四步：
git clone (你上边拷贝的 SSH URL)
- 注释：看到这个，则证明我们在 GitHub 上建立那个名叫 test 的仓库已成功克隆到电脑本地。接下来，我们就可以在本地进行编辑，之后再推送到线上。
4.9 第九步，在本地进行项目编辑
终端上执行相关命令行，在本地对克隆下来的项目进行编辑，相关命令行知识学习参考 《从零基础到轻松就业 | 做一次山大王，让操作系统乖得像只小绵羊——命令行入门》。
ls
cd test
ls -al
-
注释 1：我们在把 GitHub 上的 test 项目克隆到了家目录下；
-
注释 2：打开 test 文件夹，我们看到了一个
.git文件，这个文件里管理着本地仓库代码的各种状态。这也是仓库文件夹与电脑中普通文件夹的区别。
4.10 第十步，将编辑好了的项目再推送到仓库
在本地的仓库里新增文件，然后再推送到 GitHub 的远程仓库上去：
touch a.md
git add .
git commit -am "addfile"
git status
git push origin master
-
注释 1：
git add .这里的.是指把当前文件夹下的所有新增和修改全部放到暂存区； -
注释 2：
git commit -am "addfile"这里的-am是指把所有（all）进行提交（-m）。整个命令是指：把刚刚的修改新增(名字叫"addfile")全部都提交到本地库； -
注释 3：
git status是指查看相关状态的意思，如上图所示，当我们查看状态时：“有一个文件已经被提交到本地库了，它还建议我们用git push来推送、发布这被提交到本地库的文件。”——所以这个命令将会是我们很常用的一个命令，用来常常查看 git 仓库的一些状态； -
注释 4：
git push origin master这里是指，把相关新增改动等推送到 GitHub 远程仓库的主分支上。这个远程仓库的名字是 “origin”——名字可以随便取，只不过系统默认的，如果只有一个远程仓库时，名字就叫 “origin”。
我们查看目前有哪些远程仓库的命令是：
git remote -v
4.11 第十一步，查看成果
再次返回 GitHub 页面，刷新后，你将会看到新的修改被推送到了。至此，我们的任务也圆满完成。
后记： 以上我们算是初次见识了 Git 和 GitHub 的威力，这两个家伙将一直伴随我们前端学习和工作的左右。所以，好好学习它，对待它。代码的世界永远是你付出多少，它就会回馈你多少，绝对不会辜负你。
祝好，qdywxs ♥ you！
