作為一個(gè)程序員废膘，搭建一個(gè)個(gè)人博客幾乎是所有人的需求，一來(lái)比較酷慕蔚，二來(lái)也可以記錄自己的學(xué)習(xí)和生活總結(jié)丐黄。但如果你不是全棧工程師，實(shí)現(xiàn)這個(gè)需求還是有點(diǎn)麻煩孔飒。后端搭建一套現(xiàn)有的前端框架及前端寫(xiě)API都還是有一定門(mén)檻的灌闺，當(dāng)然艰争，如果你是大牛當(dāng)我沒(méi)說(shuō)，哈哈哈桂对！
下面甩卓，我將介紹一個(gè)特別簡(jiǎn)單的方法，甚至不用寫(xiě)代碼蕉斜，執(zhí)行幾個(gè)命令就可以搭建一個(gè)博客逾柿，就算你不是程序員，也是So easy宅此。那就是：fork我的博客机错。為什么說(shuō)fork我的博客就可以搭建一個(gè)博客呢？博客重要的是有內(nèi)容父腕，并且可以隨時(shí)更新弱匪，而不是一個(gè)靜態(tài)頁(yè)。這就要用到本文的核心：GitHub GraphQL API侣诵，這是github提供的一個(gè)開(kāi)放式的API痢法。我們只需要將文章用Markdown寫(xiě)好后，放到博客項(xiàng)目Issues里面杜顺，然后通過(guò)這個(gè)api财搁，獲取我們的寫(xiě)的文章，再前端渲染躬络，就可以啦＜獗肌！是不是特別棒穷当，都不要寫(xiě)API提茁，也不用考慮文章存哪。下面我來(lái)介紹如何實(shí)現(xiàn)：
獲取access token
請(qǐng)求GitHub GraphQL API馁菜，首先需要按照以下步驟在github申請(qǐng)一個(gè)access token：
右上角個(gè)人頭像 > Settings > Developer settings > Personal access tokens > Generate new token
然后在Token description 寫(xiě)好關(guān)于這個(gè)token的描述茴扁，在Select scopes選擇相應(yīng)的權(quán)限，這里只需要user > read:user 就可以汪疮，點(diǎn)擊Generate token按鈕后會(huì)跳轉(zhuǎn)到token列表頁(yè)峭火，這時(shí)需要馬上把這個(gè)token記錄下來(lái)，因?yàn)檫@是敏感數(shù)據(jù)智嚷，刷新后就沒(méi)有了卖丸，不然得重新申請(qǐng)。
項(xiàng)目搭建
建議大家直接Fork我的項(xiàng)目 simbawus/blog盏道，再修改相應(yīng)配置稍浆，這樣可以免去開(kāi)發(fā)的成本，并且這個(gè)項(xiàng)目會(huì)持續(xù)更新，配置修改及啟動(dòng)可查看我項(xiàng)目的README衅枫。當(dāng)然也可以fork后進(jìn)行二次開(kāi)發(fā)嫁艇。也十分鼓勵(lì)大家從零開(kāi)始開(kāi)發(fā)，也順便練練手为鳄。
獲取GraphQL API數(shù)據(jù)
關(guān)于GraphQL的介紹裳仆，可查看我些的這篇文章前端應(yīng)該知道的GraphQL。
GitHub GraphQL API的文檔并沒(méi)有使用示例孤钦，如果之前沒(méi)用過(guò)GraphQL API，還是有點(diǎn)懵的纯丸，下面我舉三個(gè)常見(jiàn)的例子說(shuō)明下偏形，具體可以看我博客代碼，別忘了Star噢～觉鼻。
獲取標(biāo)簽及相關(guān)issues
通常俊扭，我們會(huì)在博客首頁(yè)設(shè)計(jì)一個(gè)有分類的文章列表，這就要求在發(fā)布Issue時(shí)需要選擇對(duì)應(yīng)的label坠陈。先看官方label文檔：
Connections 里面有issues萨惑，所以在查詢labels的同時(shí)，還可以查詢issues仇矾。先列出要傳輸?shù)臄?shù)據(jù)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代表查詢指定的倉(cāng)庫(kù)，括號(hào)里的參數(shù)owner代表這個(gè)倉(cāng)庫(kù)的所有者贮匕，name代表倉(cāng)庫(kù)名稱姐仅。issues表示要查詢的issue列表，里面的參數(shù)表示這個(gè)列表的條件：orderBy為排序方式刻盐，根據(jù)更新時(shí)間UPDATED_AT和倒序DESC來(lái)掏膏，labels為null，說(shuō)明查詢的是所有issues敦锌，first表示一次查詢返回的issues數(shù)量馒疹，after傳上一個(gè)issue的id，可用來(lái)分頁(yè)乙墙，最終這次請(qǐng)求拿到的數(shù)據(jù)結(jié)構(gòu)如下颖变，完整的請(qǐng)瀏覽器查看：
{
"data": {
"repository": {
"issues": {
"edges": {
"0": {
"cursor": "Y3Vyc29yOnYyOpK5MjAxOC0wNC0yNlQxMDoyNjoxNiswODowMM4S8hYL",
"node": {
"bodyText": "作為一個(gè)程序員...",
"number": "11",
"title": "如何利用GitHub GraphQL API開(kāi)發(fā)個(gè)人博客？",
"updatedAt": "2018-04-22T03:46:34Z",
}
}
}
},
"labels": {
"nodes": {
"0": {
"name": "JavaScript"
}
}
}
}
}
}
搜索
search這個(gè)connections的文檔寫(xiě)的讓我一臉懵逼伶丐，摸索了好久才寫(xiě)出來(lái)悼做，大家可以試著按官網(wǎng)文檔寫(xiě)一下。
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參數(shù)類型為String!哗魂，表示一個(gè)非空的字符串肛走，怎么也想不到要這么寫(xiě)才行吧？query:"${keyWords} repo:simbawus/blog"录别。node 這個(gè)fields的文檔朽色，看的也是二臉懵逼邻吞，還好想到es6的擴(kuò)展符。
詳情
最重要的是文章內(nèi)容這部分了葫男，傳輸數(shù)據(jù)比較簡(jiǎn)單：
let data = {
query: `query {
repository(owner:"simbawus", name: "blog") {
issue(number: ${articleId}) {
title
updatedAt
bodyHTML
}
}
}`
};
請(qǐng)求直接返回一段HTML抱冷，問(wèn)題是如何處理這段HTML，格式化并且高亮文章里面的代碼梢褐。這里我用的是React的dangerouslySetInnerHTML和github的css庫(kù)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>
);
}
}
結(jié)合GitHub GraphQL API開(kāi)發(fā)個(gè)人博客的核心內(nèi)容基本就這么多了，具體代碼歡迎查看github：simbawus/blog盈咳，一起踩坑耿眉。
歡迎討論，點(diǎn)個(gè)贊再走吧～
文章同步于以下社區(qū)鱼响，可以選一個(gè)關(guān)注我噢 ?????
simbawu | github | segmentfault | 知乎 | 簡(jiǎn)書(shū) | 掘金
