Total Pageviews

Friday, 10 February 2017

搭建基于 Github issues 的静态博客程序github-issues-blog(很有创意)

 利用Github提供的API来实现一个静态博客,具体思路如下:

  1. 作者在 Github issues 上写文章(写 issues)
  2. 博客页面通过 JS Ajax 请求 Github API 来获取文章内容,进行页面的渲染
  3. 通过社会化评论插件实现评论功能
于是花了几天时间实现了这个设想, DEMO:http://wuhao.pub/
博客的 demo 内容是读取的玉伯博客的 issues。

1. 部署方法(方案1)

  1. fork 本项目,然后再新建一个用于存放 blog(issues)的 repo。 (fork 的项目是没有 issue 的,所以得新建个项目)
  2. 修改 gh-pages 分支下根目录的 config.js,填写好对应的博客名称,你自己的 github 用户名、对应项目名、多说 ID,保存。多说账号在这里申请http://duoshuo.com/
    var _config = {
        blog_name : '用于演示的博客',  // 博客名称
        owner: 'lifesinger',          // github 用户名
        repo: 'lifesinger.github.com',// 用于存放 blog(issues)的项目名
        duoshuo_id : 'hello1234',     // 在第三方评论插件多说申请站点的子域名
        // access_token: '',          // 请求量大时需要在 github 后台单独设置一个读取公开库的 token
        per_page: '5'                // 默认一页显示几篇文章
    }
    
保存后即可通过 http://用户名.github.io/github-issues-blog 访问。
注意:至少得有一次提交,github 的 pages 功能才会生效,直接 fork,没有任何修改是不行的。
如果你想绑定独立域名,修改根目录的 CNAME 文件,将其中的网址修改为你的域名,并把你的域名 CNAME 到 用户名.github.io 即可

2. 部署方法(方案2)

1.克隆本项目,修改根目录的 config.js
var _config = {
    blog_name : '用于演示的博客',   // 博客名称
    owner: 'lifesinger',          // github 用户名
    repo: 'lifesinger.github.com',// github 中对应项目名
    duoshuo_id : 'hello1234',     // 在第三方评论插件多说申请站点的子域名
    // access_token: '',          // 请求量大时需要在 github 后台单独设置一个读取公开库的 token
    per_page: '5'                // 默认一页显示几篇文章
}
2.填写好对应的博客名称,你自己的 github 用户名、对应项目名和多说 ID,保存。多说账号在这里申请http://duoshuo.com/
3.将所有文件上传到一个静态空间,打开首页即可看到效果。
接下来就是在对应的 repo 的 issues 下写文章(即 提交issue)了!

注: 本方法也需要fork本项目,我fork本项目后的项目地址为https://github.com/luckypoem/github-issues-blog.
还需修改上传到静态空间或vps的webserver的index.html如下:
把<div id="header"><h1><a href="#/" class="blog_title">用于演示的博客</a></h1>改为
<div id="header"><h1><a href="#/" class="blog_title">briteming的博客</a></h1>
然后绑定域名到index.html文件所在的目录。我在linux vps上的做法:
cd /usr/local
git clone https://github.com/wuhaoworld/github-issues-blog
cd github-issues-blog

root@AR:/usr/local/github-issues-blog# ls
CNAME  README.md  app.js  config.js  css  index.html  js  loading.gif
root@AR:/usr/local/github-issues-blog#
(可见/usr/local/github-issues-blog就是静态网站的根目录)
然后像上面所说,修改 config.js和app.js文件。

3. 提高 API 访问次数的配额

默认情况下你是用匿名权限访问 github 接口的, github 的访问限制是一个小时最多 60 次请求,这显然是不够的,如何提高限制呢?
  1. 到个人设置下的 Personal access tokens 页(https://github.com/settings/tokens ),如下图,点击右上角的 Generate new token。

     2.填写名称,只勾选 public_repo,然后保存,github 会生成一个可访问你公开项目的 access_token,将它填入到配置文件的 access_token 的值中,并取消注释。

    3.打开app.js,取消掉第16行的注释,保存即可。
    1.     // access_token:_config['access_token']
      }, 
       
      演示网站:http://gib.bright.biz.st,我是用方案2部署在自己的vps上的。 
      项目地址:https://github.com/wuhaoworld/github-issues-blog
       
      这个项目的缺陷是只要注册了github.com账号的人都可在你的项目里的issues里面留言
      (提交issues) ,这样,人人都可在你的博客里写文章了。

       

No comments:

Post a Comment