Github 博客內容管理解決方案 - 「netlifycms」

本人博客原文地址javascript

在使用 Github 做爲博客很長一段時間在發愁，主要是有如下幾個痛點：html

每次寫文章都要打開編輯器，感受本身不是在寫文章而是在寫代碼
寫完只是想打個草稿，都要用 git 提交如下更改，更像寫代碼了
不能隨時隨地的編輯，有時候我想用 ipad 修改點什麼都不能夠

因爲以上幾個痛點，每次寫 Blog 感受本身都須要費很大的力氣，還不如本身寫個筆記就過去了。java

可是有些好的東西老是要分享出來纔會有價值啊，因而我開始尋找 Github Blog 的 CMS 解決方案。git

先來一張效果圖。github

netlifycms 與 jekyll-admin 的對比

剛開始我找到的是 jekyll-admin 這款 jekyll 的 CMS，由於本人用的是 jekyll。可是發現這款 jeklly 還須要一臺服務器，也就是他編輯的只是服務器上的文件。後端

當初選擇使用 Github 做爲 Blog 就是想在沒有我的服務器的狀況下 Blog 依然能工做。雖然目前是利用 CI 部署在本身的服務器上方便國內的搜索引擎爬蟲進行爬取，目的是優化 SEO，提升國內的訪問速度。可是仍是想要一個不須要本身部署後端的 CMS。api

因而我就找到了 netlifycms，通過配置完後我大概瞭解了他的工做原理。服務器

首先你的 CMS admin 頁面是跟你博客一塊兒部署在 Github 上面的，admin 的權限則是經過 Github OAuth 來控制的。在你修改了頁面以後，會經過 js 提交給 netlify，netlify 會經過 Github OAuth 獲取的權限來在你修改了文章以後幫你作 git commit 的操做，大概的原理圖以下。markdown

廢話很少說，咱們跟着官方文檔開始吧。app

爲你的博客添加 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>
複製代碼

能夠參考個人倉庫文件，github.com/elfgzp/elfg…

而後在你的首頁的 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: github
 branch: 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"}
複製代碼

能夠參考個人倉庫文件，github.com/elfgzp/elfg…

在 netlify 配置好你的倉庫

在使用 Github 帳號登陸了 netlify 後，點擊「New site from Git」，若是搜索不到的話記得給你的 netlify 受權訪問你的倉庫。

跟着指引建立，注意 deploy 這個部分若是你有別的 CI 能夠將他的 build command 去掉。

建立完成後，你就會在你的網站列表裏面看到你的網站了。若是你有本身的域名，須要到 Site Settings > Domain Management 設置你的我的域名。

配置 Oauth App

上面幾個步驟完成後，將修改 push 到倉庫，你已經能夠在你的 admin 頁面看到一些東西了。

可是這個時候你點擊登陸確定是登陸不了的，咱們還須要配置一個 Oauth App。

首先打開你的 Github 頁面，依次按步驟 Settings > Developer settings > Oauth Apps > New Oauth App。

按照下圖填好你的 Blog 信息，注意 Authorization callback URL 須要填 https://api.netlify.com/auth/done。

而後複製好你的 Oauth Client ID 和 Oauth Client Secret。

打開 netlify到 Site Settings > Access control > Oauth - install provider，將複製的信息粘貼進去。

完成上面的步驟就大功告成了，你就能夠登陸你的 Blog Admin 管理你的文章了。

使用技巧

這裏有一些使用的技巧想分享一下。

新建一個 CMS 分支用來打草稿

由於本人加了 CI 因此 push 到 master 以後就會更新了，這樣就不能打草稿了，因此我開了一個 cms 的分支。文章保存後都會 commit 到這個分支上，等你須要發佈的時候在提交 PR 到 master。

backend:
 name: github
 branch: cms # 默認是 master 分支
複製代碼

Markdown 效果預覽

netlifycms 的 Markdown 預覽很是的醜，我直接把他關了，代替預覽的方案就是切換編輯框的 Rich Text 和 Markdown 模式。

在文章中添加圖片

確定有讀者注意到了在增長了 ![]() 的 Markdown 圖片標籤後，切換到 Rich Text 就能夠選擇上傳圖片了。

總結

以上就是爲 Github 增長 CMS 的解決方案，若是有什麼問題或者有更好的解決方案，能夠在下方留言。

本文由博客一文多發平臺 OpenWrite 發佈！

爲你的 Github 博客加個 CMS -「內容管理」