如何利用GitHub GraphQL API开发个人博客?

作为一个程序员,搭建一个个人博客几乎是所有人的需求,一来比较酷,二来也可以记录自己的学习和生活总结。但如果你不是全栈工程师,实现这个需求还是有点麻烦。后端搭建一套现有的前端框架及前端写API都还是有一定门槛的,当然,如果你是大牛当我没说,哈哈哈!

下面,我将介绍一个特别简单的方法,甚至不用写代码,执行几个命令就可以搭建一个博客,就算你不是程序员,也是So easy。那就是:fork我的博客。为什么说fork我的博客就可以搭建一个博客呢?博客重要的是有内容,并且可以随时更新,而不是一个静态页。这就要用到本文的核心:GitHub GraphQL API,这是github提供的一个开放式的API。我们只需要将文章用Markdown写好后,放到博客项目Issues里面,然后通过这个api,获取我们的写的文章,再前端渲染,就可以啦!!是不是特别棒,都不要写API,也不用考虑文章存哪。下面我来介绍如何实现:

获取access token

请求GitHub GraphQL API,首先需要按照以下步骤在github申请一个access token:

右上角个人头像 > Settings > Developer settings > Personal access tokens > Generate new token

然后在Token description 写好关于这个token的描述,在Select scopes选择相应的权限,这里只需要user > read:user 就可以,点击Generate token按钮后会跳转到token列表页,这时需要马上把这个token记录下来,因为这是敏感数据,刷新后就没有了,不然得重新申请。

项目搭建

建议大家直接Fork我的项目 simbawus/blog,再修改相应配置,这样可以免去开发的成本,并且这个项目会持续更新,配置修改及启动可查看我项目的README。当然也可以fork后进行二次开发。也十分鼓励大家从零开始开发,也顺便练练手。

获取GraphQL API数据

关于GraphQL的介绍,可查看我些的这篇文章前端应该知道的GraphQL。

GitHub GraphQL API的文档并没有使用示例,如果之前没用过GraphQL API,还是有点懵的,下面我举三个常见的例子说明下,具体可以看我博客代码,别忘了Star噢~。

获取标签及相关issues

通常,我们会在博客首页设计一个有分类的文章列表,这就要求在发布Issue时需要选择对应的label。先看官方label文档:

Connections 里面有issues,所以在查询labels的同时,还可以查询issues。先列出要传输的数据data,核心也在这:

data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issues(orderBy:{field: UPDATED_AT, direction: DESC} , labels: null, first: 10, after: ${page}) {
        edges{
          cursor
          node{
            title
            updatedAt
            bodyText
            number
          }
        }
      }
      labels(first: 100){
        nodes{
          name
        }
      }
    }
  }`
};

repository代表查询指定的仓库,括号里的参数owner代表这个仓库的所有者,name代表仓库名称。issues表示要查询的issue列表,里面的参数表示这个列表的条件:orderBy为排序方式,根据更新时间UPDATED_AT和倒序DESC来,labels为null,说明查询的是所有issues,first表示一次查询返回的issues数量,after传上一个issue的id,可用来分页,最终这次请求拿到的数据结构如下,完整的请浏览器查看:

{
  "data": {
    "repository": {
      "issues": {
        "edges": {
          "0": {
            "cursor": "Y3Vyc29yOnYyOpK5MjAxOC0wNC0yNlQxMDoyNjoxNiswODowMM4S8hYL",
            "node": {
              "bodyText": "作为一个程序员...",
              "number": "11",
              "title": "如何利用GitHub GraphQL API开发个人博客?",
              "updatedAt": "2018-04-22T03:46:34Z",
            }
          }
        }
      },
      "labels": {
        "nodes": {
          "0": {
            "name": "JavaScript"
          }
        }
      }
    }
  }
}

搜索

search这个connections的文档写的让我一脸懵逼,摸索了好久才写出来,大家可以试着按官网文档写一下。

let data = {
  query: `query {
      search(query:"${keyWords} repo:simbawus/blog", type: ISSUE, first: 10) {
        issueCount
        edges{
          cursor
          node{
            ... on Issue {
              title
              number
              bodyText
              updatedAt
            }
          }
        }
      }
    }`
};

search的query参数类型为String!,表示一个非空的字符串,怎么也想不到要这么写才行吧?query:"${keyWords} repo:simbawus/blog"。node 这个fields的文档,看的也是二脸懵逼,还好想到es6的扩展符。

详情

最重要的是文章内容这部分了,传输数据比较简单:

let data = {
  query: `query {
    repository(owner:"simbawus", name: "blog") {
      issue(number: ${articleId}) {
        title
        updatedAt
        bodyHTML
      }
    }
  }`
};

请求直接返回一段HTML,问题是如何处理这段HTML,格式化并且高亮文章里面的代码。这里我用的是React的dangerouslySetInnerHTML和github的css库github-markdown-css,核心代码如下:

import 'github-markdown-css';
class ArticlePage extends React.Component {
  _renderHTML() {
    return { __html: this.state.bodyHTML };
  }
  render() {
    return ( 
      
); } }

结合GitHub GraphQL API开发个人博客的核心内容基本就这么多了,具体代码欢迎查看github:simbawus/blog,一起踩坑。

欢迎讨论,点个赞再走吧~

文章同步于以下社区,可以选一个关注我噢 。◕‿◕。

simbawu | github | segmentfault | 知乎 | | 掘金

你可能感兴趣的:(如何利用GitHub GraphQL API开发个人博客?)