跳到正文
文章封面

阮一峰推荐工具:基于React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

前言

近期,阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress,ReactPress一个基于 Next.js 的博客和 CMS 系统,可查看 demo站点。(@fecommunity 投稿)

2024-11-24/RB88NO19NMJGHY35OXTQHO..png

在数字化时代,内容创作与发布已成为连接读者与作者的重要桥梁。而在这个过程中,一个高效、灵活且功能丰富的发布平台显得尤为重要。近期,阮一峰在科技爱好者周刊中推荐了一款开源工具——ReactPress,它凭借其出色的性能和多样化的功能,吸引了众多开发者和内容创作者的目光。

此项目是基于 React + antd + NestJS + NextJS + MySQL 的,项目已经开源,项目地址在 github 上,喜欢的,欢迎给个 star 。
项目地址:https://github.com/fecommunity/reactpress

2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png

此项目是用于构建博客网站的,包含前台展示、管理后台和后端。

此项目是基于 React + antd + NestJS + NextJS + MySQL 的,项目已经开源,项目地址在 github 上,喜欢的,欢迎给个 star 。
项目地址:https://github.com/fecommunity/reactpress

1. 效果图

1.1 前台展示

pc 端

2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png

2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png

2024-11-10/KQFCPOSHPESKXJGYLZ902D..png

2024-11-10/KQFCPOSHPESKXJGYLZ908G..png

2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png

2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png

移动端适配

2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png

管理后台

管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png

2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png

2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png

2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png

2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png

2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png

2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png

2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png

2. 体验地址

网站首页:https://blog.gaoredu.com/
管理后台:https://blog.gaoredu.com/admin

3. 计划

这次是一个完整的全栈式开发,只要部署了这个项目的代码,是完全可以搭建好博客网站的。

环境准备

$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i

配置文件

项目启动后会加载根目录下的 .env 配置文件,请确保MySQL数据库服务和下面的配置保持一致,并提前创建好 reactpress 数据库

DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库

环境准备好后,执行启动命令:

$ pnpm run dev

打开浏览器访问 http://127.0.0.1:3001

4. 收获与感触

学而不用,基本等于没学,因为最近一直在做自己的个人博客网站,所以好久没更新技术文章了;而且是利用业余时间做的,所以经过差不多两个月的搬砖,现在网站终于都上线了。
开发网站的这段时间里,每天晚上几乎都搬砖到接近 11 点,周末的时间大多也在搬砖,每天写完文章,也快 12 点了,搬砖不易啊,喜欢或者觉得不错的,欢迎到 github 上给个 star,谢谢。

5. 文档教程

评论

填写昵称与邮箱即可评论,无需登录。

推荐阅读