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 -「内容管理」