博客搭建二三事

点此先来看一眼

一、为什么自己搭建

1、我想在自己的网站中去做一些有意思的事情，包括但不限于目前的博客和摄影。

2、大型博客网站不够简洁，之前也有使用过简书、CSDN等一些博客网站，但简书的审核标准太奇怪，而且会锁掉已经审核过好几个月的文章，CSDN则是在提交文章时要选一堆内容（然鹅还是会来CSDN备份一份副本），我想要一个简简单单的个人网站作为积累，因此产生了动手自己做一个的想法。

3、为什么不使用 Wordpress 这类成熟的博客模板？之前有使用过，感觉定制化的程度不太够，无法拓展一些自己的内容，比如 Echart、Three.js 等。

根据上述原因我决定着手搭建一个自己的博客。

二、技术选型

UI 框架

UI 框架上选择了 AntDesign，之前有使用过 ElementUI、iView、AntDesign，不考虑深层次原因，单纯样式上来看我个人更加喜欢 AntDesign 的设计。

前端

本身自己的技术栈是 Angular 和 Vue （虽然开发过 React，但基本是 C + V，抽空补一补 React），考虑到是轻量级的博客网站，放弃了使用更加壮大的 Angular，Vue 已经足够满足我的需求，并且在开发难度上 Vue 也会低一些（个人拙见）。

后端

本身自己没有从事过后台开发工作，只是阅读过公司后台设计的 Java 源码，选择使用 Node.js 进行开发是考虑到上手会更快一些，再者前端招聘的需求上熟悉 Node.js 也是加分项。

数据库

MongoDB 和 MySQL，我不想写 SQL 语句。。。。。。

服务器

服务器就基本属于知识盲区了，正好赶上了腾讯云的折扣活动，就选用了带有宝塔面板的腾讯云专享版，通过可视化界面去进行服务器的配置。

三、项目整体构思

不能盲目动手，动手前需要构思一下项目现在需要什么和以后需要什么。

布局

首先是层级关系，自己的需求是什么？我的需求是除了最基本的博客模块以外还需要摄影模块、未来还会继续添加其他模块来进行新技术的探索，因此第一层是大的模块分类，选择使用了顶部导航来进行展示。

继续深入下去，摄影模块仅单页展示即可，而博客模块则需要根据内容进行分类，这个分类我认为二级分类就完全能够满足我的需求，毕竟不是无情的码字机器，积累博客的频率也是有限制的，一级分类太少，三级分类太多，二级分类刚刚好。

同时我不喜欢点击分类后我的页面和很多博客网站一样是整体跳转的，那样我还需要点击后退来回到刚才的分类列表，我更希望沿用 SPA 的设计，因此最后选择了顶部-侧边布局。

功能

功能设计的时候除了能看到的展示页面，还需要一个地方去写我的博客和上传我的摄影，因此就需要基本的后台管理模块，那有了后台管理模块，不能谁都可以上去写，因此就需要最基本的用户登录功能，有了用户登录那就又会延伸出图形验证码登录和 Token 校验。

到这一步大概需要的内容已经都有考虑到了，因此判断出系统整体需要的数据库 Model 有：

看得见的	看不见的
CategoryModel 文章分类	UserModel 用户
ArticleModel 文章	CaptchaModel 图形验证码
PhotographyModel 摄影条目

*图形验证码记录我选择保存在数据库保存一份

四、动手开发

后端问题

设计好了后剩下的就是按部就班的开发工作了，后台接口就按照B站一搜一大把的 Node.js 教程来就可以，由于功能点不复杂没有脱离基本的增删改查，遇到的问题都不难。

教程中的问题包括：

• 接口的设计不遵循 RESTful API
• 登录功能过于简单，没有 Token 校验
• 图片上传没有进行压缩

针对这类问题则是自己搜相关文章查阅后进行了修改。

前端问题

前端方面只在摄影模块需要多考虑一下，因为不想一次加载出所有摄影条目，所以需要接口按照分页的形式根据查询条件返回对应的条目数据，但在界面上又不能添加分页组件那样太不美观。

因此选择使用监听滚动事件来决定是否加载下一页，当快要滚动到整个展示元素的底部时请求下一页，然后 concat 数据，这里为了更好的性能使用了 lodash 库的防抖函数。

服务器问题

服务器配置这块由于使用了宝塔的可视化界面简洁了很多，遇到不会的问题时，一定研究一下宝塔界面里的那些功能，基本都能迎刃而解，不需要自己去写 nginx 配置等等。

logo 问题

简单地使用了特殊的字体来充当 logo，但一定要注意选择可免费商用的字体，之前公司项目就有过因为字体产生的一些问题。

五、未来想要继续的内容

博客模块

访客评论功能。

摄影模块

即便使用了图片压缩后，在展示上也非常的卡顿，并且界面的设计也缺乏观看影像的那种沉浸感，在考虑重新设计并优化。

后台管理

访客流量数据监控、数据库备份。

其他

Canvas、Mapbox、Echart、Three.js 可以做点有意思的内容进去。

点此再来看一眼