作為一個程序員，搭建一個個人博客幾乎是一切人的需求，一來比較酷，二來也能夠紀錄本身的進修和生涯總結。但假如你不是全棧工程師，完成這個需求照樣有點貧苦。後端搭建一套現有的前端框架及前端寫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，一同踩坑。
迎接議論，點個贊再走吧～
文章同步於以下社區，能夠選一個關注我噢 ｡◕‿◕｡
