网站搭建心得

最近趁着还不忙，就把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的使用技巧
  
  • mysql 两字段排序、防sql注入等操作
• CSS技巧
  
  • 如何使图片资源自适应内容区大小?
  • 页面内容不足时底部栏仍能在底部
• vue热部署时如何调试？（后端如何配置）
• 如何做权限管理？
• 服务器端如何配置？使得访问域名即可访问对应web程序
• 在从服务器拉取标签信息时，如何取消下拉菜单的显示？
• 如何生成mysql中的id？如何考虑一些数据库的操作逻辑？
• 移动端的适配
• webpack的一些技巧
  
  • 代码压缩
  • 热替换及发布版本的配置
  • 静态资源路径问题

待完善的功能及性能如下：

• 评论
• 页面美化
• 代码重构
• 分页（已预留接口）
• 发布中添加图片等功能（目前图片由csdn代理）
• 添加代码演示等功能（含功能效果）
• 服务器端日志
• 来访统计（目前很粗略）
• 词云及相关可视化