搭建KeystoneJS

序言：

为啥要写这篇文章：
仅仅是因为这个框架让我了解和学习了很多其他额外的东西，不吐不快。
最近一直在寻找一个简单方便的模板框架，了解了众多nodejs的blog 和 cms 框架，
如：
calypso，ghost, wordexpress, netlify-cms 电脑里装了一大坨各类项目。 
纠结来纠结去，感觉KeystoneJS更具有特色。

calypso, wordexpress 说到底依赖wordpress的phpserver，并且wordpress 异常难用
ghost git上目前最火的cms项目，十分简洁高大上，theme目前还是太少
keystone 他特别的地方是，前端代码完全交给你创造，吼吼，可能起点比较其他高了一丢丢。
但是做过wordpress，你会发现这是多么难得。

---

接下来就是记录一下我研究Keystone的整个过程，和该框架关系并不大。

Demo：https://tobeone.herokuapp.com/home （working on）

列个提纲

• 安装keystone
• 了解keystone以及如何编写
• 配置HTTP2
• 部署到heroku
• 注册使用MongoLab云database
• 使用cloudinary云服务存图片
• 注册使用mailchimp邮件系统

安装keystone

安装方法可以看官网。

准备工作，需要Node + MongoDB ，确保你的电脑里可以切换几个node版本，万一你运行不起来，就呵呵了。

最好安装一个node 版本管理工具
npm install -g i
或者 Mac系统的可以安装brew，然后通过brew 安装nvm
brew install nvm

这里我我补充一下，看github上该项目 以及出来了4.0版本，有很多重大的改动。

npm install --save keystone[@next](https://my.oschina.net/u/223423)

算了还是直接干这个最快的办法,去找demo：

git clone https://github.com/JedWatson/keystone-demo.git
cd keystone-demo
npm install

了解keystone以及如何编写

这个是不大好形容滴。 首先得会nodejs，然后就是express框架，会一个其中的模板。

当然keystone更强大的地方在于他还可以不依赖，框架自身的express框架，你完全可以自己单独用个koa啥的框架。

目前是用jade的模板，属于后端渲染页面，当然你可以做一个前后端分离的页面。但是我觉得意义不大，目前阿里也在回归到react render seaver，假如不是app类，不是前端业务项目，前后端分离就过于执念。

当然这个项目本身后台管理系统就是用的react + redux做的单页面应用。十分的方便。

解读一下目录route 和 templates 最好能相互对应，方便以后维护。 里面的代码还是清晰可见的。在router里面，使用res.locals往前端发送数据。

目录models是 要在设计之前，定义好你要的字段，和需要的业务。数据结构都需要你事先想好定义好在这个目录里面，貌似对开发人员的要求又有点提高了。：）

public文件夹是一些静态资源文件，比如js css。css可以配置是用less 还是 sass。

建议还是稍微再阅读一下官网的文档，方便理解，代码的作者提倡看一下源码。：）其实我说的也是废话。作为一个平时只写页面的前端来说，可能需要提前掌握的东西实在太多。

配置HTTP2

一开始我认为他当时为啥没有考虑HTTP2， 因为express server自身是不支持http2， 后来研究了该项目的很多关闭的bug，已经后来的代码提交记录。结合这源码，发现代码里是有考虑的

try {
	// Use spdy if available
	https = require('spdy');
} catch (e) {
	https = require('https');
}

不知道为啥目前没在文档里提到，只需要安装

npm install spdy -s

下面介绍一下我本地生成证书，配置HTTPS的过程

~ openssl genrsa -out privatekey.pem 1024
~ openssl req -new -key privatekey.pem -out certrequest.csr 
~ openssl x509 -req -in certrequest.csr -signkey privatekey.pem -out certificate.pem

我都放在了 keys这个文件夹

'ssl key': 'keys/privatekey.pem',
'ssl cert': 'keys/certificate.pem',

然后就可以https://localhost:3001/ 了。

部署到heroku

这个项目keystonejs 的github上提到了一个东西，Heroku。一开始真滴不知道干什么的。后来google了一下，哇塞，不错，==免费==的云服务啊！！。。

相当方便，主要是方便到了连上传代码都那么自在。

首先下载一个 Heroku，然后注册一下 CLI（OSX） 首先全局登录

heroku login

这里就是说一下nodejs项目的部署过程，相当的方便 只需要在你当前的git项目目录下

heroku create
//然后push
git push heroku master
//最后
heroku open

 然后你会发现远程分支就会有两个。 下次你的git分支有更新，只需要在你提交完你的分支之后。 执行

git push heroku master

其他还有很多操作比如切换分支发布，比如定义系统变量，比如查看发布log等等。还是去看文档喽：） Document

注册使用MongoLab云database

因为Keystonejs使用的MongoDB，so 在heroku整个database， 这一步当时没有按照Heroku提供的方式来:(

我是直接去了官网 重新注册了个账户，然后选择的AWS的服务。数据库说实话国内访问是略微慢了一点。==免费==！！！ 然后注意需要创建一个用户，然后你就可以自己copy一下你的数据库地址去使用了。 

将相关信息填到你的根目录下的keystone.js init方法里面 'mongo'

使用cloudinary云服务存图片

cloudinary这个==免费==的服务器，其实也提供了很多云服务，我选择了他们的Media Cloud

弄完一系列之后，Dashborad上你会看到你的Account Detail。将相关信息填到你的根目录下的keystone.js init方法 里面，'cloudinary config'。  如何在代码里面使用cloudinary，只需要在项目目录里该model里面把需要上传img的字段定义为CloudinaryImage。

Post.add({

	image: { type: Types.CloudinaryImage },
	content: {
		brief: { type: Types.Html, wysiwyg: true, height: 150 },
		extended: { type: Types.Html, wysiwyg: true, height: 400 },
	},

});

注册使用mailchimp邮件系统

因为该CMS一开始就说到了可以发邮件。那么它里面也配置了mailchimp一只大猩猩。

可以去看视频研究一下 https://kb.mailchimp.com/

将相关信息填到你的根目录下的keystone.js init方法 里面，'mandrill api key'

总结

总结：后面有些新的东西我还没具体研究，只能说作为工具可以使用了，搭建起来了，每个新事物都有其精彩的地方。

KeystoneJS我感觉介于单纯的MVC 和 完善的CMS 之前的框架。他把能够自定义 和想去 自定义的东西给让你做决定。

最大的痛点，想去用他，首先你得是个程序员。。：）

我打算把这个keystonejs的demo继续做下去，边做边学习。
之后我会补充一下结合graphql的使用。

本来源：https://dwz.pm/7o