Github-README 中展示demo

作者: sunningcarry | 来源:发表于2016-07-15 13:16 被阅读14109次

    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
    知乎
    简书
    个人博客
    微博

    相关文章

      网友评论

      • 飘零之雪:点赞点赞
      • af0fb28e625b:谢谢大佬的分享,尝试成功!之前一直用的码云,现在转战github~
      • 宠爱小幸福:请问这个是只能运行html文件 不能运行 js 文件吗? json 数据请求好像也没展示出来。。。。。
        宠爱小幸福:https://chengming9731.github.io/tongchengban/tcb.html 这是我的
      • BarryLiu1995:你好,请问项目名是否需要github.io 后缀
        sunningcarry:@BarryLiu1995 原理不一样
        BarryLiu1995:@sunningcarry 但是有人说“项目名必须 .github.io 后缀,否则不能自动解析index.html首页,需要手动补全”
        sunningcarry:@BarryLiu1995 不需要
      • 可乐汤圆:你好,按照你的方法,css效果加载不出来,请问该怎么解决呢?
        可乐汤圆:@sunningcarry 哇,谢谢博主回复,我后来重新试了下,可以加载css文件,可能是一开始代码有问题,已经解决啦~
        sunningcarry:正常情况下引入了css,不会加载不出来的
      • Y_4ccb:为什么我随机的save跟你的不一样?
        sunningcarry:@Y_4ccb 我的版本老
      • 鸭梨山大哎:不错呦!
      • 堂卿:博主厉害:+1: 现在不用新建gh-pages分支了,放在master分支就可以了
        06b8579c8ff0:对的,的确不要新建gh-pages分支了,网上其他的教程太老了。但是如果是一个项目呢,使用了一些框架,不知怎么设置预览功能
        堂卿: @carry_guan 😁
        sunningcarry:@堂卿 哇,谢谢你的提醒
      • abe35999844f:我从第五步开始不明白了 :sob:
        sunningcarry:@猪猪猪惠婷 第五步就是在你电脑cmd中输入命令,克隆仓库,仓库地址就是你github上生成的地址
      • 饥人谷_猴丽莎白:已解决,原来git checkout -b gh-pages origin/gh-pages
        sunningcarry:@饥人谷_猴丽莎白 那就好:smile:
      • 饥人谷_猴丽莎白:为什么到第六部切换不到gh-pages分支呢?显示的错误是error: pathspec 'gh-pages' did not match any file(s) known to git.
      • sunningcarry:首先你有一个文件仓库(我这里文件仓库名字是 flex-add),你想预览文件仓库下的某个html文件(我这里预览flex-add文件里的fb1.html),所以我预览demo的地址就是http://carryguan.me/flex-add/fb1.html:blush:
      • SweetMelon: :+1: 赞!!!按照你的步骤完成了。以前用的是另外一种方法,不知道为什么现在不管用了。
        sunningcarry:@SweetMelon 不客气,能帮助到别人我会很开心的

      本文标题: Github-README 中展示demo

      本文链接:https://www.haomeiwen.com/subject/mlhejttx.html