通过Github Pages在线查看百度前端技术学院完成的任务成果

前言
.note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;}

.note-content img {border: 0.3em solid #e0dfcc; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;}
.note-content .hljs {display: block; overflow-x: auto; padding: 0.5em; background: #23241f;}
.note-content .hljs, .note-content
.hljs-tag, .note-content
.hljs-subst {color: #f8f8f2;}
.note-content .hljs-strong, .note-content
.hljs-emphasis {color: #a8a8a2;}
.note-content .hljs-bullet, .note-content
.hljs-quote, .note-content
.hljs-number, .note-content
.hljs-regexp, .note-content
.hljs-literal, .note-content
.hljs-link {color: #ae81ff;}
.note-content .hljs-code, .note-content
.hljs-title, .note-content
.hljs-section, .note-content
.hljs-selector-class {color: #a6e22e;}
.note-content .hljs-strong {font-weight: bold;}
.note-content .hljs-emphasis {font-style: italic;}
.note-content .hljs-keyword, .note-content
.hljs-selector-tag, .note-content
.hljs-name, .note-content
.hljs-attr {color: #f92672;}
.note-content .hljs-symbol, .note-content
.hljs-attribute {color: #66d9ef;}
.note-content .hljs-params, .note-content
.hljs-class .hljs-title {color: #f8f8f2;}
.note-content .hljs-string, .note-content
.hljs-type, .note-content
.hljs-built_in, .note-content
.hljs-builtin-name, .note-content
.hljs-selector-id, .note-content
.hljs-selector-attr, .note-content
.hljs-selector-pseudo, .note-content
.hljs-addition, .note-content
.hljs-variable, .note-content
.hljs-template-variable {color: #e6db74;}
.note-content .hljs-comment, .note-content
.hljs-deletion, .note-content
.hljs-meta {color: #75715e;}

前言

我在百度前端技术学院做任务时，需要把任务提交到GitHub上，方便别人在线查看我的任务网页。

我之前对GitHub不太了解，Google了一下GitHub入门教程，它们多是对GitHub机制的介绍、git工具的下载和使用等。但我需要的是，当我在JSBin在线写完html代码后，把它保存为一个本地html文件，我希望别人能通过网址直接查看我的成果。

因此这篇文章要解决的问题是把我的网页文件放到网站上，让别人可以在线查看。如何解决？通过GitHub Pages服务。

正文

首先你需要注册GitHub账号，创建仓库。（Google一下），这两步快进，我们介绍下面的重点：Github Pages服务。

Github Pages是一个托管页面，生成网址，方便别人在线查看的服务。

先说明以下几点：

1. 托管页面的方式有两种，分别为用户/组织站点和项目站点，当前情况下比较适合项目站点托管方式。
2. 用项目站点的形式托管我们的页面，就不能把页面放到master分支上。而用gh-pages分支。
3. 对使用Github Pages服务来说，分支名是固定的，必须叫gh-pages。所以我们首先得创建分支gh-pages。
   
   NOTES;上述说明涉及的概念，比如分支等，可简单Google了解下，本文不做说明。

---

好，开始动手！

第一步在你创建的repository页面，点击下图的Branch分支

第二步在出现的面板中输入gh-pages，它会查找该分支，如果没有就创建。如下图：

第三步创建gh-pages分支后，点击进入该分支。此时的Branch应为Branch:gh-pages,点击Upload files

第四步拖拽你本地的html文件到面板上，并在下方Commit changes面板写上你本次修改的描述。就是描述你增加了个什么文件，为什么做此次更改。你可以这样写“小薇学院任务一”。最后，点击绿色按钮Commit changes提交

最后回到该仓库，切换到gh-pages分支。发现在这个分支上，我们的项目源码包含了刚才拖拽上传的html文件。其实在这个时候，我们的个人网站其实就已经搭建好了，只不过我们现在不知道网址是什么。根据GitHub Pages的规范，这个网址是固定的。我们来编辑网址。

注意： 网址命名规范：https://用户名.github.io/项目名/文件名 例如https://panni.github.io/ife.baidu-task/task1-1.html

这时你就可以把网址分享给别人，让别人来看你的成果了！

---

参考资料：好奇猫-Github Pages服务、慕课-搬进GitHub