如何为你的 Github 博客添砖加瓦
??點擊上方?好好學java?，選擇?星標?公眾號
重磅資訊、干貨，第一時間送達 今日推薦：Java實現QQ登錄和微博登錄個人原創+1博客：點擊前往，查看更多 鏈接：https://segmentfault.com/a/1190000022112839在使用 Github 作為博客很長一段時間在發愁，主要是有以下幾個痛點：
每次寫文章都要打開編輯器，感覺自己不是在寫文章而是在寫代碼
寫完只是想打個草稿，都要用 git 提交以下更改，更像寫代碼了
不能隨時隨地的編輯，有時候我想用 ipad 修改點什么都不可以
由于以上幾個痛點，每次寫 Blog 感覺自己都需要費很大的力氣，還不如自己寫個筆記就過去了。
但是有些好的東西總是要分享出來才會有價值啊，于是我開始尋找 Github Blog 的 CMS 解決方案。
先來一張效果圖。
blog_adminnetlifycms 與 jekyll-admin 的對比
剛開始我找到的是 jekyll-admin 這款 jekyll 的 CMS，因為本人用的是 jekyll。但是發現這款 jeklly 還需要一臺服務器，也就是他編輯的只是服務器上的文件。
當初選擇使用 Github 作為 Blog 就是想在沒有個人服務器的情況下 Blog 依然能工作。雖然目前是利用 CI 部署在自己的服務器上方便國內的搜索引擎爬蟲進行爬取，目的是優化 SEO，提高國內的訪問速度。但是還是想要一個不需要自己部署后端的 CMS。
于是我就找到了 netlifycms，經過配置完后我大概了解了他的工作原理。
首先你的 CMS admin 頁面是跟你博客一起部署在 Github 上面的，admin 的權限則是通過 Github OAuth 來控制的。在你修改了頁面之后，會通過 js 提交給 netlify，netlify 會通過 Github OAuth 獲取的權限來在你修改了文章之后幫你做 git commit 的操作，大概的原理圖如下。
netlifycms廢話不多說，我們跟著官方文檔開始吧。
為你的博客添加 netlifycms
由于本人用的是 jeklly 博客，文章中的演示部分均為 jeklly。當然 netlifycms 不只支持 jeklly，還支持很多其他類型的 Blog。如果是其他類型的 Blog 可以參考官方文檔的 Guides，不過應該都是大同小異的，不過建議對比本片文章來配置，如何創建 Oauth 應用可以參考本文，因為官方文檔沒有講的太詳細。
當然開始之前你需要有一個已經部署好的博客，沒有部署好的可以參考 jeklly 的部署指引文檔。
增加 admin/index.html 文件
創建一個 admin/index.html 在你的倉庫根目錄下，這個文件內容看起來像這樣。注意官方文檔中并沒有添加 netlify-identity-widget.js 這個 js ，這個是用來校驗你的身份的，需要加上。
<!-- admin/index.html --> <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script><title>Content Manager</title></head><body><!-- Include the script that builds the page and powers Netlify CMS --><script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script></body> </html>可以參考我的倉庫文件，https://github.com/elfgzp/elf...
然后在你的首頁的 index.html 的 header 增加一段 js 代碼。這段代碼的作用是在你登錄你的 cms admin 頁面之后，netlify-identity-widget.js 會將你重定向到首頁，然后這段代碼會把你帶回 admin 頁面。
<header><!-- ... --> <script> if (window.netlifyIdentity) {window.netlifyIdentity.on("init", function (user) {if (!user) {window.netlifyIdentity.on("login", function () {document.location.href = "/admin/";});}});} </script> </header>增加一個 admin/config.yml 文件
同樣在倉庫根目錄下創建一個 admin/config.yml 文件，這個文件內容看起來是這樣。注意官方文檔中的 backend:name 是 git-gateway ，我們需要修改成 github。
backend:name: githubbranch: master # 默認是 master 分支 media_folder: 'assets/uploads' collections:- name: 'blog'label: 'Blog'folder: '_posts/'fields: # 這里這些字段對應到你寫文章的 markdown 上方的一些文章屬性 widget 的配置可以參考官方文檔的 widget 部分- {label: "Layout", name: "layout", widget: "hidden", default: "post"}- {label: "Title", name: "title", widget: "string", tagname: "h1"}- {label: "Date", name: "date", widget: "datetime", format: "YYYY-MM-DD hh:mm:ss"}- {label: "Tags", name: "tags", widget: "string"}- {label: "Body", name: "body", widget: "markdown"}可以參考我的倉庫文件，https://github.com/elfgzp/elf...
在 netlify 配置好你的倉庫
在使用 Github 賬號登錄了 netlify 后，點擊 「New site from Git」，如果搜索不到的話記得給你的 netlify 授權訪問你的倉庫。
create_a_new_site跟著指引創建，注意 deploy 這個部分如果你有別的 CI 可以將他的 build command 去掉。
create_a_new_site_2創建完成后，你就會在你的網站列表里面看到你的網站了。如果你有自己的域名，需要到 Site Settings > Domain Management 設置你的個人域名。
domain_management配置 Oauth App
上面幾個步驟完成后，將修改 push 到倉庫，你已經可以在你的 admin 頁面看到一些東西了。
login但是這個時候你點擊登錄肯定是登錄不了的，我們還需要配置一個 Oauth App。
首先打開你的 Github 頁面，依次按步驟 Settings > Developer settings > Oauth Apps > New Oauth App。
按照下圖填好你的 Blog 信息，注意 Authorization callback URL 需要填 https://api.netlify.com/auth/done。
oauth_app_1然后復制好你的 Oauth Client ID 和 Oauth Client Secret。
oauth_app_2打開 netlify到 Site Settings > Access control > Oauth - install provider，將復制的信息粘貼進去。
oauth_app_3完成上面的步驟就大功告成了，你就可以登錄你的 Blog Admin 管理你的文章了。
使用技巧
這里有一些使用的技巧想分享一下。
新建一個 CMS 分支用來打草稿
因為本人加了 CI 所以 push 到 master 之后就會更新了，這樣就不能打草稿了，所以我開了一個 cms 的分支。文章保存后都會 commit 到這個分支上，等你需要發布的時候在提交 PR 到 master。
backend:name: githubbranch: cms # 默認是 master 分支Markdown 效果預覽
netlifycms 的 Markdown 預覽非常的丑，我直接把他關了，代替預覽的方案就是切換編輯框的 Rich Text 和 Markdown 模式。
在文章中添加圖片
肯定有讀者注意到了在增加了 ![]() 的 Markdown 圖片標簽后，切換到 Rich Text 就可以選擇上傳圖片了。
總結
以上就是為 Github 增加 CMS 的解決方案，如果有什么問題或者有更好的解決方案，可以在下方留言。
總結
以上是生活随笔為你收集整理的如何为你的 Github 博客添砖加瓦的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 看完这篇 HTTPS，和面试官扯皮就没问
- 下一篇： Java SPI 源码解析及 demo