現在前端搭建一個CMS有很多選擇,可以用php,不過聽說php馬上也考慮使用vue了。基於php的有wordpress,typora等,都是很成熟的cms。
其它的還有靜態博客,如hexo,jekyll,敲一敲命令,就可以部署到github或者阿里雲上面。
當然我們可以選擇node來作為我們開發的動力,這里又有很多開源的基於node的CMS可以選擇了
1 node的框架
express
koa
thinkjs 360開發的node框架,有點類似thinkphp 可以直接寫async和awaite 支持ts
sails.js
阿里的egg
hapi
今天我們要講的是keystone,倉庫在這里 https://github.com/keystonejs/keystone
官網在這里 http://keystonejs.com/
2 好看的demo
http://www.sydjs.com/
http://makeandbuild.com/
3 安裝
-
首先安裝node和mongodb
-
安裝keystone-generaotr
npm install -g generator-keystone -
安裝yeoman
npm install -g yeoman -
創建新目錄
mkdir test
cd test -
生成
yo keystone -
啟動
node keystone
打開瀏覽器的3000端口你就可以看到你的項目了
4 目錄結構
|--lib
| 定制的庫和代碼
|--models
| 程序的數據庫模型
|--public
| 公開的靜態文件 (css、js、images等)
|--routes
| |--api
| | 程序的api控制器
| |--views
| | 程序的視圖控制器
| |--index.js
| | 初始化程序的路由和視圖
| |--middleware.js
| | 為路由定制的中間件
|--templates
| |--includes
| | 通用的 .jade 組件放這里
| |--layouts
| | 基礎 .jade 布局放這里
| |--mixins
| | 通用的 .jade mixins放這里
| |--views
| | 程序的視圖模板
|--updates
| 數據組裝和遷移腳本
|--package.json
| 給npm的項目配置
|--web.js
| 啟動程序的主腳本
5 設置參數
如果你學過express 那么這些參數都很簡單
有3種方式配置keystone的參數
- keystone.init( object )
- keystone.set(key, object)
- 在.env環境中配置 僅有部分配置項支持
env參數 影響緩存已編譯模板
views 放程序視圖模板的路徑
5.1 設置模板引擎
'views': 'templates/views',
'view engine': '.hbs',
'custom engine': handlebars.create({
layoutsDir: 'templates/views/layouts',
partialsDir: 'templates/views/partials',
defaultLayout: 'default',
helpers: new require('./templates/views/helpers')(),
extname: '.hbs',
}).engine,
5.2 mongodb的設置
如果你的Mongodb在阿里雲上或者在其他主機上,需要自定義,因為默認是localhost
MONGO_URI=mongodb://your-server/database-name
5.3 https服務器參數
可以選用nginx或者node提供的https服務器
如果選擇keystone提供額,需要設置下面的參數
ssl
ssl key 指向SSL秘鑰的路徑
ssl cert 指向ssl證書的路徑
ssl port 啟動ssl服務器的端口,默認為3001
5.4 配置文件.env不要上傳到你的代碼倉庫
mongo process.env.MONGO_URI || "mongodb://localhost/your-db"
5.5 配置管理界面參數 - 富文本編輯器
wysiwyg 所見即所得
keystone.set('wysiwyg additional options', {
external_plugins: {
'image':'http://bhaltair.oss-cn-shanghai.aliyuncs.com/tinyMCE/plugins/image/plugin.min.js'
},
selector: "textarea", // change this value according to your HTML
plugin: 'textpattern',
textpattern_patterns: [
{start: '*', end: '*', format: 'italic'},
{start: '**', end: '**', format: 'bold'},
{start: '#', format: 'h1'},
{start: '##', format: 'h2'},
{start: '###', format: 'h3'},
{start: '####', format: 'h4'},
{start: '#####', format: 'h5'},
{start: '######', format: 'h6'},
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList'}
]
})
5.6 用戶認證參數
cookie secret 瀏覽器cookies的加密秘鑰,最好設為一個長長的隨機字符串
session store 默認存在內存中,你可以設置為mongo 或者conncet-redis
6 使用pm2部署你的本地應用的遠程服務器
設置你的雲服務器和github的ssl登錄
設置你本地主機到你的雲服務器的ssl登錄
配置pm2的.echosystem.config.js
pm2 deploy
