如何利用GitHub GraphQL API開發個人部落格？

simbawu發表於2018-05-11
GithubAPI

作為一個程式設計師，搭建一個個人部落格幾乎是所有人的需求，一來比較酷，二來也可以記錄自己的學習和生活總結。但如果你不是全棧工程師，實現這個需求還是有點麻煩。後端搭建一套現有的前端框架及前端寫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 | 知乎 | 簡書 | 掘金

相關文章