最近趁着还不忙,就把16年落下的工作补上,搭建一个自己的网站平台。
ps:之前也弄过一个静态的以hexo为模板的个人博客,托管在github上,目前仍可以访问https://tonyhzw.github.io/,感谢github!
不过hexo由于无法配置数据库,所有的数据资源都是静态的,每次发布博客都需要按照要求配置就好了,详情见http://blog.csdn.net/jzooo/article/details/46781805。但是这种傻瓜式部署对于真正了解部署的细节是没什么大作用的,不过倒是不怎么费事,而且关键是都是免费的。
由于最近vuejs越来越火爆,我没有考虑使用熟练的reactjs,而是想使用vuejs的那一套来试试练手。基于此,我采用了以下技术和环境实现了个人博客的部署:
服务器:阿里云 ubuntu 14.04
域名:阿里云提供的万维网域名代理 feblog.top
前端:vue及相关
后端:express及相关
数据库:MySQL
部署环境:nginx +pm2
本次搭建除了用了下iview的ui组件外,没有采用任何的模板,基本都是自己所想所思,目前第一版已经上线部署,虽然很简陋,而且存在不少问题。对此,欢迎大家在对应的github上提交issue拍砖。
http://www.feblog.top/
代码托管:https://github.com/Tonyhzw/happyLife
目前已实现的功能如下:
- 访客的浏览:首页、关于页、具体的博客页、标签页的检索;
- 管理员页:登陆、发布博客页、更新博客页、删除博客页、标签的相关处理;
虽然功能不多,但是仍是一个简单的博客系统。其中主要遇到的问题如下:
- 使用问题:vue、vuex、vue-router、express、mysql
- 如何实现一个博客的编辑器?
- 页面中如何编译markdown语法,并高亮显示?
- 页面刷新后如何保存vuex的相关状态?
- mysql的使用技巧
- CSS技巧
- vue热部署时如何调试?(后端如何配置)
- 如何做权限管理?
- 服务器端如何配置?使得访问域名即可访问对应web程序
- 在从服务器拉取标签信息时,如何取消下拉菜单的显示?
- 如何生成mysql中的id?如何考虑一些数据库的操作逻辑?
- 移动端的适配
- webpack的一些技巧
- 代码压缩
- 热替换及发布版本的配置
- 静态资源路径问题
待完善的功能及性能如下:
- 评论
- 页面美化
- 代码重构
- 分页(已预留接口)
- 发布中添加图片等功能(目前图片由csdn代理)
- 添加代码演示等功能(含功能效果)
- 服务器端日志
- 来访统计(目前很粗略)
- 词云及相关可视化