##一:问题的所在 相信很多小胖友们在把自己的网页上传到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

####第二布:找到githubPages

####第三步:预览githubPages

小胖友们看到这里一定会有疑问,预览到的是githubpages的效果,并不是你自己网页的效果,没关系,我下面为你们解答

####第四步:查看你的分支

注意:我们生成githubPages的目的就是需要生成一个gh-pages分支(咱们正常情况下只有一个master分支)

####第五步:将远程仓库克隆到本地

$ git clone git@github.com:sunningcarryhaha/flexSupplement.git

####第六步:将分支切换到gh-Pages

  $ cd flexSupplement (进入到你克隆仓库的本地文件夹)
  $ git checkout gh-pages(将master分支切换到gh-pages分支上)

####第七步:并重新上传到github上

将本地克隆的文件删了,只留下.git,然后把你想要展示demo页面相关的文件粘进去 接着,执行以下语句

 git add . (将本地所有文件加到仓库里) 
 git commit -m "message" (设置提交信息) 
 git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库) 
 git push -u origin gh-pages (push文件到仓库中)

####第八步:修改地址 我的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

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

原文链接:http://www.jianshu.com/p/75e30889e70a