搭建个人网站

许久没有更博了,当初开博的时候还是一个刚保研的大四学生,如今已是研究生毕业两年,混迹银行业的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。其实友言支持的国内账号更多,且可以以游客的身份评论,所以其他国内的博客引擎下,笔者还是推荐使用友言插件。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章