离不开的 Git和GitHub——①版本控制、Git、GitHub 初认识

本知识学习用时：3小时，总第7/10000小时

前言：在《初次接触前端，我们要理解哪些名词？》中，我们对版本管理系统、Git、GitHub 等有了初步的认识，那接下来的2篇文章将系统的诠释版本管理系统的重要性，以及怎样轻松入门 Git 和 GitHub。

后续文章只要涉及代码、工具的学习，我们都是先动起手来，不断的试错，然后在找问题过程中，解释相对应和与之相联系的知识点。代码的学习，眼百遍、耳百遍，不如自己动手一遍。

一、再次熟悉相关概念

Git 是一个免费、开源且新时代的”分布式版本控制系统“；

“版本控制系统”是一种记录一个或多个文件内容变化，以便将来查阅特定版本修订情况的系统；

GitHub 是一个通过 Git 进行版本控制的软件源代码托管服务平台；它是世界上最大的代码存放网站和开源社区。

二、程序开发为什么需要“版本控制系统”，最好还得是分布式控制系统？

对于前端开发工作者来说，我们主要的任务就是用一行行代码去实现不同的需求：

1. 现实工作场景中，需求是会随着市场反馈等相应变化的，与之同时，我们的代码也需要修改变化；

2. 当我修改与需求对应的 A 功能的若干处代码后，我发现 B 功能没法正常的运行了——被我改挂掉的。这时我常识性的需要回查我都修改了些什么而导致 B 功能的挂掉；

3. 此时，我迫切需要的是，把改后的代码与之前B功能还能正常运行时的代码作一个对比。

这两个不同时间、不同空间的代码，就是我们说的“版本”。而“版本控制系统”就是一种记录一个或多个文件内容变化，以便将来查阅特定版本修订情况的系统。

如果我们有了这个系统，那么上边的第3步中，我们就能很轻松、精确的找到问题所在。并且此时，你可以选择：

1. 轻点几下就回到之前未改动的版本；

2. 也可以选择存储在本地（因为之前的所有版本和相关改动也都已经有序的存储在这个版本控制系统中了）；

3. 还可以选择把这个项目托管到如 GitHub 一类的开源平台上，邀请同事一起来共同开发，各不干涉，然后再把同事们所有的改动合并成一个共同的版本。

总结：项目开发中，使用版本控制系统好处是相当多的。版本控制也是我们前端开发工作者一项必备的技能。

三、Git 在哪里？

在《工欲善其事，必先利其器——软件安装、环境搭建》中，我们安装和配置了 Git，我们知道，对于 Git 的运用，初次接触我们一定要熟悉命令行的操作方式，这样我们才能明白 Git 每一步操作的具体含义，这也对我们项目工作中少犯错误有很大的帮助。

那 Git 在哪里？

用你的终端，以命令行去吩咐她（本系列的2篇文章会以具体操作详细谈到具体命令）。

四、Git、GitHub 初尝试

任务：在 GitHub 上新建一个项目，然后克隆这个项目到本地，最后把本地最新修改的内容再推送到 GitHub 的远程仓库上去。

第一步：在 GitHub 上创建一个仓库（repository)

注释：repository 是仓库的意思，可以直接理解为：一个放置项目的地方。

第二步：设置、描述这个仓库

-- 注释1:写上你的项目名称；

-- 注释2:简单描述你的项目（这会稍后直接显示在项目下方）；

-- 注释3:个人用户直接选择免费、公开的；

-- 注释4:注意看下边的英文：“如果你勾选这个框，那么你可以随即克隆这个项目到你的电脑本地；如果你不勾选，则意味着你是想随后推送一个你电脑本地已经建立好的仓库到GitHub 线上。”—— 请注意我们本文的任务是：从GitHub上克隆一个线上项目到本地。所以，请勾选这个选项。

第三步：在第二步中，我们建立好了一个仓库，那么我们就开始按照本节任务进行克隆这个项目到本地。

