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

fireflow 发布于2019-08-22 16:45 / 2979人阅读

摘要：获取标签及相关通常，我们会在博客首页设计一个有分类的文章列表，这就要求在发布时需要选择对应的。这里我用的是的和的库，核心代码如下结合开发个人博客的核心内容基本就这么多了，具体代码欢迎查看，一起踩坑。

作为一个程序员，搭建一个个人博客几乎是所有人的需求，一来比较酷，二来也可以记录自己的学习和生活总结。但如果你不是全栈工程师，实现这个需求还是有点麻烦。后端搭建一套现有的前端框架及前端写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 | 知乎 | 简书 | 掘金

云服务器 GPU云服务器如何制作个人博客个人博客域名如何选择如何开发api 个人如何开发小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94624.html

前端应该知道的GraphQL

摘要：什么是先贴官网英文中文。所有的操作必须指明到最底层的，并且返回值为标量，以确保响应结果的结构明白无误。对于前端来说，在查询的时候基本都要了解上面说的这几个概念，具体应用可参见我的这篇文章如何利用开发个人博客。本文主要结合GitHub GraphQL API，从前端使用者的角度来谈GraphQL，没有GraphQL项目的同学可以拿GitHub GraphQL API练手，具体代码可参见...

lansheng228 2019-08-22 16:45 评论0 收藏0
为什么我选择用 Github issues 来写博客

摘要：为什么不选择其他方案在文章的开头我有提到，我曾经尝试过用，，自行搭建服务等途径去尝试维护博客。但这些尝试的结果均不合我意，最后无疾而终。我们使用作为博客平台，也就是相当于管理后端。showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adf79473dbdf59); 对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。而作为一个 Web 开发...

gnehc 2019-05-23 12:20 评论0 收藏0
为什么我选择用 Github issues 来写博客

摘要：为什么不选择其他方案在文章的开头我有提到，我曾经尝试过用，，自行搭建服务等途径去尝试维护博客。但这些尝试的结果均不合我意，最后无疾而终。我们使用作为博客平台，也就是相当于管理后端。 showImg(https://segmentfault.com/img/remote/1460000019265125?w=700&h=420); 对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。...

Scliang 2019-08-26 13:54 评论0 收藏0
框架的游戏：2019 年 JavaScript 流行趋势

摘要：年新星调查中显示，越来越流行，其热度已经逐渐超过了。及其框架位于全球最受欢迎使用最广泛的技术榜榜首。本文转载自框架的游戏年流行趋势英文原文JavaScript 生态系统复杂多变，各种框架让人眼花缭乱。究竟孰优孰劣，如今的发展趋势是怎样的，用人单位又需要怎样的人才？本文站在一个中立者的角度，客观分析了当前这场框架的游戏中，JavaScript 的流行趋势。 Javascript 的生态环境让我...

mrcode 2019-05-21 19:19 评论0 收藏0
专治前端焦虑的学习方案

摘要：不过今天我希望能够更进一步，不仅仅再抱怨现状，而是从我个人的角度来给出一个逐步深入学习生态圈的方案。最后，我还是想提到下对于的好的学习方法就是回顾参照各种各样的代码库，学习人家的用法与实践。本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮，顺手翻译了一波。本文从属于笔者的Web Frontend Introduc...

codeGoogle 2019-08-21 14:41 评论0 收藏0