预览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 ...
随机推荐
- redis 学习笔记(1)
redis持久化 snapshot数据快照(rdb) 这是一种定时将redis内存中的数据写入磁盘文件的一种方案,这样保留这一时刻redis中的数据镜像,用于意外回滚.redis的snapshot的格 ...
- CSS垂直居中的11种实现方式
今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...
- Javascript实用方法二
承接上一篇, Object keys object的keys方法能够获取一个给定对象的所有键(key/属性名)并以数组的形式返回.这个方法可以用于键的筛选.匹配等. var basket = { st ...
- SharpMap简析
1.背景 因为项目需求,需要基于开源项目来对SHP进行相关操作.涉及到的主要功能就是加载SHP读取其中的属性信息和几何信息.于是选择了Sharpmap来进行,在使用中对其相关功能做了初步了解,做个总结 ...
- Solr 排除查询
前言 solr排除查询也就是我们在数据库和程序中经常处理的不等于,solr的语法是在定语前加[-].. StringBuilder sbHtml=new StringBuilder(); shBhtm ...
- [数据结构]——堆(Heap)、堆排序和TopK
堆(heap),是一种特殊的数据结构.之所以特殊,因为堆的形象化是一个棵完全二叉树,并且满足任意节点始终不大于(或者不小于)左右子节点(有别于二叉搜索树Binary Search Tree).其中,前 ...
- 记录在Windows上安装和使用Oracle数据库过程中的坑
1.安装Oracle Oracle软件是免费的,可以去官网下载相应的安装包.但是如果用于商业用途需要购买License.官网上针对各种平台,32位和64位都有,如果在Windows一般会下载到两个文件 ...
- Jquery对网页高度、宽度的操作
Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...
- 微信官方开源UI库-WeUI
概述 WeUI是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog.toast.article.icon等各式元素 ...
- Vue.js——60分钟webpack项目模板快速入门
概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...