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

xiayi 2017-03-21 15:39 原文

前言

前言

我在百度前端技术学院做任务时,需要把任务提交到GitHub上,方便别人在线查看我的任务网页。
我之前对GitHub不太了解,Google了一下GitHub入门教程,它们多是对GitHub机制的介绍、git工具的下载和使用等。但我需要的是,当我在JSBin在线写完html代码后,把它保存为一个本地html文件,我希望别人能通过网址直接查看我的成果。
因此这篇文章要解决的问题是把我的网页文件放到网站上,让别人可以在线查看。如何解决?通过GitHub Pages服务。

正文

首先你需要注册GitHub账号,创建仓库。(Google一下),这两步快进,我们介绍下面的重点:Github Pages服务。
Github Pages是一个托管页面,生成网址,方便别人在线查看的服务。Alt text

先说明以下几点:

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

好,开始动手!

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

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

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

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

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

Alt text

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

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


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

推荐阅读