利用 github pages 与 github api 搭建博客

@eyasliu 2016-05-08 15:59:32发表于 eyasliu/blog 前端服务器

使用github pages

自己维护博客服务器,麻烦,索性直接找个现成的稳定的博客平台,github pages成为首选,这里有几个思路

  • 使用github pages,编写静态网页
  • 使用github pages 与 静态网页生成工具,需要本地电脑编写文章
  • 使用github pages 与 自建后端服务器,需要另外维护一个后端服务器
  • 使用issues 写文章,issues页面就是一个博客网站
  • 使用github pages 与 github api,使用issues写文章

使用github pages,编写静态网页

有很多文档网站是使用这种方式搭建,一般是作为demo页面或者单页文档页面,否则页面稍微一复杂,就变得非常难以维护

使用github pages 与 静态网页生成工具

有很多博客网站与文档网站都是使用这种方式,这是一种最简单最方便的方式,现在流行的工具有 hexo 和 Jekyll 等,这种方式还要在本地维护一个仓库,生成静态页面后再上传,操作过于繁琐,而且每个页面之间切换都需要重新载入所有资源,网页数据传输量较大

工具

使用github pages 与 自建后端服务器

在github pages编写一个单页面应用,数据通过跨域请求来自于自建的服务器,这种方式有三大难点:前端、后端、服务器

前端

需要编写一个单页面应用,这对技术需要一定的水平,基本很少有开源工具

后端

需要后端服务,这可以使用现成工具提供api,比如wordpress、drupal、ghost等

使用issues 写文章

这种方式简单粗暴,直接在issues写文章,评论、标签、提醒神马的都有了,现在其实很流行这种方式,看看这几个博客,都几千个star了

要说它的缺点嘛,就是人人都可以往你博客提交文章,界面千篇一律,而且也不怎么好看

服务器

这个问题很严重,问题来了,你都有自建的服务器了,还要用github pages干嘛呢,哪天自建服务器挂了,博客照样挂。

这种方式可以使用域名来提升逼格。

使用github pages 与 github api

这种方案与上一种对比起来其实没多大区别,唯一的区别就是自建服务换成了github的另一个服务,就是说,github帮我们建好了。
github api:https://developer.github.com/v3/

github pages

github Pages可以被认为是用户编写的、托管在github上的静态网页,如下方式可开启:

  • 当仓库名称为{username}.github.io时自动生成github page首页,页面地址为 http://{username}.github.io
  • 当仓库中有 gh-pages分支时会自动生成github pages,访问地址为:http://{username}.github.io/{reponame}

github api

github 提供了一系列api可让用户操作数据,详细内容可到api官网查看

github pages + github api搭建博客

现在讲解实现github pages + github api的思路,首先我们需要一个单页面应用,应用托管于{username}.github.io仓库。然后我们需要知道如何通过api 获取 issues 内容

单页面

这个单页面很简单,大概只需要两个页面:列表与详情,应用必须有路由系统,而且应当只使用 hash 路由。

issues api

官方文档: https://developer.github.com/v3/issues/

列出了操作issues接口,我们暂时只用到 查看 功能。

列出issues
GET https://api.github.com/repos/eyasliu/blog/issues

每条issues都有详细信息,包括标题、内容、标签、用户,时间等等信息。

可以使用查询过滤或排序issues,比如以最近评论时间排序

GET https://api.github.com/repos/eyasliu/blog/issues?filter=updated
获取单条issues
GET https://api.github.com/repos/eyasliu/blog/issues/1

注意:这里的1是指的是issues对象中的number而不是id

获取评论

GET https://api.github.com/repos/eyasliu/blog/issues/1/comments
获取labels

labels可用作与 分类 或 标签 功能

GET https://api.github.com/repos/eyasliu/blog/labels

域名解析

生成github pages 后有一个二级域名:username.github.io,我们也可以使用自己的域名,方法:

  1. 在仓库根目录新建文件,命名为 CNAME
  2. 文件内容第一行写上域名(不要包含 http:// 和 https:// ),保存并上传至仓库
  3. 在域名解析后台添加cname记录,值为 username.github.io

过两分钟可生效。

经过测试,能绑定多个域名,在CNAME文件中,一行一个域名