个人博客开发及部署
博客开发前奏
很早之前就有开发个人博客的想法，但是没有付诸于实践。
一方面技术不够成熟，不敢放手去做；
一方面属于上班族，自己还制定了学习计划，时间不够充裕；
趁着过年期间，不能出门，整理好思路，就开始火急火燎的博客开发计划啦。
博客开发规划
之前有过一个博客，使用hexo搭建，自己挑选了一个简约的主题，效果还可以。
但是也存在诸多问题，比如访问网页加载速度太慢，每次写文章都要生成一大堆文件。
也考虑过使用WordPress建站，个人感觉还是太重了，还需要使用PHP，和预期不符。
最终我敲定使用NuxtJS进行博客开发，后端使用Koa2，前端使用Vue，文件上传使用之前搭建的Express服务，统一存储静态资源，后期准备使用七牛云进行静态资源托管。
博客开发遇到的问题
1. 如何进行优雅的博客编辑上传？
通过询问Detail大佬以及相关技术调研，我选定使用mavon-editor进行markdown文件编辑，使用github-markdown-css对markdown转成的HTML文件进行样式处理。
mavon-editor：https://github.com/hinesboy/mavonEditor
参考文章：https://juejin.im/post/5adab398f265da0b9671ca25
2. 如何进行项目部署？
nuxt.js项目部署分为两种，一种是静态部署，一种是动态部署。
静态部署使用nuxt generate命令编译应用，根据路由配置生成HTML文件，静态部署。
动态部署需要使用nuxt build命令，利用webpack编译应用，压缩JS和CSS资源，用nuxt start名称启动web服务器。
服务器部署项目不可能只使用node运行script命令，为此我选定使用pm2进行项目部署。
3. 使用开发模式配置的babel在项目部署中出错
在开发模式没有问题的babel配置（使NodeJS支持import、export语法），在项目部署过程nuxt start报错，语法错误，为此只能全部改为CommonJS规范的引用方式。希望有解决方案的小伙伴告诉我一声 😃
4. 线上部署执行nuxt build命令报错
查明原因服务器性能不够，build部署的时候cpu和内存飙升，需要线下执行nuxt build命令进行资源打包，线上只进行项目部署即可。为此，需要修改.gitignore文件两处地方。
- .nuxt忽略注释掉，需要编译生成的文件，上传到服务器
- dist改为/dist，因为在执行nuxt build命令时，.nuxt文件夹下也会存在一个dist
5. 部署后，线上后台路径访问错误
项目部署之后，首页加载没有任何问题，但是请求后台数据总是出现请求路径错误。
需要修改nuxt.config.js配置文件的axios的baseURL配置项。
如果使用的是IP地址访问项目，需要配置好IP地址前缀。
如果使用的域名访问项目，配置“/”即可。
PM2项目部署
1. 项目上传到码云或者GitHub
我使用的是码云，已经配置好SSH免密码验证，后面过程也将使用这种形式进行PM2部署文件配置。
2. 编写PM2配置文件
根目录下创建deploy.config.js文件。下面是我的配置。
host：服务IP地址
repo：项目地址
path：服务器项目存储路径
post-deploy：启动命令
3. 编写script快速启动脚本
steup命令用来向服务器部署文件，deploy命令根据配置文件启动nuxt项目。
4. 执行npm run steup命令
5. 执行npm run deploy命令
至今，项目服务端部署并启动完成，可以直接访问，nuxt项目默认启动端口为3000。
登陆服务器使用pm2 list命令可以查看已经启动的项目。
6. 配置nginx，实现域名访问项目
首先确保有一个域名，并且域名解析成功，如果是国内服务器，需要确保已经备案。
配置好nginx文件后，重新启动nginx就可以使用域名访问个人博客项目啦。
博客地址及效果图
博客地址：http://yueluo.club/
项目总结
虽然开发和部署中遇到很多坑，但整个过程还算是比较顺利的；
开发个人博客项目，使我对koa2的使用更加熟悉，让我对PM2从一知半解到熟练使用，
也了解了从域名解析到申请备案及nginx配置的整体流程，收获还是蛮大的。😊
当然，博客还是需要持续优化的，目前只完成了主体功能，还没有添加评论和点赞功能，
UI效果也不是特别理想，需要再接再厉。💪💪💪