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

本人博客原文地址.

在使用 Github 作為博客很長一段時間在發愁，主要是有以下幾個痛點：

每次寫文章都要打開編輯器，感覺自己不是在寫文章而是在寫代碼
寫完只是想打個草稿，都要用 git 提交以下更改，更像寫代碼了
不能隨時隨地的編輯，有時候我想用 ipad 修改點什么都不可以

由于以上幾個痛點，每次寫 Blog 感覺自己都需要費很大的力氣，還不如自己寫個筆記就過去了，

但是有些好的東西總是要分享出來才會有價值啊，于是我開始尋找 Github Blog 的 CMS 解決方案，

先來一張效果圖，

blog_admin

netlifycms 與 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://www.cnblogs.com/elfgzp/p/"https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    Content Manager
  
  <body>
    
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>

可以參考我的倉庫檔案，https://github.com/elfgzp/elfgzp.cn/blob/master/admin/index.html

然后在你的首頁的 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 = https://www.cnblogs.com/elfgzp/p/"/admin/";
        });
        }
    });
    }
    </script>

增加一個 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"}

可以參考我的倉庫檔案，https://github.com/elfgzp/elfgzp.cn/blob/master/admin/config.yml

在 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 頁面看到一些東西了，

但是這個時候你點擊登錄肯定是登錄不了的，我們還需要配置一個 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: github
  branch: cms # 默認是 master 分支

Markdown 效果預覽

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

在文章中添加圖片

肯定有讀者注意到了在增加了 ![]() 的 Markdown 圖片標簽后，切換到 Rich Text 就可以選擇上傳圖片了，

總結

以上就是為 Github 增加 CMS 的解決方案，如果有什么問題或者有更好的解決方案，可以在下方留言，

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/24558.html

標籤：其他

上一篇：第一次負責專案感悟

下一篇：Typora配置圖片自動上傳到圖床

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