Blog icon indicating copy to clipboard operation
Blog copied to clipboard

如何在github中做在线Demo演示

Open pramper opened this issue 9 years ago • 0 comments

作为一个前端工程师,平常写一些小demo或项目时会遇到这样的情况:我想把这个html页面呈现给别人看看,又不想把整个工程项目发给他,这样太麻烦,要是有个能在线演示demo的平台就好了。OK,github可以帮我们,一切都不是问题。

把github上的index.html文件作为网页展示我目前知道两种方法,下面道来:

1、随便在github找一个html文件,例如这个,然后在其url地址前加上http://htmlpreview.github.com/?,变成了 http://htmlpreview.github.com/?https://github.com/pramper/Demos/blob/master/JS-Demos/ResponsiveTable/index.html 访问这个地址即可。

不过这种方法有个缺陷,打开浏览器调试工具,会发现莫名多了几个<script>标签。感觉不爽,下面重点说说第二种方法。

2、利用gh-pages,步骤很简单,如下:

  • 创建gh-pages分支:如果一开始是在master分支下工作,工作完成后,输入命令git checkout -b gh-pages,此命令会新建一个gh-pages分支并切换到该分支
  • 推送gh-pages分支到github:输入命令git push origin master:gh-pages,此命令会把
  • 如果你在本地是在master分支下工作,工作完成后,输入命令git push origin master:gh-pages,此命令的意思是把本地master分支的内容推送到远程的gh-pages。如果远程没有gh-pages分支的话,会自动创建该分支
  • 通过访问http://[用户名].github.io/[index.html所在目录],这样就会访问到项目目录下的index.html文件。还是方法一种那个例子,其访问地址为http://pramper.github.io/Demos/Vue-Demos/questionnaire/dist

ps:又知道的了一种更简单的方法,不需要gh-pages分支,是我目前所知最简单的方法:

打开仓库的setting,然后这个设置,简单粗暴!!

pramper avatar Aug 20 '16 13:08 pramper