Github-README 中展現demo

法一：http://htmlpreview.github.io/?

 

法二重頭戲：Github-README 中展現demo

（http://www.liantu.com/ 在線生成二維碼 分享到朋友圈不會報錯）

來源：http://www.jianshu.com/p/75e30889e70a  ，有刪改

重頭戲來了喲！
咱們如今點擊這個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

三：博主感想

但願有更多小胖友提出寶貴意見,如有關於前端的問題，或者關於大學方面的感想能夠私聊我(^~^)：
github
知乎
簡書
我的博客
微博