如何在github上传后显示出html页面
学习前端的童靴都特想知道如何在github上显示出自己设计的页面,之前研究了一些时间,也成功了。最近又想上传一些页面试试,发现之前的方法不管用了。下面来记录一下今天的成果。防止自己忘记。。。。如果你发现setting中找不到相应的按钮,请直接翻到最后查看更新补充的版本。
一,出现的问题
很多童靴们用git上传自己的代码后,发现是这样子滴。跟自己想象中有丢丢不同。点击html里面是一堆代码.往下看。
二,在仓库中看到自己的网页
网上有很多教你怎么上传代码到仓库的教程,这里忽略~~~点开仓库,看到这样的界面
第一步、点击红色箭头的地方setting。
找到GitHub Pages板块下面的 launch autommatic page generator,如下
第二步、往下翻找到绿色按钮
第三步、接下来找一个自己喜欢的主题,再点击绿色按钮publish page,就成了下面这样子。中间的那个网址就是接下来可以访问到你网页的地址了。
这样就自动生成了一个gh-pages分支
但是点击网址预览到的是githubpages的效果,并不是你自己网页的效果。往下看。
第四步、查看分支,同上面的方法点击setting,找到GitHub Pages板块,看这里多了一个gh-pages分支(咱们正常情况下只有一个master分支)
第五步:将远程仓库克隆到本地
$ git clone git@github.com:wjq66/shiyan.git (clone后面的在仓库的页面直接复制)
第六步:将分支切换到gh-Pages
$ cd shiyan (进入到你克隆仓库的本地文件夹)
$ git checkout gh-pages(将master分支切换到gh-pages分支上)
第七步:重新上传到github上
这时打开克隆到本地的文件夹,发现里面的内容变成了这样
之后把你自己的网页拉进来并把主页面改名为index,然后在重新上传。
git add . (将本地所有文件加到仓库里)
git commit -m “message” (设置提交信息)
git remote add origin git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库)
git push -u origin gh-pages (push文件到仓库中)
所以现在我的页面地址就是 https://wjq66.github.io/shiyan/了。
三、顺便把我之前藏到空间里面的那个比较low的拿出来分享。
第一步:在git for windows 创建新的仓库。
第二步、打开settings,有一个Github Pages 的设置,点击Launch automatic page generator(启动自动页面生成器)。
点击页面最后的continue to layouts,然后就可以进入设置你的页面主题,你会说这不是我的网页呀,别急嘛,先选择一个主题,点击 publish pages。
第三步、这个时候会出现你的网页的网址,也就是下图的 http://jiayili.github.io/test.复制打开这个网址,你看到了什么?
第四步、 接下来。自己的方法。电脑上已经安装好了git for windows (是软件,比较好用),创建一个branch(分支)-gh-pages,
第五步、在本地仓库的文件位置添加自己的代码,并且上传到gh-pages这个分支上去。(记得把自己的网页改名为index)
第六步、打开网址,出现自己的页面。 https://wjq66.github.io/1/ ;
第七步、成功
2017年5月15日补充:
最新打开github设置页面,发现找不到对应的按钮了(嘿嘿,暴露了我记忆不好,每次写东西都要翻看),不过github现在好像变得更简单了,不用设置分支就可以了:
1、从上面打开setting之后开始说吧:打开setting之后,找到下面这个按钮
2:选择一个主题,点击绿色的确定键,跳转到如下界面:,注意看这里多出一个地址
3、这时只要你的仓库有一个index.html。直接点击刚刚出现的连接,就可以跳转到你自己的页面了。现在是不是很方便了呢