介绍有几天没有写项目了,刚学了一点Nodejs,就用koa2+react搭建一个博客来实践一下。在寻找博文存储方案时,了解到大部分博文已经存储在markdown或者类似的标记语言文档中,于是找了一个比较新的hexo博客框架试用了一下,顺便研究了一下源码。一开始觉得还挺舒服的,因为配置和主题切换已经足够简单了,而且官网的文档也希望用户不需要了解太多,只有最简单的教程,所以感觉还是可以的几个小时内还不够。我的需求是通过Node来实现博文的数据维护和接口,所以我会试验两个hexo插件,hexo-admin和hexo-generator-restful。前者构建了管理界面,包括账号管理、博文撰写和管理等功能,后者提供了hexo中所有内容的输出界面,无独有偶,查看源码发现hexo-admin也提供了很多可用于维护博客文章的输入接口。后来把hexo项目部署到服务器上,前台和后台预期的功能也都实现了,但是很无聊...hexo博客搭建hexo博客在本地搭建很简单,全是命令行操作,官网也有教程,不是很清楚->点这里进入。node环境搭建windows环境:https://www.cnblogs.com/zhouy...centos环境:https://www.cnblogs.com/codey...(没记错的话需要重启后安装)installhexo-clinpminstall-ghexo-cli通过hexo-cli初始化博客项目,将blog-site-name替换为你的项目名hexoinit构建完成,开箱即用,目录结构如命令所示进入项目目录,输入命令运行。hexoserver或hexosINFOStartprocessingINFOHexo运行在http://localhost:4000。按Ctrl+C停止。这里没什么好说的,接下来访问http://localhost:4000就可以进入博客了。构建接口服务,首先安装hexo-admin和hexo-generator-restful这两个插件npminstall--savehexo-adminhexo-generator-restful如果需要,可以阅读他们的文档了解详细使用方法:https://github。com/jaredly/he...https://github.com/yscoder/he...我们看一下hexo-admin插件的源码,目录结构如下:入口文件index.js这里的fragment是通过hexo的api方法服务的,在请求中间件中加入了登录模块和路由模块。路由模块分为后台管理页面admin/和后台管理界面admin/api/hexo.extend.filter.register('server_middleware',function(app){//如果配置文件需要密码登录if(passwordProtected){require('./auth')(app,hexo);//设置身份验证、登录页面等}//主要路由app.use(hexo.config.root+'admin/',serveStatic(path.join(__dirname,'www')));app.use(hexo.config.root+'admin/api/',bodyParser.json({limit:'50mb'}));//设置jsonapi端点api(app,hexo);});api.jsapi.js中所有接口代码解析。这是接口封装函数:varuse=function(path,fn){app.use(hexo.config.root+'admin/api/'+path,function(req,res){vardone=function(val){if(!val){res.statusCode=204returnres.end('');}res.setHeader('Content-type','application/json')res.end(JSON.stringify(val,function(k,v){//标签和猫有帖子引用导致循环json..if(k=='tags'||k=='categories'){//将对象转换为简单数组returnv.toArray?v.toArray().map(function(obj){returnobj.name}):v}returnv;}))}res.done=doneres.send=function(num,data){res.statusCode=numres.end(data)}fn(req,res)})}种类太多了。这里我们以博文界面为例。可以看到博文的发布、撤稿、删除、重命名操作、/post功能是根据GET和POST请求类型区分的。use('posts/',function(req,res,next){varurl=req.urlif(url[url.length-1]==='/'){url=url.slice(0,-1)}varparts=url.split('/')varlast=parts[parts.length-1]if(last==='publish'){returnpublish(parts[parts.length-2],req.body,res)}if(last==='unpublish'){returnunpublish(parts[parts.length-2],req.body,res)}if(last==='remove'){returnremove(parts[parts.length-2],req.body,res)}if(last==='rename'){returnrename(parts[parts.length-2],req.body,res)}varid=lastif(id==='posts'||!id)returnnext()if(req.method==='GET'){varpost=hexo.model('Post').get(id)if(!post)returnnext()returnres.done(addIsDraft(post))}if(!req.body){returnres.send(400,'Nopostbodygiven');}update(id,req.body,function(err,post){if(err){returnres.send(400,err);}res.done({post:addIsDraft(post),tagsCategoriesAndMetadata:tagsCategoriesAndMetadata()})},hexo);});其他细节就不赘述,可以直接看其源码,但有需要说明的是hexo创建博文的方式:通过/new我们可以看到hexo通过new创建物理markdown文件,然后通过update方法更新其内容。use('pages/new',function(req,res,next){if(req.method!=='POST')returnnext()if(!req.body){returnres.send(400,'No给定页面主体');}if(!req.body.title){returnres.send(400,'没有给定标题');}hexo.post.create({title:req.body.title,layout:'page',date:newDate()}).error(function(err){console.error(err,err.stack)returnres.send(500,'创建页面失败')}).then(function(file){varsource=file.path.slice(hexo.source_dir.length)hexo.source.process([source]).then(function(){varpage=hexo.model('Page').findOne({来源:来源})res.done(addIsDraft(page));});});});hexo-generator-restful官方文档有详细介绍,他可以提供网站配置site.json,博文。json等等等等。至此,接口搭建工作基本完成。Hexo部署静态部署Hexo官方推荐使用hexo-deployer-git进行静态部署。也就是说,通过下面的配置,hexo会将工程文件翻译成一个.deploy文件夹。并强制将文件夹推送到配置的git目录下,可以通过github渲染该目录下的文件,或者clone静态目录到自己的服务器上进行渲染。deploy:type:gitrepo:#https://bitbucket.org/JohnSmith/johnsmith.bitbucket.iobranch:[branch]#publishedmessage:[message]这意味着每次服务器上的博客是synchronized需要先把博文推送到github,然后在服务器端手动拉取相应的更新,是不是很麻烦,虽然静态部署在安全性和稳定性上更靠谱,而且还有hexo插件-in可以自动执行这些操作,但这不是我想要的。静态资源文件目录:动态部署我心目中最理想的架构是将博文、图片等静态资源存放在github中,服务器通过定时更新或监控更新同步github上的资源文件,然后在上面写入markdown文件github可以自动同步博客站点的内容。这样的内容管理有几个好处:github作为一个备份,万一有一天你忘记了这个博客服务还在你的服务器上,你还有github来帮助你记住。省去了markdown编辑器的开发工作,可以在github上添加和编辑markdown文件。当然,你也可以使用印象笔记等软件进行书写和复制。自己写的编辑器还需要做很多优化工作,大概率不如别人,就不造轮子了。消除复杂的同步工作。服务端也可以选择使用hexo主题模板或者前后端分离开发。这里我选择只提供数据服务的接口。当然,hexo主题模板简洁美观。以centos7为例,下面是部署方式:node环境,hexo环境,接口搭建npminstall-gforevercd创建一个index.js文件,内容如下:constHexo=require('十六进制');consthexo=newHexo(process.cwd(),{debug:true});hexo.init().then(function(){hexo.call('server',{}).then(function(){console.log('serverstarted');})})foreverstartindex.jsnetstat-ntpl查看4000端口是否开启。使用nginx代理这个端口,然后就可以访问了。至此我们已经完成了博客的内容管理,实现了IO接口,不过此时我放弃了。我开始思考为什么要用这种需要长期维护的东西来修炼。想写点什么,有简书、segmentfault等网站的支持。我为什么不从那里写完然后爬取数据。而将服务器与github同步的工作比较复杂,功能简单,但是很消耗我服务器的性能。效果很好,并且易于使用。对于设计师来说,hexo更注重内容。在主题库里看到了很多好看的博客模板。现在还在用的博主几乎都是做设计的。这里有一个我很喜欢的风格:https://clovertuan.github.io/