如何在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>

這樣就能夠了。