github在線預覽項目（html）

抱歉！這是我抄的！感謝原博主！就感謝她吧！好方法要分享！我就是搬運工！

---

 

一：問題的所在

相信很多小胖友們在把自己的網頁上傳到github倉庫中，都會有一個疑問？是什么呢？
那就是上傳完網頁后，自己的倉庫中是這個樣子的

，點進去相應的html文件是出來的是代碼

可是自己想在網上看到自己倉庫中的demo(也就是網頁的效果)
下面博豬為您解答 (^~^)

---

二：解決問題的方法

1: 使用 Githubpages

比如我要上傳

按照如下四個步驟上傳到名為:flexSupplement的倉庫中

     git init (初始化本地倉庫)
     git add . （將本地所有文件加到倉庫里） git commit -m "message" （設置提交信息） git remote add origin [e-mail]:sunningcarryhaha/flexSupplement.git（本地倉庫鏈接遠程倉庫） git push -u origin master （push文件到倉庫中）

重頭戲來了喲！
我們現在點擊這個html文件，出現的效果全是代碼

，沒有咱們想要的demo效果
此時呢，應該植入咱們github爸爸的一個好東西，那就是-githubPages

第一步：找到Settings，點擊

Paste_Image.png

第二步：找到githubPages點擊none,切換到master branch，save保存

Paste_Image.png

save保存

Paste_Image.png

第三步：保存后出現了連接，點擊

Paste_Image.png

小胖友們看到這里一定會有疑問，預覽到的是githubpages的效果，並不是你自己網頁的效果，沒關系，我下面為你們解答

第四步：修改地址

我的GithubPages地址是這個：http://carryguan.me/flex-add
我要預覽flex-add中的fb1.html
我最后預覽的地址應該是這個：http://carryguan.me/flex-add/fb1.html
第九步：添加read.me
把類似下面代碼到read.me中

 flex-add
這是一個關於flexbox基礎的骰子布局
 [demo](http://carryguan.me/flex-add/fb1.html)

2: 增加路徑前綴（不建議用，會自動更改css的樣式）

在地址前加http://htmlpreview.github.io/?前綴（不建議用這個，會更改css樣式）
例如，你想預覽這個：
https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html

你在這個地址前加http://htmlpreview.github.io/?

最后預覽demo地址是：
http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html