本文主要介绍图形界面GitHub的简单用法，以及预览html网页效果的具体实现
一直听闻拥有一个GitHub账号是码农的基本要求，惭愧的是，作为前端小白，除一开始注册账号后，便再没探索过GitHub。这两天下定决心学习，发现图形界面操作的GitHub并没有想象中的困难，开心ing~
准备工具
在学习GitHub的具体使用前，需先准备三个基本工具：
- GitHub网页
- GitHub Desktop GitHub桌面图形化控制工具
- 本地编辑器
GitHub网页
GitHub网址：https://github.com/ 在该网址上注册你的GitHub账号，操作较为简单
GitHub Desktop
这是GitHub提供的桌面控制工具，直接到官网下载至本地计算机即可，官网地址：https://desktop.github.com/
2.JPG
本地编辑器
这个无需多说，博主使用的编辑器是Sublime Text 3 （关于Sublime Text 3的下载与安装资料可以参考博主之前的文章http://www.jianshu.com/p/ed5fb20e5f7a）
GitHub入门
关于GitHub入门的资料网络上有很多，博主跟大家推荐慕课网Peter老师的版本控制入门教程，该教程不涉及Git命令行，适合零基础小白入门。
和教程对应的电子书：搬进GitHub
学习完该教程，便可以进行基本的GitHub操作，可以轻松实现将自己的项目pull到GitHub上，接下来博主详细介绍简单demo实现步骤
上传项目到GitHub
第一步：GitHub网页端新建仓库（GitHub中的仓库可简单等价于项目project）图中位置点击New repository
4.png
添加仓库名称name、描述description，勾选Initialize this repository with a README,然后点击Create repository，仓库便创建成功。
5.png
第二步：将远端新建仓库下载到本地
点击Open in desktop，将仓库clone到本地电脑的桌面控制器GitHub Desktop
6.png
7.png
下载完成后，GitHub Desktop会自动在本地电脑生成一个相应的工程文件夹，找到该文件夹，可在本地编辑器进行各种操作。
前两步的操作反过来也是OK的，即先在GitHub Desktop中创建仓库，然后将其pull到远端仓库，大家有兴趣可以自己尝试。
第三步：本地编辑器编辑项目
在本地编辑器进行编辑
9.png
第四步：将项目上传到GitHub上
本地编辑器编辑好项目后，打开GitHub Desktop，可以看到GitHub Desktop自动检测到发生了73次新的操作
10.png
选中所有操作项，将其作为一次版本更新
11.png
版本更新后，可以看到changes变为0，history中更新了刚刚的操作，点击Publish branch，将更新传到远端仓库。
12.png
13.png
打开GitHub网页，刷新，可以看到项目已更新。
16.png
至此，项目成功上传到GitHub。
简单demo实现
项目上传到GitHub后，打开html文件，你会发现看到的是如下效果：
25.png
文件以源码形式被打开，那么如果我们想要预览网页效果，应该怎么做呢？
GitHub最新版本，不再需要新建gh-pages分支，直接在master分支中添加index.html文件即可，操作大为简化。博主介绍的是之前的新建gh-pages分支方法。
第一步：新建gh-pages分支（一般情况下只有master分支）
17.png
第二步：在本地GitHub Desktop中选择gh-pages分支
在本地GitHub Desktop中刷新，选择gh-pages分支为当前分支
18.png
第三步：本地编辑器添加index.html文件
这一步，在本地编辑器添加index.html，或者将项目主页面直接命名为index.html。
19.png
第四步：更新版本，上传到远端仓库
与将项目上传到GitHub步骤一致，注意：版本应更新到gh-pages分支
20.png
可以看到，gh-pages分支中增加了index.html文件，而master分支保持不变。
21.png
22.png
第五步：点击setting
23.png
第六步：设置GitHub Pages
将分支选择为gh-pages branch，点击save，在右上方会生成一个链接，打开该链接便可以预览网页效果。
24.png
该链接可能打开的是GitHub Pages页面，相信自己没有错，只需将你的index.html文件加在该链接之后即可成功打开，实现网页demo。
比如，博主经过上述操作后生成的链接为：https://alicegb.github.io/A-simple-imitation-of-360-browser/,博主想要打开index.html文件，该文件在项目中位置如图：
26.png
那么只需在链接后边加上·the simple imitation/index.html·即可，即最终的链接地址为：<https://alicegb.github.io/A-simple-imitation-of-360-browser/the simple imitation/index.html>
本文不涉及git命令行操作，如果想要使用命令行实现demo，可以参考文章Github-README 中展示demo
至此，GitHub入门与简单demo实现就成功啦！具体可参考博主的简单项目:
GitHub项目地址：https://github.com/AliceGB/A-simple-imitation-of-360-browser
demo实现：https://alicegb.github.io/A-simple-imitation-of-360-browser/the%20simple%20imitation/index.html
后记 从零基础到实现简单demo实现，博主学习了一天，折腾了一天，总算不再对着GitHub一脸懵逼，这方面还有很多的知识需要学习，git命令行到目前博主依然不怎么懂，各branch之间的关系也依然一知半解。不管怎样，学有所得总是让人心生愉悦，希望本文也能让你有所收获~
网友评论