Github上显示出demo，直接显示html页面

如何在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。直接点击刚刚出现的连接，就可以跳转到你自己的页面了。现在是不是很方便了呢