用React写的一款个人博客系统,有博客展示页面和后台管理页面,可以管理文章、分类、标签、相册、说说、时间轴、留言、友链等信息。

用React写的一款个人博客系统,有博客展示页面和后台管理页面,可以管理文章、分类、标签、相册、说说、时间轴、留言、友链等信息。

Property
Mar 8, 2022 02:28 PM
Status
Date
URL
https://github.com/lzxjack/react-blog
notion image

0. 看这里

notion image
这是我自己用 React 写的个人博客系统,起初的目的就是作为个人使用,所以代码有很大的局限性(根本原因是因为自己太菜
notion image
)。
欢迎大家starfork,互相交流学习!
notion image

1. 前言

之前我使用hexo搭建过个人博客。hexo很强大,渲染页面速度快,支持markdown语法,可以一键部署,还可以扩展各种插件。
hexo搭建的是静态页面,每次更新文章,都要重新生成静态页面,再部署页面。hexo也没有后台管理,想要修改发布的文章,只能修改源代码,再重新生成页面。所以很早之前就想写一个自己的博客系统,由博客展示页面后台管理页面构成,通过后台管理页面,可以实时更新、发布文章,非常方便。但在当时还没有能力写出这样一个系统,就一直没有去做。
后来学习了React之后,想尝试下写自己的博客,就每天课余时间写一点,最后写出来了
notion image
由于之前有搭建过hexo博客,所以就按照之前自己hexo博客的功能来写,基本的功能有文章管理、文章搜索、分类/标签、图库、说说、留言板/评论、友链、小作品页面、建站日志时间轴、关于页面等。但是很多功能还不完善,不具有通用性,只适用于本博客,以后会慢慢改进
notion image

2. 仓库地址

1. 博客展示页面

演示地址:「飞鸟小站」
仓库地址:「GitHub」
notion image

2. 后台管理页面

仓库地址:「GitHub」
notion image

3. 用到的技术/工具

notion image
博客主要使用到的技术如下:
前端(博客页面+后台管理):
  • React脚手架Create-React-App
  • 状态集中管理工具Redux
  • 前端路由React-Router
  • AntD组件库
  • markdown格式渲染工具marked
  • 其他第三方包
后端
后端使用腾讯云CloudBase云端一体化后端云服务,包括:
  • 用户管理:管理员登录、访客匿名用户登录
  • 数据库:存放管理员的博客数据
  • 网站托管:托管后台管理页面
其他
  • 评论回复的邮箱提醒API,使用Node.js编写,运行在自己的阿里云服务器
  • 已配置SSL 证书,开启HTTPS访问
  • 博客展示页面托管于腾讯云开发静态文件托管
  • 图床使用阿里云OSS
  • Webify:应用托管,自动部署后台管理页面

4. 主要功能

1. 博客展示页面

  • 首页预览所有文章
  • 查看文章评论、发布评论、评论回复
  • 搜索文章:根据关键字搜索、分类搜索、标签搜索
  • 查看相册
  • 查看说说
  • 查看留言板留言、发布留言、留言回复
  • 查看友链、访问友链
  • 查看小作品
  • 查看建站日志时间轴
  • 查看关于本站/关于我
  • 进入后台管理页面

2. 后台管理页面

管理是指:对数据的
  • 首页预览博客基本数据(文章数、草稿数、友链数等),管理分类、标签
  • 文章管理、草稿管理
  • 相册管理
  • 说说管理
  • 查看留言、评论,删除留言、评论
  • 友链管理
  • 小作品管理
  • 关于页面文字管理
  • 建站日志管理

5. 不断改进

由于时间有限、本人能力有限,博客系统还有很多不足之处,会在学习新知识的同时不断改进博客。
也请各路大佬多多指点
notion image