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的更多相关文章

  1. 预览github项目的html文件新方法

    原文地址:→看过来 写在前面 关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的. 踩坑经历 搜出来的结果大概 ...

  2. 如何在线预览github上的html页面?

    可以通过http://htmlpreview.github.io/这个网站,直接在线预览html页面. ↓    ↓ 可以发现:这个网站直接将github上的页面地址当做参数来传递.

  3. 最简单的手机预览WEB移动端网页的方法

    网上看了很多关于该问题的解决办法,各种各样的都有,个人也测试了一些, 最后总结出一个最简单且实用的方法. 1.安装nodejs node官网下载对应版本的nodejs,安装好了之后,在node.js执 ...

  4. 预览github上的html页面

    譬如有个项目:https://github.com/wozhizui/ife/tree/DevTogether/task19 里面有html的示例文件index.html 我们点击进去看到的是一堆代码 ...

  5. 如何预览github中的html页面

    在github里面的文件路径是https://github.com/gavin125/Sass-test/blob/master/html/index.html 那么我们需要在这个地址前面加上http ...

  6. 预览github代码

    方法一:最简单的方法,在代码的url前面加上: http://htmlpreview.github.com/? 方法二: 使用Githubpages, 方法一有可能会修改css样式,不过方法二略复杂, ...

  7. 如何预览Github上的页面

    参考链接:https://www.jianshu.com/p/46ddd926f005

  8. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  9. github上预览Demo网页最简单的方法

    github上预览Demo网页最简单的方法: 1.打开你github上demo网页index.html,效果如图 2.复制上面的页面地址,然后在该地址前加上 htmlpreview.github.co ...

随机推荐

  1. Be Better:遇见更好的自己-2016年记

    其实并不能找到好的词语来形容过去的一年,感觉就如此平淡的过了!没有了毕业的稚气,看事情淡了,少了一丝浮躁,多了一分认真.2016也许就是那句话-多读书,多看报,少吃零食多睡觉,而我更愿意说--Be B ...

  2. [ 高并发]Java高并发编程系列第二篇--线程同步

    高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...

  3. Apache Ignite之集群应用测试

    集群发现机制 在Ignite中的集群号称是无中心的,而且支持命令行启动和嵌入应用启动,所以按理说很简单.而且集群有自动发现机制感觉对于懒人开发来说太好了,抱着试一试的心态测试一下吧. 在Apache ...

  4. python黑魔法 -- 内置方法使用

    很多pythonic的代码都会用到内置方法,根据自己的经验,罗列一下自己知道的内置方法. __getitem__ __setitem__ __delitem__ 这三个方法是字典类的内置方法,分别对应 ...

  5. 《你不知道的JavaScript》整理(四)——原型

    一.[[Prototype]] JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用. var myObject = { a: 2 }; myObje ...

  6. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  7. redis成长之路——(一)

    为什么使用redis Redis适合所有数据in-momory的场景,虽然Redis也提供持久化功能,但实际更多的是一个disk-backed的功能,跟传统意义上的持久化有比较大的差别,那么可能大家就 ...

  8. 移动应用App测试与质量管理一

    测试工程师 基于Html的WebApp测试, 现在一些移动App混Html5 HTML5性能测试 兼容性 整理后的脑图 测试招聘 弱化大量技术考察 看重看问题的高度 看重潜力 测试经验 质量管理 专项 ...

  9. React Native Android gradle下载慢问题解决

    很多人会遇到 初次运行 react-native run android的时候 gradle下载极慢,甚至会失败的问题 如下图 实际上这个问题好解决的 首先 把对应版本的gradle下载到本地任意一个 ...

  10. iOS在导航栏上居中显示分段控件(UISegmentedControl)

    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:nil]; segmentedCont ...