web_06 | Web 前置知识——Git 和 GitHub：① Git、GitHub初认识

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

本知识点常见于“招聘要求”中——熟练使用 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.1 第一步，在 GitHub 上建立一个仓库（repository)

💡注释：repository 是“仓库”的意思，能够直接理解为：一个放置项目的地方。

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

• 注释1：写上你的项目名称；
• 注释2：简单描述你的项目（这会稍后直接显示在项目下方）；
• 注释3：我的用户直接选择免费、公开的；
• 注释4：注意看下边的英文：“若是你勾选这个框，那么你能够随即克隆这个项目到你的电脑本地；若是你不勾选，则意味着你是想随后推送一个你电脑本地已经创建好的仓库到 GitHub 线上。”—— 请注意咱们本文的任务是：从 GitHub 上克隆一个线上项目到本地。因此，请勾选这个选项。

4.1.3 第三步，克隆这个项目到本地

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

• 注释1：这个 README.md 文件其实咱们很常见，咱们工做生活中下载的不少软件的文件夹里基本都会有这么一个文档，即便咱们历来没有打开过一个。咱们能够直接称做：说明文档。这里的 .md 格式就是咱们以前提到过的 markdown 语法写的文档，不熟悉的请参考《初次接触前端，咱们要理解哪些名词？》。
• 注释2：这里是咱们上一步中添加的项目描述，它直接显示在了这里；
• 注释3：默认状况下咱们点击这里的 Clone or download，会直接让咱们用 https 的协议来操做，可是咱们知道 https 是一种进行加密的网络传输协议，若是用 https，那么就会出现你之后的每一次操做，都会让你去终端输入用户名、密码，很麻烦。这里咱们选择 SSH 协议——它用于计算机之间的加密登陆，大多数 Git 服务器都会选择使用 SSH 公钥来进行受权。
• 注释4：在从新选择了以 SSH 协议来 Clone 项目后，新弹出来的地址就是咱们须要拷贝的地址。

4.1.4 第四步，尝试“克隆”，检查错误

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

git clone (刚才拷贝的SSH url)
复制代码

• 注释1：这一步中电脑给咱们发出了错误提醒；
• 注释2：固然也给咱们了一些建议：“请确保你是有这个权限来连接这个项目，或者确保这个仓库是不是存在的”。咱们知道，咱们仓库确定是存在的，那意思就是咱们没有这个权限。为何咱们没权限？——反推一下：若是人人都有这个权限，那么任何人在获得你的 GitHub 地址后，就均可以向你的 GitHub 推送东西，那简直是特别恐怖的事情。因此，咱们须要进行受权。

4.1.5 第五步，开始受权操做

开始受权操做，终端输入如下命令并一直回车：

ssh-keygen -t rsa -b 4096 -C "GitHub注册的邮箱"
复制代码

• 注释1：这个命令事后，将会在咱们本地电脑的家目录下生成两个钥匙：私钥（id_rsa）和公钥（id_rsa.pub）；
• 注释2：通常咱们把公钥给别人（这里指 GitHub），私钥留给本身，当别人（GitHub）去访问你的时候，它会拿着公钥去访问你，若是大家两个钥匙匹配上了，彼此才有权限进行后续的操做。

4.1.6 第六步，拷贝公钥

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

cat ~/.ssh/id_rsa.pub
复制代码

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

4.1.7 第七步，复制钥匙串

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

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

  

4.1.8 第八步，再次试着操做第四步

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

git clone (你上边拷贝的 SSH url)
复制代码

• 注释：看到这个，则证实咱们在 GitHub 上创建那个名叫 test 的仓库已成功克隆到电脑本地。接下来，咱们就能够在本地进行编辑，以后再推送到线上。

4.1.9 第九步，在本地进行项目编辑

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

ls
cd test
ls -al
复制代码

• 注释1：咱们在把 GitHub 上的 test 项目克隆到了家目录下；
• 注释2：打开 test 文件夹，咱们看到了一个 .git 文件，这个文件里管理着本地仓库代码的各类状态。这也是仓库文件夹与电脑中普通文件夹的区别。

4.1.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.1.11 第十一步，查当作果

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

---

后记： 以上咱们算是初次见识了 Git 和 GitHub 的威力，这两个家伙将一直伴随咱们前端学习和工做的左右。因此，好好学习它，对待它。代码的世界永远是你付出多少，它就会回馈你多少，绝对不会辜负你。

祝好，qdywxs ♥ you！