搭建个人网站

许久没有更博了，当初开博的时候还是一个刚保研的大四学生，如今已是研究生毕业两年，混迹银行业的IT码农，生活还算如意，追求不止于此，2016年初终于发布了自己首个个人网站，写篇文章分享网站的技术框架。

原文地址：http://www.chengweinan.com/article/22

附全文如下：

历时3个月，"程伟男个人网站"算是正式上线了，本网站没有基于任何博客平台，完全是从零开始自主搭建的，现将搭建过程中一些值得注意的技术点记录下来，供大家参考：

一、服务器环境及费用

目前服务器买的是阿里云ECS，配置走的是最低款，包年价格是824元：

实例： 1 核 1GB系列 I简约型 t1
I/O 优化实例： 非 I/O 优化实例
系统盘： /dev/xvda普通云盘 20GB
带宽： 2Mbps按固定带宽
CPU： 1核
可用区： 青岛可用区B
操作系统： CentOS 6.5 64位
内存： 1GB
地域： 青岛
网络类型： 经典网络
云盾： 是

域名是在万网上买的，域名花了45块，云解析花了21块。好在我的chengweinan.com还木有被人注册掉顺便申请了一个企业邮箱。

二、网站架构

网站的整体架构是：AngularJS + SpringMVC + MySQL，Web应用服务器选的是tomcat6，另外为了去除angular-ui机制下URL中的"#"号，还配置了apache服务器。

具体来说，前端是AngularJS框架，纯HTML+JS的组合。前后端的通信是通过SpringMVC框架：前端以POST的形式，走JSON数据格式，通过spring-dispatcher-servlet.xml的配置，与后端进行通信。后端是纯java代码编写业务逻辑。底层访问MySQL数据库是通过SpringMVC引入的org.springframework.jdbc.core.JdbcTemplate包，在JdbcTemplateBean.xml中配置数据库连接的相关参数即可，具体增删改查操作是在java代码中完成的。

所以综上可见，本网站的搭建是非常轻量级的，实际编码起来也非常简洁，每个层次的代码功能划分明确，高内聚，本人灰常推荐这套架构

三、引入的第三方插件

1. 富文本编辑器UEditor

官网网址：http://ueditor.baidu.com/website/  

这个是百度开发的插件。功能非常强大，博客文章中所需的所有内容形式都可以添加和编辑，比如：上传图片、视频，插入代码，插入地图，全屏，预览，打印，本地自动保存（草稿箱）等等。与AngularJS框架也可完美兼容。不过要注意，UEditor只是富文本编辑器，并不是内容管理器，所以通过它编辑所得的文章还是需要自行存储管理。我的方案是将文章数据存储于MySQL数据库中，而数据管理逻辑则写在网站后端java代码里。

2. 评论插件Disqus

官网地址：https://disqus.com/  

这个是目前全球使用最广的评论插件之一。阅读者可以以Disqus、Facebook、Twitter、Google账号评论，可惜不支持其他账户，也不能以游客的身份评论。插件使用者可登录Disqus管理平台管理所有的评论，并进行垃圾评论控制。其他功能待我慢慢挖掘。

3. 一键分享插件JiaThis

官网地址：http://www.jiathis.com/index2 

这个是国内开发的一个一键分享插件，旗下还有友言社交评论框和友荐猜你喜欢组件。一键分享功能可分享到目前国内几乎所有主流社交网站上，并可以定制分享的标题、摘要等项。功能简单然强大。

在这里我还要提一下友言社交评论框，本来网站最初选用的评论插件就是友言，但是因为其与AngularJS的兼容性不是很好，具体原因是angular-ui机制（前文提到的URL中以"#"号来路由不同的页面请求）导致本网站都是局部刷新，没有了独立网页的概念，而友言的评论却是根据独立页面的URL来管理评论的，另外，在angular-ui机制下切换文章页面后，友言插件也不能被再次加载。所以最后不得不放弃友言，选用Disqus。其实友言支持的国内账号更多，且可以以游客的身份评论，所以其他国内的博客引擎下，笔者还是推荐使用友言插件。