本文主要介绍图形界面GitHub的简单用法,以及预览html网页效果的具体实现
一直听闻拥有一个GitHub账号是码农的基本要求,惭愧的是,作为前端小白,除一开始注册账号后,便再没探索过GitHub。这两天下定决心学习,发现图形界面操作的GitHub并没有想象中的困难,开心ing~
准备工具
在学习GitHub的具体使用前,需先准备三个基本工具:
- GitHub网页
- GitHub Desktop GitHub桌面图形化控制工具
- 本地编辑器
GitHub网页
GitHub网址:https://github.com/ 在该网址上注册你的GitHub账号,操作较为简单
GitHub Desktop
这是GitHub提供的桌面控制工具,直接到官网下载至本地计算机即可,官网地址:https://desktop.github.com/
本地编辑器
这个无需多说,博主使用的编辑器是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

添加仓库名称name、描述description,勾选Initialize this repository with a README,然后点击Create repository,仓库便创建成功。

第二步:将远端新建仓库下载到本地
点击Open in desktop,将仓库clone到本地电脑的桌面控制器GitHub Desktop


下载完成后,GitHub Desktop会自动在本地电脑生成一个相应的工程文件夹,找到该文件夹,可在本地编辑器进行各种操作。
前两步的操作反过来也是OK的,即先在GitHub Desktop中创建仓库,然后将其pull到远端仓库,大家有兴趣可以自己尝试。
第三步:本地编辑器编辑项目
在本地编辑器进行编辑

第四步:将项目上传到GitHub上
本地编辑器编辑好项目后,打开GitHub Desktop,可以看到GitHub Desktop自动检测到发生了73次新的操作

选中所有操作项,将其作为一次版本更新

版本更新后,可以看到changes变为0,history中更新了刚刚的操作,点击Publish branch,将更新传到远端仓库。


打开GitHub网页,刷新,可以看到项目已更新。

至此,项目成功上传到GitHub。
简单demo实现
项目上传到GitHub后,打开html文件,你会发现看到的是如下效果:

文件以源码形式被打开,那么如果我们想要预览网页效果,应该怎么做呢?
GitHub最新版本,不再需要新建gh-pages分支,直接在master分支中添加index.html文件即可,操作大为简化。博主介绍的是之前的新建gh-pages分支方法。
第一步:新建gh-pages分支(一般情况下只有master分支)

第二步:在本地GitHub Desktop中选择gh-pages分支
在本地GitHub Desktop中刷新,选择gh-pages分支为当前分支

第三步:本地编辑器添加index.html文件
这一步,在本地编辑器添加index.html,或者将项目主页面直接命名为index.html。

第四步:更新版本,上传到远端仓库
与将项目上传到GitHub步骤一致,注意:版本应更新到gh-pages分支

可以看到,gh-pages分支中增加了index.html文件,而master分支保持不变。


第五步:点击setting

第六步:设置GitHub Pages
将分支选择为gh-pages branch,点击save,在右上方会生成一个链接,打开该链接便可以预览网页效果。

该链接可能打开的是GitHub Pages页面,相信自己没有错,只需将你的index.html文件加在该链接之后即可成功打开,实现网页demo。
比如,博主经过上述操作后生成的链接为:https://alicegb.github.io/A-simple-imitation-of-360-browser/,博主想要打开index.html文件,该文件在项目中位置如图:

那么只需在链接后边加上·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之间的关系也依然一知半解。不管怎样,学有所得总是让人心生愉悦,希望本文也能让你有所收获~
网友评论