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. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. 《Django By Example》第五章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...

  4. HTML渲染过程详解

    无意中看到寒冬关于前端的九个问题,细细想来我也只是对第一.二.九问有所了解,正好也趁着这个机会梳理一下自己的知识体系.由于本人对http协议以及dns对url的解析问题并不了解,所以这里之探讨url请 ...

  5. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  6. 两个 viewports 的故事-第二部分

    原文链接:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素的宽度是如何工作的,比如说 <ht ...

  7. JavaScript实现常用的排序算法

    ▓▓▓▓▓▓ 大致介绍 由于最近要考试复习,所以学习js的时间少了 -_-||,考试完还会继续的努力学习,这次用原生的JavaScript实现以前学习的常用的排序算法,有冒泡排序.快速排序.直接插入排 ...

  8. [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程

    怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html  ...

  9. [原] KVM 虚拟化原理探究 —— 目录

    KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...

  10. C# 用SoapUI调试WCF服务接口(WCF中包含用户名密码的验证)

    问题描述: 一般调试wcf程序可以直接建一个单元测试,直接调接口. 但是,这次,我还要测试在接口内的代码中看接收到的用户名密码是否正确,所以,单一的直接调用接口方法行不通, 然后就想办法通过soapU ...