预览github里面的网页或dome
1.问题所在:
之前把项目提交到github都可以在路径前面加上http://htmlpreview.github.io/?来预览demo,最近发现这种方式预览的时候加载不出来css,js(原因不详)所以找了另外一种办法来预览加载
当我们在本地写好一个小项目的时候用webStrom上传到github(上传方法参考http://www.cnblogs.com/hfxm/p/5633910.html)之后仓库是这样的:

点击html页面出来的是代码,无法看到显示的网页效果

可是自己想看到自己的网页效果怎么办~~~
2.解决问题的方法:利用githubPage
第一步找到settings

第二步:点击后找到 GitHub Pages 点击Launch automatic page generator

接着点击右下角 Continue tolayouts

接着点击puhlish page

第三步: 回到我们的仓库whuchool,点击master出现了gh-pages

小胖友们看到这里一定会有疑问,预览到的是githubpages的效果,并不是你自己网页的效果,没关系
注意:我们生成githubPages的目的就是需要生成一个gh-pages分支(咱们正常情况下只有一个master分支)

第四步:将远程仓库重新克隆到本地
这里我用的git工具克隆,打开我们本地页面右键选择git Bath here

在git里面输入命令:

此时本地文件里面又多了一个同样名字的仓库文件

第五步:将分支切换到gh-Pages
$ cd whuschool(进入到你克隆仓库的本地文件夹)
$ git checkout gh-pages(将master分支切换到gh-pages分支上)

第六步:并重新上传到github上
将本地克隆的文件删了(e/yue/whuschool/whuschool里面的文件删了),然后把你想要展示demo页面相关的文件粘进去
接着,执行以下语句
$ git add . (将本地所有文件加到仓库里)
$ git commit -m "message" (设置提交信息)
$ git remote add origin git@github.com:lanyanjing-/whuschool.git(本地仓库链接远程仓库)
$ git push -u origin gh-pages (push文件到仓库中)
再打开我们的仓库选着gh-pages看到的就是我们自己的代码了

接下来点击setting,找到我们的gh-pages地址就可以预览了

我们想预览里面的index.html 就可以在地址栏输入https://lanyanjing-2016.github.io/whuschool/index.html
效果就出来了。。。。。
预览github里面的网页或dome的更多相关文章
- 预览github项目的html文件新方法
原文地址:→看过来 写在前面 关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的. 踩坑经历 搜出来的结果大概 ...
- 如何在线预览github上的html页面?
可以通过http://htmlpreview.github.io/这个网站,直接在线预览html页面. ↓ ↓ 可以发现:这个网站直接将github上的页面地址当做参数来传递.
- 最简单的手机预览WEB移动端网页的方法
网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执 ...
- 预览github上的html页面
譬如有个项目:https://github.com/wozhizui/ife/tree/DevTogether/task19 里面有html的示例文件index.html 我们点击进去看到的是一堆代码 ...
- 如何预览github中的html页面
在github里面的文件路径是https://github.com/gavin125/Sass-test/blob/master/html/index.html 那么我们需要在这个地址前面加上http ...
- 预览github代码
方法一:最简单的方法,在代码的url前面加上: http://htmlpreview.github.com/? 方法二: 使用Githubpages, 方法一有可能会修改css样式,不过方法二略复杂, ...
- 如何预览Github上的页面
参考链接:https://www.jianshu.com/p/46ddd926f005
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- github上预览Demo网页最简单的方法
github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...
随机推荐
- TODO:macOS上ThinkPHP5和Semantic-UI集成
TODO:macOS上ThinkPHP5和Semantic-UI集成 1. 全局安装 (on OSX via homebrew)Composer 是 homebrew-php 项目的一部分 2. 把X ...
- 【小计】新人Tostring前忘记Null判断的处理
ToString和string.Concat(可屏蔽Null的异常)性能相差不大,一些中小项目完全可以用Concat(新人容易忘记判断Null的情况,遇到太多了,所以建议重写tostring方法,内部 ...
- 如何利用pt-online-schema-change进行MySQL表的主键变更
业务运行一段时间,发现原来的主键设置并不合理,这个时候,想变更主键.这种需求在实际生产中还是蛮多的. 下面,看看pt-online-schema-change解决这类问题的处理方式. 首先,创建一张测 ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- javascript运动系列第一篇——匀速运动
× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...
- 验证管理员权限(C#)
参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...
- 编译器开发系列--Ocelot语言2.变量引用的消解
"变量引用的消解"是指确定具体指向哪个变量.例如变量"i"可能是全局变量i,也可能是静态变量i,还可能是局部变量i.通过这个过程来消除这样的不确定性,确定所引用 ...
- DBobjectsCompareScript(数据库对象比较).sql
use master goIF EXISTS (SELECT * FROM sysobjects WHERE id = OBJECT_ID(N'[func_CompareDBobjectsReColu ...
- git &github 快速入门
本节内容 github介绍 安装 仓库创建& 提交代码 代码回滚 工作区和暂存区 撤销修改 删除操作 远程仓库 分支管理 多人协作 github使用 忽略特殊文件.gitignore 1.gi ...
- python安装BeautifulSoup注意事项
好久没有写爬虫了,最近用Python的BeautifulSoup4.Scrapy分别对以前写的spider进行优化,发现python3.5后这些库变化了很多,遇到了许多问题,在这里做一下总结. 切换环 ...