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

前言

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

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 进服务器，这就比较傻了。所以我们肯定还需要一个后台管理，来管理我们的博文，留言，评论等等

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

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

后语

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

实际的博客（目前大更新还在路上，所以现在博客的表现和你 github 拉下来的表现是一致的）
leelei 的博客