GitIssue

利用 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文件中，一行一个域名

原文地址: https://github.com/eyasliu/blog/issues/2