Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
55 lines (32 sloc) 3.45 KB
permalink title tags date comment layout emotag
/posts/netlify-as-github-pages-cms
为Github Pages添加后台管理界面
jekyll
2018-06-23 13:33:56 +08:00
true
post
🔥

GitHub Pages哪儿都好,就是没有后台管理(因为是静态博客嘛),每次需要本地写markdown然后push,很是繁琐。

一个办法是去github仓库直接修改提交,但还是不太方便。

有一些博客利用issue或gist,用单页应用读取,这样有两个问题,一是SEO,二是你现有文件必须搬家或改造,你还必须用别人提供好的模板。

有没有办法在保留现有主页的同时,添加一个管理后台呢?

搜索关键词“Jekyll CMS”,试了一大堆,终于被我找到了答案。

就是netlify-cms官方Demo

优点

  • 改造简单,甚至不能说是改造,只要在仓库添加一个admin文件夹,里边放两个文件就行了。

  • 后台可定制化,/admin/config.yml这个文件里可以详细定制管理页面。因为jekyll博客每个人的meta data都可能是不一样的,所以可以自定义这些字段就很重要。

步骤

以下步骤,能在本地完成的你可以先在本地做,最后再push,因为配置config.yml文件以后在本地刷新实验效果比较方便。配置config文件参考文末链接。

  • 打开我仓库里的admin文件夹,保存下来,按照你自己的需求编辑,然后放到自己的仓库。

  • 进入 https://app.netlify.com/,创建一个新应用,关联Github仓库。Build Command输入jekyll buildPublish Directory输入_site

  • 进入应用后,Custom Domain输入你主页的域名,他会提示你DNS配置有问题(因为你用的是Github的DNS),不用管他。(这步必须有,不然你从你主页还登陆不了)

  • Github OAuth页面,新建一个app,获取Client ID和Secret。再到Netlify/Settings/Access Control/OAuth,把ID和Secret填进去。

基本配置的步骤就是这样,我还做了一些额外的事情,所以如果你完成上述步骤后遇到了坑,接着往下看。

Netlify自己是提供服务器的,他会编译你关联的Github仓库,这就造成两个问题,一是你的博客变成了两份(逼死强迫症),二是你会发现缺少Gemfile和Gemfile.lock,然后netlify编译各种报错。(但是添加这两个文件后我本地jekyll就运行错误了)

  • 我的办法是再弄一个branch,专门给netlify编译(settings/deploy/Production branch可以设置编译分支),里边最主要的就是Gemfile、Gemfile.lock、index.html三个文件,index.html跳转到主页就行了。这样你本来的master分支还跟原来一样。

此外,config文件里可以配置登陆方式,我用的是Github OAuth方式,优点是你只要登陆GitHub就能进后台,而默认的方式需要登陆netlify。我netlify是用GitHub绑定的,然后因为没有注册邮箱还登陆失败了。所以推荐OAuth方式,方便且事儿少。

到此,就完成了。

链接

Netlify后台:https://app.netlify.com/

Config配置文档:https://www.netlifycms.org/docs/intro/