林夕轩

立志于前端的超级菜鸟就是我

我的博客上线了!

写在前面的话

去年也有搭一个博客,当时用了的是wordpress。搭建的过程非常简单,在服务器上装上PHP和mySQL。把wordpress上传到服务器上后,配置好Apache基本上就搭好了。wordpress为用户配置好权限及内容管理,如果只是需要写文章的话还是推荐这种成熟的框架,让你更focus到内容。

自从把博客搭好了之后,心里想着“怎么这么快?这不是我想要的!”因为写代码的时间比较短,对服务器端的知识仅停留在书本上,作为有志于成为全栈前端的我必须自己搭起一个博客系统锻炼锻炼自己。

现在,FE已经不能停留在“精通DIV+CSS”的状态,感谢nodejs的火热,前端搭一个完全属于自己的博客已经不是难事。

技术框架

服务器语言自然是nodejs,框架使用的是express。这两个没啥好说的,如果想用node搭服务器,必选这俩搭档。

模板引擎是ejs,有很多人选择jade。ejs相比于jade显得非常“古板”,它只是提供了简单的循环和分支的功能,使用ejs给人的感觉就是view层没有逻辑只是展示数据。而jade则显得自由多了,如果有用过zen-code对jade开发会非常有感觉。但因为自己开发的经历,比较欣赏自由度低一点但更加可控的ejs。

数据库则用了mongodb,理由很简单。给我的感觉就是给FE设计的,数据库里的记录就像一个js对象。mongodb的API也是JS的风格,且它的文档比较全。现在有很多人“哭诉”mongo是个内存大户,但对于我们这种小站来说,性能都是够用。以前使用mongo开发可能还有点麻烦,需要自己封装一些API来存取数据。但现在不同了,有了mongoose!这个中间件帮助开发者比较方便地建模,让我们对数据的操作不会太头疼。

代码管理则用github,现在应该没人不用github,然而用github搭服务器异常方便,通过npm管理插件,在服务器端下载了配置后,一键安装。

搭建过程

首先非常需要提到一个github的长篇文章:一个简单的博客。这篇文章讲的非常详细,需要注意的是在使用mongodb的时候,使用mongoose来代替自己写API。

我写这篇博客不会把搭建的过程详细写出来,而是提出一些需要注意的点。
MVC

Model层方面,应该创建一个model的文件夹,创建一个blog.js,里面使用mongoose封装读取blog和修改的API。

View层,express会创建一个views文件夹。根据每个页面创建不同的模板文件,最好抽象出头部、脚步的文件分别用来引入一些通用的文件。
Controller层,现在因为我的博客系统比较简单。直接在Router中的函数里加一些数据的处理工作。最好的方式还是讲数据的处理放到controller里。
语法高亮和markdown

为了方便存储和样式展现,使用了markdown来写博客。但目前大多数的数的markdown的框架只负责解析而不支持在浏览器中编写的时候预览。最好找到了一个非常不错的工具:epiceditor。但是,框架的样式基本上不可设置,都是自动计算的。还好代码比较好看看懂,稍微改了下就能设置高宽了。同样,它还是有个问题,在一个页面只能创建一个编辑器。

之前我选择用kindeditor,虽然编写比较方便,但是kindeditor会把样式带进html标签中,会严重影响整体页面的样式。

语法高亮,相信很多人使用code prettyfy,然而因为我在解析markdown的时候用了marked,使用了配套的highlight.js

工作原理:编写使用epiceditor,存到数据库里的时候是markdown的格式,在从数据里取出数据后使用marked解析成Html格式,再转成html格式的时候使用内嵌的highlight了。 让服务常驻

平时开发的时候使用mongod的时候将mongodb挂在内存中,但是一旦退出编辑器或者SSH断掉链接后mongodb会自动退出。这时候需要使用命令mongod --dbpath=data/db --fork将mongo放在后台运行。同样,需要讲node挂起,可以使用nohup把进程放到后台执行。但有一个更好的工具forever start /path/to/app.js

改进方面

文档组织:需要把博客的存取改的科学一些,让博客实现“上一篇”、“下一篇”功能

增加评论及GA:这两个不必多说,是博客非常需要的

增加微博、豆瓣插件:同样是非常需要的功能

整体样式的调整:证明自己是FE!

SEO:爬虫,来抓我啊

写在后面的话

这次是我第一次正经写一篇博客,可能很多地方说的不是很详细,但我相信将主要的文档列出来,聪明的读者肯定能从中学到很多东西

参考资料

  1. mongodb文档
  2. mongoosejs
  3. 一个简单的博客
  4. marked
  5. highlight.js
  6. express
  7. markdown简明语法

2014-7-15

搭建博客 前端框架 nodejs 语法高亮 markdown