[GitHub]第八讲：GitHub Pages

Github Pages 是 github 公司提供的免费的静态网站托管服务，用起来方便而且功能强大，不仅没有空间限制，还可以绑定自己的域名。在 https://pages.github.com/ 首页上可以看到很多用
Github Pages 托管的网站，很漂亮。另外很多非常著名的公司和项目也都用这种方式来搭建网站，如微软和 twitter 的网站，还有 谷歌的
Material Design 图标 网站。

分类和文档

到 https://pages.github.com/ 上，看到可以创建的网站有两类，一类是为自己或者是自己的组织创建站点，就是新建一个仓库，仓库的名字叫做，username.github.io
或者是 orgnizationname.github.io ，注意这里的 username 和 orgnizationname 要严格替换成你自己的用户名或者组织名，大小写也要区分，不然就会有问题。然后就往仓库里面放页面内容就行了。第二类是为项目创建网站，这个其实主要步骤都是一样的，只不过稍微比创建用户或组织网站复杂一点点，下面就以它为例来演示。

建一个项目网站的详细步骤在 https://pages.github.com/ 页面上是有的，如下图

选择 Project Site 然后下面有两项，一个是用自动生成器自动生成（ Generate a site ）一个漂亮的网站，另一个方案是自己手写，咱们选后者，因为这个方案比较能展示清楚整个 Github Pages 的使用原理。

一路沿着文档给出的步骤坐下来，网站就有了。下面实际来动手弄弄。

制作过程

首先来到项目首页，例如 https://github.com/happypeter/coco 。

上图中，点 master 按钮，弹出的输入框中输入 gh-pages ，注意拼写和大小写都不要写错。然后回车，就可以创建出新分支
gh-pages 了。如下图

上图中看到，现在项目以及切换到了 gh-pages 分支，如大箭头所指。虽然 coco 项目不是开源的，但是我们放到 gh-pages 分支上的内容是会被公开成网页的，这个要注意。点击大圆圈中的加号，来添加第一个文件。

名字一定要叫 index.html ，里面的内容就随便写了。保存之后，过几分钟就可以到 username.github.io/project 这个链接中看到页面了，对于这类的情况就是 http://happypeter.github.io/coco/ 这个链接就是网站的公网 url 了。后面可以继续添加 HTML，CSS 和 JS 进来，丰富网站功能。

上面这些还只是展示了 Github Pages 的托管静态页面的功能，但是其实故事并不停在这个地方。在https://pages.github.com/ 的最低端还可以看到下面三个事情：

最后一项“指南”大家可以用来参考。下面分别来介绍一下 Jekyll 和绑定自己域名的功能。

jekyll

Jekyll 是一个简单的，支持博客结构的，静态网站生成器。

上面这段话是 Jekyll 之父 Tom 在一篇文章叫做 blogging-like-a-hacker 中说的。

Jeklly 的具体使用本身跟 Git 没有直接联系，所以这里就不细说了。它主要能完成的功能有下面几项：

1. 页面不用 html 来写了，而用更为简单的 markdown 格式来写
2. 可以使用布局文件和片段文件
3. 代码高亮支持
4. 可以使用变量

详细内容参考 jekyll 官网 。 我也录了一期详细的 Jekyll 使用视频，放在我的好多视频网站上。

绑定自己的域名

有一个功能其实很重要，就是绑定自己的域名。想想如果有天 github 网站被依法和谐了，那怎么办？如果一开始就是用自己的域名，那就简单了，直接换一台服务器就好了。

绑定域名的具体的操作步骤在这里 不详细说明 。

到这里，如果有人访问 我自己的域名blogloading.com 就可以指向 github 了，但是 github pages 上面网站众多，如何能找到我自己的那个特定网站呢？要到 happypeter/gitbeijing项目的
gh-pages 分支，创建 CNAME 文件，里面的内容为

blogloading.com

这样操作结束，当然还要稍微等几个小时给 DNS 扩散。晚上做完上面的操作，第二天早*问blogloading.com 已经可以访问到我的网站了。

总结

喜欢分享是一个好程序员的标志，我给我的很多初学编程的朋友的建议就是，先学习如何用 Github Pages 搭建自己的个人网站，一来可以锻炼一些基本的网站开发技巧，二来可以建立一个分享的阵地。