如何利用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 ( 
      <div className = 'markdown-body' dangerouslySetInnerHTML = { this._renderHTML() } > </div>
    );
  }
}
複製代碼

結合GitHub GraphQL API開發我的博客的核心內容基本就這麼多了，具體代碼歡迎查看github：simbawus/blog，一塊兒踩坑。

歡迎討論，點個贊再走吧～

文章同步於如下社區，能夠選一個關注我噢 ｡◕‿◕｡

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