在Github中演示前端demo

在浏览他人Github时，经常能看到他们的前端项目的Readme.md中，放有在线演示Demo。自己也想实现这样的效果，在网上自己摸索。总结为下文=。=

需求：

一般情况，我们将自己写成的网页上传到github仓库，点进相应的html界面出来的是该文件的代码。他人看起来非常不直观。 因此，我们需要一个在线演示demo的平台。

两种方法

方法一：

这种方法比较简单。通过增加路径前缀的方法，实现在线demo浏览。 在github中随便找一个html演示：例如前些天写的瀑布流：HTML-CSS-JS_practice/JS/瀑布流/瀑布流.html。其的页面路径为：https://github.com/laclys/HTML-CSS-JS_practice/blob/master/JS/瀑布流/瀑布流.html 这一大长串。我们只需要在这一大长串地址前面加上http://htmlpreview.github.io/? 即可。 最后的浏览demo地址为： http://htmlpreview.github.io/?https://github.com/laclys/HTML-CSS-JS_practice/blob/master/JS/瀑布流/瀑布流.html

这种方法看似很简单，可是有缺陷的。会更改css样式，不建议使用。

方法二：

普遍采用的一种方法，通过使用Githubpages。 首先，在我们需要演示的项目中，增加gh-pages分支（正常情况下只有一个master分支）。 把需要演示的页面代码克隆到这个分支上。 如果本地实在master分支下工作的，工作完成后，输入命令： git push origin master:gh-pages 此命令的意思是把本地master分支的内容推送到远程的gh-pages。 如果远程没有gh-pages分支的话，会自动创建该分支 假如我们想浏览今儿做成的完美拖拽小demo： HTML-CSS-JS_practice/JS/拖拽/完美拖拽（八个方向）.html 我们通过：http://[用户名].github.io/[index.html所在目录] 这种方式访问。 我的 githubpages为：laclys.github.io（也就是我的blog地址） （如果有index.html,则会直接访问到主页） 则最后的浏览地址是：laclys.github.io + HTML-CSS-JS_practice/JS/拖拽/完美拖拽（八个方向）.html DEMO 最后我们可以将这个地址添加到Readme上面去！

以上！