HTML5教程

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

本文主要是介绍如何搭建个人博客网站【附开源代码】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

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

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的博客

这篇关于如何搭建个人博客网站【附开源代码】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!