为你的 GitHub 项目创建 GitHub Pages

2016-08-28 LEEMANCHIU

由于前阵子在整理自己 GitHub 里面的的文档，其中用到了 GitHub Pages 来为里面的一些可视化项目建立在线的 demo 展示，操作非常简单，所以想在这篇文章中分享出来，告诉大家如何为 GitHub 项目创建和使用 GitHub Pages。

什么是 GitHub Pages？

GitHub Pages 是一个静态站点主机服务。GitHub Pages 被设计用于在 GitHub 仓库中搭建个人、组织或项目的页面。你可以通过 GitHub 提供的 Automatic Page Generator 在线自动生成 GitHub Pages，当然也可以上传自定义创建的 html 页面，用来展示你的项目。

GitHub Pages 可分为下面两种基本类型：

用户个人或组织的页面。
项目页面。

它们非常相似，但却会有着一些比较重要的差别。对于用户个人和组织的页面站点，在 GitHub 上的默认域名为 username.github.io 或 orgname.github.io，并且站点的源文件由 master 分支管理。而用户的项目页面默认域名则为 username.github.io/projectname，站点的文件由 gh-pages 或 master 分进行管理，也可以存放在 master 分支的 /docs 文件夹中。接下来将针对 GitHub Pages 中的项目页面，介绍如何创建和使用。

项目页面（Project Pages）

项目页面与用户或组织的页面不一样的是，项目页面不会单独为站点代码创建出一个代码仓库，而是与自身项目的代码仓库放在一起。当项目页面创建完成后，用户在默认情况下可通过 http(s)://<username>.github.io/<projectname> 这个地址访问到你的 GitHub 项目页面。下面展示具体创建项目页面的过程。

从零开始自定义页面

这种方式是直接使用自己的编写的静态网页文件，使用这种方式的好处是，可自定义页面。对于我的那些静态可视化项目来说，相当于直接提供了一个在线托管，可以直接将项目文件放在分支内，那么在网上发布我的可视化 demo 就变得非常简单了。
推荐的具体步骤是创建一个新的 gh-pages 分支，这时候便将会把当前 master 分支中的内容复制到该分支里面。你可以通过命令行的方式或直接在 Github 中创建分支。

对于一些本身就是 Web 应用的项目，这时候用户已经可以通过前面提到的地址（username.github.io/projectname），在线访问该分支中的页面内容了。新建一个单独 gh-pages 分支的好处是，你能分开管理项目的开发版本和提供稳定展示的版本，并针对在线展示，对页面进行一些功能添加和优化修改，而不影响原来代码的开发。