如何在github上实现预览

这个问题在网络上有不少答案，可是真正能解决的寥寥无几！接下来我就来尝试一下网络上疯传的几种方法。准备好了吗？我要开车了！！！

PS：如下实验上传到github的demo采起导入本地css,js和网络上css,js的方法进行测试

       demo目录结构

        ----preview.html

        ----preview.css

        ----preview.js

        ----jquery-1.11.1.min.js

PPS：若是你以为下面的流水帐又长又臭，那么，请直接拉到底部，就能够看到预览的真正实现方法了。

1、方法一使用GitHub & BitBucket HTML Preview网站

呐，也就是这个网站http://htmlpreview.github.io/

​

我一开始觉得这么简单就解决了，而后我兴致勃勃地把我上传到github上面的preview.html地址复制到这个网站上面

​

回车以后，心情就如清晨高高兴兴出门上班被滴到鸟屎通常！

​

bootstrap样式表好像加载进来了，bootstrap的js和本地的preview.js不见踪迹，本地的preview.css更是丈二和尚摸不着头脑，明明加载有问题可是div确实显示成红色的。

而后就找啊找啊，发现当我点击进一个css以后，有这个东西（Raw）

​

点击该按钮，发现竟然就是咱们网站加载资源的时候css等静态资源从服务器返回的格式

​

擦掉头顶上的鸟粪，对生活从新燃起了但愿。替换掉html里面本地资源preview.css、jquery-1.11.1.min.js和preview.js的地址，改为各自在Raw里面的地址

<link rel="stylesheet" type="text/css" href="./preview.css">
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./preview.js"></script>

改成

<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Nangxif/preview/master/preview.css">
<script type="text/javascript" src="https://raw.githubusercontent.com/Nangxif/preview/master/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/Nangxif/preview/master/preview.js"></script>

我在本地尝试了一下

​

而后就开始慌了，都还没在线上测试呢，就已经不行了……

硬着头皮仍是把项目推送到github而后再用GitHub & BitBucket HTML Preview尝试一下。

​

preview.css都没加载，为何div会被渲染成红色方块，此处尼克杨问号脸？？？？

而后就找啊找啊，发现了这个网站http://gitcdn.link/

将css和js的Raw连接粘贴到github.link中的输入框获得cdn连接

​

而后再上传到github仓库，用GitHub & BitBucket HTML Preview再试一下

​

这一波史诗般（屎通常）操做以后，终于给我幼小的心灵一丝慰藉，preview.css终于有返回的css了，可是其余的js呢？算了，这不是去幼儿园的车，我要回家。

2、前方高能

1.点击Settings，选择Options选项，下拉至GitHub Pages

​

​

2.点击Choose a theme 

​

选择MINIMAL，点击Select theme，而后自动跳转回Settings

3.这时咱们会发现GitHub Pages已经变成这样

​

点击红框里面的地址

​

看到404，对于经历过刚才的大风大浪的我来讲，心里已经毫无波动。

4.在地址后面加上preview.html就能够解决了

​

​

全部的文件都很清晰的加载进来了，不带任何无关的资源。

最后的最后，附带一句，其实HTML里面的静态资源连接都不用改

<link rel="stylesheet" type="text/css" href="./preview.css">
<script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./preview.js"></script>

这样就能够了。