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
知乎
简书
我的博客
微博