预览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 ...
随机推荐
- Solr_全文检索引擎系统
Solr介绍: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中. Solr ...
- TODO:Golang指针使用注意事项
TODO:Golang指针使用注意事项 先来看简单的例子1: 输出: 1 1 例子2: 输出: 1 3 例子1是使用值传递,Add方法不会做任何改变:例子2是使用指针传递,会改变地址,从而改变地址. ...
- lua执行字节码的过程介绍
前面一篇文章中介绍了lua给下面代码生成最终的字节码的整个过程,这次我们来看看lua vm执行这些字节码的过程. foo = "bar" local a, b = "a& ...
- 在ubuntu16.10 PHP测试连接MySQL中出现Call to undefined function: mysql_connect()
1.问题: 测试php7.0 链接mysql数据库的时候发生错误: Fatal error: Uncaught Error: Call to undefined function mysqli_con ...
- History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
- C# 生成验证码图片时消除锯齿
引言 基于生成图片实现了一个手机号转图片的需求. 内容也很简单,直接用手机号生成一个png图片.就是为了背景透明以便其他地方调用. 有无锯齿主要依靠一句代码:g.TextRenderingHint= ...
- 小兔Java教程 - 三分钟学会Java文件上传
今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...
- HTML+CSS 项目总结
在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性. 这个星期老师给我们布置了一个PC端的实战项目,并且要求在3-4天内完成,我不惜废寝忘食,在紧迫的时间内大致地完成了,但是有些效果不能 ...
- 14门Linux课程,打通你Linux的任督二脉!
Linux有很多优点:安全.自主.开源--,也正是这些优点使得很多人都在学Linux. 虽说网上有大把的Linux课程资源,但是对很多小白来说网上的课程资源比较零散并不适合新手学习. 正因为此,总结了 ...
- welcome to my cnblog
博客园总算开通了,以后就分享自己的东西,和大家交流.