Github-README 中展示demo

 
 

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

   
   

    
    

     
     
    
    
   
   
  
  
  
  
问题所在？
解决办法？
博主建议？
  
  
一：问题的所在

  
  
相信很多小胖友们在把自己的网页上传到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样式）
例如，你想预览这个：
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
 
 
作者：sunningcarry
链接：https://www.jianshu.com/p/75e30889e70a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。