通过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是一个托管页面,生成网址,方便别人在线查看的服务。通过Github Pages在线查看百度前端技术学院完成的任务成果

先说明以下几点:

  1. 托管页面的方式有两种,分别为用户/组织站点和项目站点,当前情况下比较适合项目站点托管方式。通过Github Pages在线查看百度前端技术学院完成的任务成果
  2. 用项目站点的形式托管我们的页面,就不能把页面放到master分支上。而用gh-pages分支。
  3. 对使用Github Pages服务来说,分支名是固定的,必须叫gh-pages。所以我们首先得创建分支gh-pages。

    NOTES;上述说明涉及的概念,比如分支等,可简单Google了解下,本文不做说明。

好,开始动手!

第一步在你创建的repository页面,点击下图的Branch分支通过Github Pages在线查看百度前端技术学院完成的任务成果

第二步在出现的面板中输入gh-pages,它会查找该分支,如果没有就创建。如下图:通过Github Pages在线查看百度前端技术学院完成的任务成果

第三步创建gh-pages分支后,点击进入该分支。此时的Branch应为Branch:gh-pages,点击Upload files通过Github Pages在线查看百度前端技术学院完成的任务成果

第四步拖拽你本地的html文件到面板上,并在下方Commit changes面板写上你本次修改的描述。就是描述你增加了个什么文件,为什么做此次更改。你可以这样写“小薇学院任务一”。最后,点击绿色按钮Commit changes提交通过Github Pages在线查看百度前端技术学院完成的任务成果

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

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

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

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


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

上一篇:【转】gcc中-pthread和-lpthread的区别


下一篇:鸟哥的Linux私房菜——基础学习篇 —— 笔记2