Github 博客内容管理解决方案 - 「netlifycms」
在使用 Github
作为博客很长一段时间在发愁,主要是有以下几个痛点:
- 每次写文章都要打开编辑器,感觉自己不是在写文章而是在写代码
- 写完只是想打个草稿,都要用
git
提交以下更改,更像写代码了 - 不能随时随地的编辑,有时候我想用 ipad 修改点什么都不可以
由于以上几个痛点,每次写 Blog 感觉自己都需要费很大的力气,还不如自己写个笔记就过去了。
但是有些好的东西总是要分享出来才会有价值啊,于是我开始寻找 Github Blog 的 CMS 解决方案。
先来一张效果图。
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
由于本人用的是 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=</