Github-README 中展示demo

2017年更新,现在github再master分支直接就可以操作,所以我改了这篇文章


young
  • 问题所在?
  • 解决办法?
  • 博主建议?

一:问题的所在

相信很多小胖友们在把自己的网页上传到github仓库中,都会有一个疑问?是什么呢?
那就是上传完网页后,自己的仓库中是这个样子的

,点进去相应的html文件是出来的是代码

可是自己想在网上看到自己仓库中的demo(也就是网页的效果)
下面博猪为您解答 (~)


二:解决问题的方法

1: 使用 Githubpages

比如我要上传

按照如下四个步骤上传到名为:flexSupplement的仓库中

     git init (初始化本地仓库)
     git add .  (将本地所有文件加到仓库里)
     git commit -m "message" (设置提交信息)
     git remote add origin   git@github.com: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样式)
例如,你想预览这个:
</br>https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html
</br>
你在这个地址前加http://htmlpreview.github.io/?
</br>
最后预览demo地址是:
http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html


三:博主感想

希望有更多小胖友提出宝贵意见,若有关于前端的问题,或者关于大学方面的感想可以私聊我(~):
github
知乎
简书
个人博客
微博

推荐阅读更多精彩内容