如何搭建个人博客网站【附开源代码】

前言

最近个人博客打算做一次比较大的更新，所以把第一版开源了。顺便写个文章记录一下搭建博客的一些注意项

1.网站模块

大概有一下这些(从各处个人网站观察得到)

• 主页展示
• 个人介绍
• 留言板
• 心情记录
• 博文归档
• 作品展示
• 商业合作
• 书籍分享

我目前是只选择了主页综合展示,书籍分享,心情记录,个人介绍4个模块。没有专门做一个博文的归档,是因为我考虑到博文数量不多，于是就把这一部分整合到主页，使用无限滚动的方式来展示博文，如果文章比较多的话还是推荐专门分开一个模块做文章的检索分类。

2.挑选技术栈

其实选vue的话，我可以少花很多时间hhh。因为学了react，然后公司的项目又用不上，所以就拿个博客来练手了，写法比较稚嫩，希望各位大佬见谅。
使用到的技术大概有这些react,redux,axios,sass

3.需要实现的功能和注意点

1. 文章浏览
   首先最主要的肯定是能看文章嘛，那么如何记录文章，如何排版文章呢？我一开始是想使用富文本编辑器的，直接输出html保存到数据库，然后前台直接读即可。后面考虑到，如果这样的话，我就要sf上所有的文章自己在富文本编辑器上重新排版编辑一遍，那就太浪费时间了。所以我选择了直接使用markdown语法来编辑文章，然后使用react-markdown插件来解析我的文章，最终在前端进行展示。
2. 文章评论
   一开始是想做楼中楼回复，可以进行多级评论, 后面考虑到第一:实现起来会麻烦很多，后台的数据库设计也比较复杂。第二：我这个是个人博客网站，没必要进行多人互相讨论。所以，只做了一级评论，也就是每次我回复别人也算是一条新的评论。
3. 访客记录
   因为是个人网站，所以没有设计用户系统，想想别人发表评论还需要登陆之类的操作是多麻烦。那发表评论怎么记录是谁发表的呢？我还是提供了一个表单来填写发言人的名字的。这个名字仅仅是储存在前台的localstorage里，讲道理也没有人会一直清理这个东西，所以你下次来我的网站，就记住你了。
4. 文章阅读和点赞等
   因为没有用户系统，所以阅读数应该是每次点进来都要发请求记录一次的，这个问题不大。是否已经点赞的话，这些信息都可以储存在前端的localStorage里，记录一下文章id即可，下次点进这个文章就知道是否赞过了
5. 订阅|消息推送
   消息推送的话，我使用的是node.js接入第三方的邮件服务来发送邮件通知订阅者。除了发文章要通知订阅者，有访客评论的时候最好也搞个右键通知我们自己

4.页面适配

现在手机那么多人用啦，讲道理确实得给手机适配一下，手机端我去掉了很多的模块，主要留下了文章列表，而且是使用媒体查询来进行页面适配的，为什么要使用媒体查询？

• 因为我要1px，1px地精准调节来达到移动端比较好的展示效果
• 因为我不需要适配太多设备，一种手机，一种pc即可，手机屏幕尺寸不做太多细致的处理，因为现在大部分人的手机尺寸都是全面屏6寸这样，看我博客的人显然不会是用着安卓2.3的70岁的阿伯，基于网站的受众分析，只需要做这两种尺寸的适配

页面适配说了，那么页面设计呢？
设计这玩意儿见仁见智，如果懂设计，那就自己设计，如果不懂，那就抄，就是这么简单

5.后台管理

当我们写好前端的博客以后，并且挂在服务器上的时候，肯定不想每次写文章，用xx笔记写好，然后手动insert进服务器，这就比较傻了。所以我们肯定还需要一个后台管理，来管理我们的博文，留言，评论等等

目前我的博客有的管理项目如下，可以参考下：

• 标签管理
• 博文管理
• 评论管理
• 订阅管理
• 音乐管理
• 书籍管理
• 心情管理

6.后台服务

我选用了Node.js来写后台服务，整体比较简单，需要注意的有两个点.

• 接口权限
  我们要对请求进行拦截，并判断有无携带cookie信息来决定是否进行跳转。前台的权限应该是仅限于数据库读操作的，后台管理是可以进行增删改查的，我们可以建立一个白名单来辨别这两类接口，然后进行相应的拦截操作或者跳转即可。
• 数据库操作
  我没有使用适合前端的mongoDB,而是使用了mysql，为什么？因为前面也说了，这个是练手的项目，所以我就没有用那么常规的mongoDB...确实是有些蛋疼。使用mysql的话，直接拼接sql语句那肯定是非常繁琐和复杂的，我使用了一个ORM框架，非常好用，可以像使用mongoDB那样使用mysql。可以看我之前的博文纵享丝滑TYPEORM

后语

说了那么多，不如直接上源码，各位老爷，给个star可好？
github博客源码

实际的博客（已经大更新了，用vue重构了）
leelei的博客