[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 没有直接联系,所以这里就不细说了。它主要能完成的功能有下面几项:
- 页面不用 html 来写了,而用更为简单的 markdown 格式来写
- 可以使用布局文件和片段文件
- 代码高亮支持
- 可以使用变量
详细内容参考 jekyll 官网 。 我也录了一期详细的 Jekyll 使用视频,放在我的好多视频网站上。
绑定自己的域名
有一个功能其实很重要,就是绑定自己的域名。想想如果有天 github 网站被依法和谐了,那怎么办?如果一开始就是用自己的域名,那就简单了,直接换一台服务器就好了。
绑定域名的具体的操作步骤在这里 不详细说明 。
到这里,如果有人访问 我自己的域名blogloading.com 就可以指向 github 了,但是 github pages 上面网站众多,如何能找到我自己的那个特定网站呢?要到 happypeter/gitbeijing项目的 gh-pages 分支,创建 CNAME 文件,里面的内容为
blogloading.com
这样操作结束,当然还要稍微等几个小时给 DNS 扩散。晚上做完上面的操作,第二天早上访问blogloading.com 已经可以访问到我的网站了。
总结
喜欢分享是一个好程序员的标志,我给我的很多初学编程的朋友的建议就是,先学习如何用 Github Pages 搭建自己的个人网站,一来可以锻炼一些基本的网站开发技巧,二来可以建立一个分享的阵地。