-- 注释1:这个 README.md 文件其实我们很常见，我们工作生活中下载的 N多软件的文件夹基本都会有这么一个文档，即使我们从来没有打开过一个，我们可以直接称作：说明文档。这里的 .md 格式就是我们之前提到过的markdown 语法写的文档，不熟悉的请参考《初次接触前端，我们要理解哪些名词？》

-- 注释2:这里就是我们上一步中添加的项目描述，它直接显示在了这里；

-- 注释3:默认情况下我们点击这里的 Clone or download ,会直接让我们用 http 的协议来操作，但是我们知道 https 是一种进行加密的网络传输协议，如果用 https，那么就会出现你以后的每一次操作，都会让你去终端输入用户名、密码，很麻烦。这里我们选择 SSH 协议——它用于计算机之间的加密登录，大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。

-- 注释4:在重新选择了以 SSH 协议来 Clone 项目后，新弹出来的地址就是我们需要拷贝的地址。

第四步：拷贝第三步中的地址，打开电脑的终端，命令行输入：

-- 注释1:这一步中电脑给我们发出了错误提醒；

-- 注释2:当然也给我们了一些建议：“请确保你是有这个权限来链接这个项目，或者确保这个仓库是否是存在的”，那我们知道，我们仓库肯定是存在的，那意思就是我们没有这个权限。

为什么我们没权限？——反推一下：如果人人都有这个权限，那么任何人在得到你的 GitHub 地址后，就都可以向你的 GitHub 推送东西，那简直是特别恐怖的事情。所以，我们需要授权。

第五步：开始授权操作，终端输入以下命令并一直回车：

-- 注释1:这个命令过后，将会在我们本地电脑的家目录下生成两个钥匙：私钥(id_rsa)和公钥(id_rsa.pub);

-- 注释2:一般我们把公钥给别人（这里指 GitHub），私钥留给自己，当别人（GitHub）去访问你的时候，它会拿着公钥去访问你，如果你们两个钥匙匹配上了，彼此才有权限进行后续的操作。

第六步：我们在第五步生成了钥匙，那接下来，我们就要把这个公钥的完整字符打开后拷贝到 GitHub。终端输入以下命令查看公钥文件的内容：

-- 注释：完整复制这一连串的字符。

第七步：打开 GitHub，粘贴上一步复制的钥匙串字符：

-- 注释：点击 SSH and GPG keys，在弹出的界面里点击 New SSH key。然后：

第八步：在第七步末尾，当你点击了 Add SSH key 后，你便完成了 GitHub上 SSH key的添加。那也就意味着，你建立好了权限。接着再次试着操作第四步：

-- 注释：看到这个，则证明我们在 GitHub 上建立那个名叫 test 的仓库已成功克隆到电脑本地。接下来，我们就可以在本地进行编辑，之后再推送到线上。

第九步：终端上执行相关命令行，在本地对克隆下来的项目进行编辑，相关命令行知识学习参考 《做一次山大王，让你的操作系统乖得像个小绵羊——命令行入门》。

-- 注释1:我们在把 GitHub 上的 test 项目克隆到了家目录下；

-- 注释2:打开 test 文件夹，我们看到了一个 .git 文件，这个文件里管理着本地仓库代码的各种状态。这也是仓库文件夹与电脑中普通文件夹的区别。

第十步：在本地的仓库里新增文件，然后再推送到 GitHub 的远程仓库上去：

-- 注释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“。我们查看目前有哪些远程仓库的命令是：

第十一步：再次返回 GitHub 页面，刷新后，你将会看到新的修改被推送到了。至此，我们的任务也圆满完成。

后记：以上我们算是初次见识了 Git 和 GitHub 的威力，这两个家伙将一直伴随我们前端学习和工作的左右。所以，好好学习她，对待她。代码的世界永远是你付出多少，她就会回馈你多少，绝对不会辜负你。So,学无止境，她值得你我用后边的10000小时来对待。

欢迎继续关注下文 ：

离不开的 Git 和 GitHub——② Git、GitHub 进阶（提交代码+团队合作）

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）